Styling separator (horizontal rule)

  • Resolved VDPloeg

    (@vdploeg)


    4 years, 6 months ago

    Until this last update to Blocksy, the following CSS added to additional CSS would use the colour I wanted for the separator (horizontal rule):

    hr {
background-color: #8E9F8C;
}

    I added “color: #8E9F8C;” to it as well just in case, but it doesn’t work.

    When refreshing a page I see the separator with my colour for a second and then it disappears. Looks like it’s now using the same colour as the page background and that CSS is applying after my CSS.

    I can edit each instance of a separator and choose a colour and that shows up, but I have hundreds of separator instances.

    https://aeindex.org

    • This topic was modified 4 years, 6 months ago by VDPloeg.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author creativethemeshq

    (@creativethemeshq)

    Hello @vdploeg,
    As I can see you have some CSS that is rewriting your rule.
    This css comes from a cached file by Swift performance plugin.

    Please try to clear remove the caches from this plugin.

    Let me know if this helps.

    Thread Starter VDPloeg

    (@vdploeg)

    Thank you, clearing the cache repeatedly did fix the issue on pages for aeindex.org but not for posts.

    But I feel there’s an underlying issue I’m missing, as I have Blocksy on another of my sites, ebabble.net, with no caching plugin. Same CSS but a different colour.

    hr {
  color: #3996cd;
  background-color: #3996cd;
}

    HR shows in page source but doesn’t display on the page.

    • This reply was modified 4 years, 6 months ago by VDPloeg.
    Theme Author creativethemeshq

    (@creativethemeshq)

    Hi @vdploeg,

    1. Regarding your first website (aeindex.org)
    As I can see you still have an old CSS rule that rewrites your color, please see this video.

    Try to add this CSS instead:

    
hr.wp-block-separator {
  color: #3996cd !important;
  background-color: #3996cd !important;
}

    2. Regarding the ebabble.net website.
    As I can see the HR is displayed properly, please try to clear your browser cache and see if you will be able to see it.

    Let me know if this helps.

    Thread Starter VDPloeg

    (@vdploeg)

    Thank you! I applied that CSS to both sites (changing colours for each) and the horizontal rule is now showing on all pages and posts.

    Theme Author creativethemeshq

    (@creativethemeshq)

    Just curious, I was able to see the HR on your second website from the first try… were you able to see it without applying the CSS a gave you?

    Thread Starter VDPloeg

    (@vdploeg)

    On ebabble.net I have no caching plugin so I cleared the browser cache several times (Chrome) and then tried Firefox but HR still didn’t show. Adding your CSS fixed it.

    Theme Author creativethemeshq

    (@creativethemeshq)

    Hi @vdploeg, this is really strange because I was able to see the divider on ebabble.net, maybe you didn’t cleared your browser cache?

    Anyway, glad that the CSS code I gave you works fine ??

    Let us know if you have any other questions.

    Cheers.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Styling separator (horizontal rule)’ is closed to new replies.

Tags