Horizontal rules Issues

  • Resolved waldirb

    (@waldirb)


    6 months, 2 weeks ago

    Hello,

    I am tring to use a horizontal rule using bootstrap as stated here, however, there is css coming from this plugin that conflicts with this, when using the WordPress “Separator block” which contains the class wp-block-separator, the plugin adds the following styles which make the style of the hr invisible. 

    .wp-block-separator {
	border-top: none !important;
	border-bottom: none !important;
}

    Any way around this? What is the reason for the above style? Thanks in advanced!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Miles

    (@areoimiles)

    Hi @waldirb

    Thank you for flagging this. So, these styles were required when the plugin was initially built with Bootstrap 5.0.2. In this version of Bootstrap they didn’t use border top, instead they used background colour for the <hr>. These styles were needed to override the default styles applied by WordPress on the Separator block and make sure the Bootstrap styles worked as intended.

    In later versions of Bootstrap they introduced a border to the top of the <hr>. Unfortunately, to make sure that this works for people still using Bootstrap 5.0.2, I can’t remove these styles entirely. However, I have released an update where I have removed !important from each style to make it possible to apply the border top via the Additional CSS classes field.

    Because WordPress adds default styles to the separator block, the Bootstrap borer style will be overridden by default as these styles are added after the Bootstrap CSS. To resolve this you can select the Separator block and in the settings panel go to Advanced and then include border-top within the Additional CSS Classes field. This approach will override the default WordPress styling as well as override the default All Bootstrap Blocks styling that is in place for v5.0.2.

    I hope this all makes sense and helps you resolve your issue. However, if it does not please don’t hesitate to get back in touch.

    Thanks
    Miles

    Thread Starter waldirb

    (@waldirb)

    This is a great fix, thank you, Miles!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Horizontal rules Issues’ is closed to new replies.