Jump to content

Hiding items on one blog page but not another

Recommended Posts

Hi!

I am trying to hide the date on both a blog page and the individual posts within that page. I am using the blog page as an "About our Coaches" page. I do not want the actual blog page for the site affected. I would also like to hide the title and date on individual posts for the "About our Coaches" page. The code below is working for the blog page but is hiding the date and title for the individual posts on the actual blog page. Am I missing something with the code? 

#collection-5f455f51abda56627b0f9b71 .Blog-meta, .BlogItem-meta, .BlogItem-title {
  display: none;
}

Thanks!

Link to comment
  • Replies 17
  • Views 1.6k
  • Created
  • Last Reply

@IXStudio I'm using the Blog page as both a Blog and a Team page. I need the Blog page to display titles and dates as a blog page normally would. But I want to hide titles and dates on the Team page. So I need to target that specific page with CSS. Images attached below.

Screen Shot 2020-08-26 at 1.08.40 PM.png

Screen Shot 2020-08-26 at 1.12.42 PM.png

Link to comment

Remove your past CSS

#collection-5f455f51abda56627b0f9b71 .Blog-meta, .BlogItem-meta, .BlogItem-title {
  display: none;
}


and insert this one

body.collection-5f455f51abda56627b0f9b71 .Blog-meta, .BlogItem-meta, .BlogItem-title {
  display: none !important;
}

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

@IXStudio Still not working.

  • Hides date, shows title on Coaches page 🙂
  • Hides date AND title on individual posts on Coaches page 🙂
  • Hides date ONLY on Blog page 🙂
  • Hides date AND title on individual posts on Blog page 🙁
    • Need to show title on individual posts on Blog page
Link to comment

You should be able to accomplish this by using a blog summary block on a page. You can make changes to it that will not effect the original blog page, which you should put in the unlinked section of your site. Summaries have their own metadata filters, including date, it will not post there if you choose not to have the date but still show up on the blog post. You can have more than one Blog summary page and filter the posts you want by category. I have one blog page but using this technique I can make it look like two on my site, I split out some posts under the heading photography lessons from my blog stories which have no date published. The original blog page can only be gotten to by using the archive or search but when found the date shows.  Its very versatile due to the fact that each summary block has its own id and css code can be targeted to it. 

My Random Views

Link to comment

FYI 7.1

To hide the publication dates on your Blog Page (list of blog posts):

  1. In the Home Menu, click Pages, then click a Blog Page.
  2. Click Edit in the top-right corner of the Blog Page.
  3. Hover over the blog section and click the pencil icon.
  4. Ensure Date isn't selected as either Primary Meta Data or Secondary Meta Data.
  5. Hover over Done and click Save.

These changes affect all Blog Pages using the same layout.

To hide the publication date on blog posts:

  1. In the Home Menu, click Pages, then click a Blog Page.
  2. Hover over a blog post in the side panel and click Edit.
  3. Hover over the post and click the pencil icon.
  4. Switch the Show Date toggle off.
  5. Hover over Done and click Save.

This change affects all blog posts on your site.

Link to comment
11 hours ago, boxmade said:

@derricksrandomviews @IXStudio This is what I came up with. I want the title but not date to appear on the blog page. And neither the title or date to appear on the individual posts. It's not working. Any help? The page is here.

.Collection-5f455f51abda56627b0f9b71 .Blog-meta Blog-item-meta .Blog-meta BlogList-item-meta .BlogList-item-title {

display: none;
}

 

Url doesn't exist. Can you check again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
17 hours ago, boxmade said:

@tuanphan Sorry. Just edited the url. Here it is. https://www.missionvalleygymnastics.com/coaches

Add to Home > design > Custom CSS

time.Blog-meta-item.Blog-meta-item--date {
    display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
18 hours ago, tuanphan said:

Which code did you use?

I used all of the below. Also tried #pageid instead of .collection. 

.Collection-5f455f51abda56627b0f9b71 .Blog-meta Blog-item-meta .Blog-meta BlogList-item-meta .BlogList-item-title {
display: none;
}

.Collection-5f455f51abda56627b0f9b71 time.Blog-meta-item.Blog-meta-item--date {
    display: none;
}


.Collection-5f455f51abda56627b0f9b71 .BlogItem-title .Blog-meta Blog-item-meta {
    display: none;
}
 

Link to comment
On 9/4/2020 at 11:52 PM, boxmade said:

I used all of the below. Also tried #pageid instead of .collection. 

.Collection-5f455f51abda56627b0f9b71 .Blog-meta Blog-item-meta .Blog-meta BlogList-item-meta .BlogList-item-title {
display: none;
}

.Collection-5f455f51abda56627b0f9b71 time.Blog-meta-item.Blog-meta-item--date {
    display: none;
}


.Collection-5f455f51abda56627b0f9b71 .BlogItem-title .Blog-meta Blog-item-meta {
    display: none;
}
 

Edit Page > Add Code Block > Paste this code to hide date

<style>
  time.Blog-meta-item.Blog-meta-item--date {
    display: none;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.