Site logo

[Support request] Colors for h1 in WP Show Posts

Home Forums Support [Support request] Colors for h1 in WP Show Posts

Home Forums Support Colors for h1 in WP Show Posts

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #2485825
    Kristi

    Right now, the h1s in my header WP Show Posts list is white, but the h1s in all the other lists on my homepage is blue. I want to change the blue, but when I tried the code I found in another support ticket, it also changes the white titles in the first list (which I don’t want to change). Here’s what I tried that changed everything:

    .wp-show-posts-single .wp-show-posts-entry-title a {
    color: #f00;
    }

    Related, I want to change the hover color for just those blue h1s as well.

    #2485843
    David
    Staff
    Customer Support

    Hi there,

    try this:

    #page .wp-show-posts-single .wp-show-posts-entry-title a {
        color: #f00;
    }
    #page .wp-show-posts-single .wp-show-posts-entry-title a:hover {
        color: #0f0;
    }
    
    
    #2485855
    Kristi

    That worked!

    One other color override I’m having an issue with is my link color in posts/pages. I put it in the customizer and it looks good, but then it reverts back to blue on the live page. I’m sure this is something in Dispatch in the Additional CSS, but I can’t figure it out.

    #2486088
    David
    Staff
    Customer Support

    Not seeing any styles being applied to the links.
    In Customizr > Colors -> Content what do you have set their for the link color ?

    #2486112
    Kristi

    I have it set for #179bb0 (teal), but it’s a bright blue color instead. When I change it in the customizer, it changes in the preview. However, it doesn’t ever change on the live site. I’ve tried purging site cache. After I change it and then reload the customizer, it’s gone again and has reverted to the black and white pattern that I assume is some sort of default.

    #2486121
    David
    Staff
    Customer Support

    Are you using a child theme on the site ? Or are there any custom functions in code snippets ?

    #2486123
    Kristi

    I just added a child theme this morning, but I was having this problem before doing that.

    The only custom things I know of are that I’m using the Dispatch demo.

    #2486131
    David
    Staff
    Customer Support

    when in the Customizer, are the changes be Published or Saved as Draft?

    #2486132
    Kristi

    Published – I had already double-checked that.

    #2486280
    Kristi

    Also, what we did earlier with the h1 color change ended up not being a good color for one format of WP Show Posts. Is there a way to control the color of the h1 on a list-by-list basis with WP Show Posts?

    #2486493
    Ying
    Staff
    Customer Support

    Is there a way to control the color of the h1 on a list-by-list basis with WP Show Posts?

    The CSS needs to be modified based on WP show posts id.

    #2486870
    Kristi

    Could you give me an example of what that would look like?

    For example, I have a list named “Simple” with a shortcode of [wp_show_posts id=”9732″].

    #2487104
    David
    Staff
    Customer Support

    Heres an example of that CSS:

    
    #page #wpsp-9732 .wp-show-posts-single .wp-show-posts-entry-title a {
        color: #f00;
    }
    #page #wpsp-9732 .wp-show-posts-single .wp-show-posts-entry-title a:hover {
        color: #0f0;
    }
    

    In both rules you see: #wpsp-9732 that is the ID of the WP Show Posts

    #2487174
    Kristi

    That did exactly what I needed! Thank you!

    Last question on this…can I add a gradient behind the h1 for just one of the WP Show Posts lists to make it easier to read?

    #2487186
    David
    Staff
    Customer Support

    You can add it like so:

    
    #page #wpsp-9732 .wp-show-posts-single .wp-show-posts-entry-title a {
        color: #f00;
        background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
    }
    #page #wpsp-9732 .wp-show-posts-single .wp-show-posts-entry-title a:hover {
        color: #0f0;
    }

    And this site you can use to generate the linear-gradient

    https://cssgradient.io

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