Archived topic
Can I distinguish sticky Post title with different color?
6 replies · Started by Thomas on November 28, 2020
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?
Hi there,
can you share a link to your site so i can see the issue
I make all sticky post on the front page, first a few lines.
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;
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;
}
Brooke,
Thank you so much.
// Make the sticky color grey, to outstanding
.sticky .inside-article {
background-color: #edededed;
}
Works great!
Thomas
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. :)
