Support

November 10, 2021 at 11:05 am

If we wanted to try and target the specific event ID in the table since it is not responding to the new hidden category, how would we do that? The ID of the event we want to remove is 17890.

You can’t on the table view template you are using, thats what I was referring to with:

The table view doesn’t include the Event ID (or slug) within the individual table row, so you can’t easily target that specific event, however, it does output the events category slugs on those rows which you can target.

The row doesn’t have the Event ID, or slug, for you to select using CSS.

Change the CSS I gave you earlier to be:

#espresso_calendar .hidden,
#ee_filter_table .hidden {
    display: none!important;
}

That should hide that event.

November 10, 2021 at 11:29 am

What does the !important code do?

With CSS, styles override other styles based on ‘specificity’ so the rule that ‘wins’ is based on how specific the selector is and there is a specific way in which that is calculated, see:

https://css-tricks.com/specifics-on-css-specificity/

!important; on a specific rule basically sets it to the highest specificity and overrules everything, it should be used sparingly. The reason it works for you here is because the table has in-line styles setting the display property, so we need to override that and in this example using !important; is fine.

So to give an example, you could have:

.content p {
    /*Set the general font colour to red, any p tags in an element of class content*/
    color: red;
}
#special-content p {
    /*Set all text within p tags within an element with ID 'special-content' to use black */
    color: black;
}
p {
    /* Mehhh, any left over p tags can be set to yellow. */
    color:yellow;
}

Now the last CSS selector there is the least specific, just whatever p tags it finds, right? So that applies to everything and all paragraph text is yellow.

The first selector is a little more specific, . indicates a class, and you can have multiple elements with the same class, so it targets a p tag within an element that has a class of ‘content’. It’s more specific than the last rule, so ‘wins’ on those specific sections and makes those elements red.

The middle selector uses an ID ‘#’, you ‘should’ only have one element using any one ID on a page, mean using an ID is more specific than a class, so it ‘wins’ over the others.

Note the order of the CSS as it’s written, isn’t as important as how specific it is, which is why I wrote it in that order.

At that point, depending on the page markup you could have 3 different font colours on a single page. But, if I add !important; to:

p {
    /* Mehhh, any left over p tags can be set to yellow. */
    /* Actually, set it to be important, I want this to always 'win' */
    color:yellow!important;
}

All of the above basically goes out the window and every p tag ‘color’ attribute is overridden to use yellow. All text is yellow, because yellow is important.

November 11, 2021 at 7:45 am

You’re most welcome.