Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Remove Elements based on Tags or Catagories


kronanberg

Question

Posted (edited)

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?

Edited by kronanberg
Spelling & Grammar
Link to comment

5 answers to this question

Recommended Posts

  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)

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!

 

 

Edited by kronanberg
Clarification
Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)

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

Add the following to Settings > Advanced > Code Injection > HEADER. The OP doesn't need to do this step as they already have jQuery installed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > HEADER. The OP doesn't need to do this step as they already have jQuery installed.

<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d6/twcsl.js"></script>

Add the following to Event Settings > Advanced > Page Header Code Injection for the event page.

<script>

  $( ( ) => {
  
    /*
    
      add categories attribute to event detail page
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
                      twcsl
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
    if ( ! twcsl.eventPage.isDetail ) return; // bail if not detail
    
    const separator = ', ';
    
    const categories = twcsl.eventPage.categories
    
      .join ( separator ) + separator;
      
    $( 'body' ).attr ( 'data-event-categories', categories );
    
    } );
    
  </script>

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...