Custom CSS problem

Support
#1

Hello, thanks for your help, this is a great theme, and things are going well. My URL is open-nys.org/training. In this area I have two recent post feeds. However, they are meant to represent events, so showing the date published is misleading. It would be great to customize what is shown in that feed, however, I don’t see that as an option. At minimum I thought I could hide the date to not be confusing.

When adding the custom css to the page, I got no result, when adding it to the site CSS no change, when added to custom CSS, no change. It seems to be the correct statement, but nothing is happening. Any ideas?

.x-recent-posts-date {display: none}
span .x-recent-posts-date {display: none}

something like that…

#2

Hi There,

In CSS the more specific your selector is the stronger, the default selector that we use for recent posts element is .x-recent-posts .x-recent-posts-date (that is 2 class), compare to yours with one (.x-recent-posts-date), so the default styling is more likely to be honor than yours.

You need to make your selector to be more stronger so it can defeat the default styling.

Try using the default selector plus the class of the parent div (.x-column) which is the column.

That is:
.x-column .x-recent-posts .x-recent-posts-date

Learn more about CSS specificity here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

May the force be with you :slight_smile:

#3

That’s great advice, sorry to say I tried this level of specificity, as well as just coloring the background to see if I could ‘reach’ that content in that class. Somehow it just doesn’t work. Even with !important. I’m putting this in “additional CSS” is there a better place?

.x-column .x-recent-posts .x-recent-posts-date {display: none}

#4

Hi There,

Here’s the issue, you placed your custom CSS code inside a comment. Browsers wont read that, and your styling will be ignored.

			/*
You can add your own CSS here.

.x-column .x-recent-posts .x-recent-posts-date {display: none} 

Click the help icon above to learn more.
*/

I’d advice you put your custom CSS under X > Launch > Theme Options > CSS (https://prnt.sc/geytc8)

Cheers!

1 Like
#5

Ha! Rookie mistake! Thanks!

#6

You’re welcome.