Change colour horizontal rule [hr_bold]

[aimeandalex]

I’m using the shortcode [hr_bold] and want to change the colour, I can’t find any documentation on this at all. I’ve tried [hr_bold color=”white”] but that did nothing.

Please could you advise how to change at the master level and individual HRs?

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.horizontal-break{
color:#fff !important;
}

Thanks
Mohammad

[aimeandalex]

Hi Mohammad, tanks for this, I’d like to change the colour of individual HRs too, e.g. I have some on dark background that would look better in white, and some on light background that would be better in colour. Is there a way to do this?

[Kyle – SUPPORT]

Hi

You will need to give the row an extra class then use this css:

.yourextraclass .horizontal-break{
color:#fff !important;
}

– Kyle

[Mohammad – SUPPORT]

Hi,
Please paste this code at functions.php of child theme.

if ( !function_exists('sf_horizontal_break_light') ) {
        function sf_horizontal_break_light( $atts, $content = null ) {
            return '<div class="horizontal-break light"> </div>';
        }
        add_shortcode( "hr_light", "sf_horizontal_break_light" );
    }

if ( !function_exists('sf_horizontal_break_dark') ) {
        function sf_horizontal_break_bold( $atts, $content = null ) {
            return '<div class="horizontal-break dark"> </div>';
        }
        add_shortcode( "hr_dark", "sf_horizontal_break_dark" );
    }

Now paste this code at custom css code area.

.horizontal-break.light{
color:#fff !important;
}
.horizontal-break.dark{
color:#000 !important;
}

Use hr_dark for dark and hr_light for light.
Thanks
Mohammad

[aimeandalex]

I’ve followed the instructions and the shortcode is displaying [hr_light] / [hr_dark], please could you advise?

[aimeandalex]

My developer fixed it using this code:

if (!function_exists('sf_horizontal_break_light') ) {
function sf_horizontal_break_light( $atts, $content = null ) {
return '<div class="horizontal-break light"> </div>';
}
add_shortcode('hr_light', 'sf_horizontal_break_light');
}

if (!function_exists('sf_horizontal_break_dark') ) {
function sf_horizontal_break_dark( $atts, $content = null ) {
return '<div class="horizontal-break dark"> </div>';
}
add_shortcode('hr_dark', 'sf_horizontal_break_dark');
}

But the breaks don’t look the same as the original bold ones (see screen shots)

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this code:-

if (!function_exists('sf_horizontal_break_light') ) {
function sf_horizontal_break_light( $atts, $content = null ) {
return '<div class="horizontal-break bold light"> </div>';
}
add_shortcode('hr_light', 'sf_horizontal_break_light');
}

if (!function_exists('sf_horizontal_break_dark') ) {
function sf_horizontal_break_dark( $atts, $content = null ) {
return '<div class="horizontal-break bold dark"> </div>';
}
add_shortcode('hr_dark', 'sf_horizontal_break_dark');
}

Thanks
Mohammad