Title: Styling separator (horizontal rule)
Last modified: August 28, 2020

---

# Styling separator (horizontal rule)

 *  Resolved [VDPloeg](https://wordpress.org/support/users/vdploeg/)
 * (@vdploeg)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/styling-separator-horizontal-rule/)
 * 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](https://aeindex.org)
    -  This topic was modified 5 years, 8 months ago by [VDPloeg](https://wordpress.org/support/users/vdploeg/).

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Theme Author [Creative Themes](https://wordpress.org/support/users/creativethemeshq/)
 * (@creativethemeshq)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/styling-separator-horizontal-rule/#post-13336981)
 * Hello [@vdploeg](https://wordpress.org/support/users/vdploeg/),
    As I can see
   you have some CSS that is [rewriting](https://d.pr/v/K7Wcb9) 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.
    -  This reply was modified 5 years, 8 months ago by [Creative Themes](https://wordpress.org/support/users/creativethemeshq/).
 *  Thread Starter [VDPloeg](https://wordpress.org/support/users/vdploeg/)
 * (@vdploeg)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/styling-separator-horizontal-rule/#post-13338745)
 * 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 5 years, 8 months ago by [VDPloeg](https://wordpress.org/support/users/vdploeg/).
 *  Theme Author [Creative Themes](https://wordpress.org/support/users/creativethemeshq/)
 * (@creativethemeshq)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/styling-separator-horizontal-rule/#post-13339574)
 * Hi [@vdploeg](https://wordpress.org/support/users/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](https://d.pr/v/btoBB7).
 * 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](https://d.pr/v/KVZC1L),
   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](https://wordpress.org/support/users/vdploeg/)
 * (@vdploeg)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/styling-separator-horizontal-rule/#post-13339951)
 * 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 [Creative Themes](https://wordpress.org/support/users/creativethemeshq/)
 * (@creativethemeshq)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/styling-separator-horizontal-rule/#post-13339976)
 * Just curious, I was able to see the HR on your [second website](https://d.pr/v/KVZC1L)
   from the first try… were you able to see it without applying the CSS a gave you?
 *  Thread Starter [VDPloeg](https://wordpress.org/support/users/vdploeg/)
 * (@vdploeg)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/styling-separator-horizontal-rule/#post-13340165)
 * 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 [Creative Themes](https://wordpress.org/support/users/creativethemeshq/)
 * (@creativethemeshq)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/styling-separator-horizontal-rule/#post-13345918)
 * Hi [@vdploeg](https://wordpress.org/support/users/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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/blocksy/2.1.41/screenshot.jpg)
 * Blocksy
 * [Support Threads](https://wordpress.org/support/theme/blocksy/)
 * [Active Topics](https://wordpress.org/support/theme/blocksy/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/blocksy/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/blocksy/reviews/)

## Tags

 * [separator](https://wordpress.org/support/topic-tag/separator/)

 * 7 replies
 * 2 participants
 * Last reply from: [Creative Themes](https://wordpress.org/support/users/creativethemeshq/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/styling-separator-horizontal-rule/#post-13345918)
 * Status: resolved