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

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

Home Forums Support Can I distinguish sticky Post title with different color?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1555843
    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?

    #1556218
    David
    Staff
    Customer Support

    Hi there,

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

    #1556973
    Thomas

    https://www.victoriasummer.ca

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

    #1557109
    Elvin
    Staff
    Customer Support

    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?"

    #1557135
    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;
    }
    
    #1557178
    Thomas

    Brooke,

    Thank you so much.

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

    Works great!

    Thomas

    #1557190
    Elvin
    Staff
    Customer Support

    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?"

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.