[Resolved] Can I distinguish sticky Post title with different color?

[Thomas]

I have some sticky post, I would like to highlight it on the home page, before 3.0, I just modify css file:
.sticky {
background-color:#ededed;
border:1 px solid #f5f5f5;
color:#272727;
}

it works great, the new 3.0 seems change it, and it no longer works that way, could you please help me with that?

[David]

Hi there,

can you share a link to your site so i can see the issue

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

https://www.victoriasummer.ca

I make all sticky post on the front page, first a few lines.

[Elvin]

Hi,

Can you temporarily disable any caching and CDN so we could check the cause of this?

Your site is currently using a cached stylesheet from https://secureservercdn.net/104.238.68.196/i0r.fcb.myftpupload.com/wp-content/cache/wpo-minify/1606638476/assets/wpo-minify-header-be8628b1.min.css?time=1606676017 which is overriding the background-color you’ve set on your CSS code:

Also, your border property’s value has to be fixed. border:1 px solid #f5f5f5; has a space between 1 and px that has to be removed. Use this instead: border:1px solid #f5f5f5;

A wise man once said:
"Have you cleared your cache?"

[Brooke.]

Looks like you’ll want to use .sticky .inside-article instead of just .sticky (or use !important 😬 ). This is because you have the following rule further down in your stack setting the background on the .inside-article to white overriding that of the outer .sticky container.

separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header {
    background-color: #fff;
}

[Thomas]

Brooke,

Thank you so much.

// Make the sticky color grey, to outstanding
.sticky .inside-article {
background-color: #edededed;
}

Works great!

Thomas

[Elvin]

Hi @Brooke,

Thank you for sharing. Great find!

Yeah the use of !important isn’t best practice. More specific CSS selector to get precedence is the way to go.

@Thomas,

Nice one! Glad it works for you. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts