Remove Elements based on Tags or Catagories

Hey Everyone!

I'm trying to hide elements of an events page — such as date, time and pagination — depending on whether or not it is within a certain category. I can hide all of those elements globally no problem!

Essentially I want to hide time and dates from "past" events and so I have created these events with a "past" category, but I'm wondering if it is possible to remove elements  depending on category across the website?

Anyone any ideas?

Hi. Can you share link to event page? We can check easier

Hey! I can https://www.seedheadarts.com/events/lap-off-13-sept-2019

So this is an example of a past event which you can see has a category of "past".

I'm wondering is it possible to hide elements on this page — and others with the same category (or tag) — across the website?

* and obviously I can appreciate this would more than likely be through the addition of some code — which is no problem!

On 5/31/2021 at 4:53 AM, kronanberg said:

Hey! I can https://www.seedheadarts.com/events/lap-off-13-sept-2019

So this is an example of a past event which you can see has a category of "past".

I'm wondering is it possible to hide elements on this page — and others with the same category (or tag) — across the website?

* and obviously I can appreciate this would more than likely be through the addition of some code — which is no problem!

 

 

Hi. Do you use Personal, Business or Commerce Plan?

This isn't a side-wide solution but will get the ball rolling.

Please see Event Detail Page Categories Attribute Add.

What the code is doing is adding an attribute to the body tag which then can be used in a CSS ruleset to make changes to an event detail page.

The format of the data-event-categories attribute value is as follows. Notice the last tag gets a comma space at the end. It makes it easier to use one format for the CSS selector.

[tag], [tag], [tag], 

For example.

<style>

  body[data-event-categories*="Past, "] .event-meta-date-time-container {
  
    display : none;
    
    }
    
  </style>

Something similar to the above might be applied to other areas of the site. We'd need to see an example of each page where things need to be hidden to know.

Let us know how it goes.

@creedon

Just amazing! That has worked perfectly and I'm not the best with code, but that was easily implemented following your guidelines.

Can't thank you enough for your help with this. Excellent!

@creedon

I know this is an old post, so sorry if it's no longer relevant. I'm trying to accomplish something similar. If an event has a category of NoDate, I need to hide the date on the main event landing page, the event detail page and also in the summary block on the homepage. I tried implementing your above code, and used the following styles:

body[data-event-categories*="NoDate, "] .eventitem-meta-date, .eventlist-datetag, .summary-thumbnail-event-date {display: none;}

I'm doing something wrong. It's hiding ALL dates on the event landing page, NO dates on the event detail page, regardless of the NoDate category, and NO dates on the homepage. Any help would be greatly appreciated. 

The website is: https://blue-gecko-e526.squarespace.com/
password is auction

Thanks!

1 hour ago, PamMikWeb said:

I know this is an old post, so sorry if it's no longer relevant.

The code had changed a bit since the original post. It is still relevant but it only covers the event detail page use case. Let's cover this use case first.

I have updated my June 4, 2021 post.

Please remove the code you installed and reinstall based on the updated Install instructions.

Let us know how it goes.

@creedon

That part worked! I just changed the targeted class to .eventitem-meta-date because I want the time to show, just not the date. Do you know what I'd target for the other pages? My guess didn't work. THANK YOU!

On 2/27/2023 at 1:57 PM, PamMikWeb said:

I need to hide the date on the main event landing page

LIke the detail page SS doesn't provide CSS category classes to alter each event.

The categories for each event are provided but too deep and not in a class name format. Code would need to be created to surface those deep categories much like my code for event details pages. Currently no code that I'm aware of exists to do this.

Quote

also in the summary block on the homepage

The summary blocks don't provide any category meta information. So no code can surface info that isn't there. You might look into Lazy Summaries. I don't know if it has access to the categories but it wouldn't hurt to ask.