Horizontal separator (gutenberg) CSS issues

  • Resolved wordmax

    (@wordmax)


    2 years, 3 months ago

    The horizontal separator via Gutenberg adds the hr OK but there is no option to control the color or height of the hr in the block settings to the right (where you can choose default, wide, dots…) there should be settings to set the color and height of the horizontal separator there too, but there is not. Maybe it would be good idea to add a setting for default horizontal separator height/color in the > customize > general settings?

    Only way I could figure out to modify the hr was to add > customize > add custom CSS > enter .wp-block-separator class and add color:#eee; but still don’t know correct CSS value to set the height of the hr.

    Any thoughts? thanks

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

  • Hi @wordmax

    Hmm… to be honest I’m not entirely sure what I should be looking at. I have inserted a separator via Gutenberg on my end and the options that it has available are the exact same on Blocksy and on the new default 2022 theme.

    It does have a “background” colour option, that actually changes the colour of the separator and some “styles”, but no height options on any kind of theme.

    Check this screenshot for reference — https://ibb.co/ww6kvpm. These options are identical on both themes.

    Am I looking in the right place?

    Thanks!

    Hi @wordmax

    Just a kind reminder about this one. ?? Could you please check this on your end as well?

    Thanks!

    Thread Starter wordmax

    (@wordmax)

    Hi. Thx for reminder. Yes you are looking in the right place. The only option is background color but there is no way to change the thickness of the hr separator that I can see. The default hr thickness (height?) can be affected by css of line height px, border px, and background

    How to css for hr examples:
    https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html
    https://www.w3schools.com/tags/tag_hr.asp

    If the gutenberg background color option is changed to #eeeee the line becomes thinner. But if using any other color #xxxxxx the default line thickness is too wide for me. Would be nice to have settings in the theme settings > customize > general > hr where we could set default css appearance that would over-ride the gutenberg block default.

    Does this make sense to you?

    Hi @wordmax

    What I can say is that we have plans of offering a blocks library in the near future and we will most likely include a separator type of block, with more options included.

    I will, however, pass the information to our developers to see if they can do anything about improving this flow.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Horizontal separator (gutenberg) CSS issues’ is closed to new replies.