Correct styling for block widgets
-
WordPress 5.8 introduced new block widgets, that Mantra does not style well. On my limited usage of primary widget area, I used the following custom CSS to fix two issues I discovered.
/* Make headlines look the same as .widget-title in the legacy widgets */ .widget-area h1, .widget-area h2, .widget-area h3, .widget-area h4, .widget-area h5, .widget-area h6 { color: #FFFFFF; background-color: #333333; width: 100%; width: calc( 100% + 2em ); padding: 6px 15px; border-radius: 15px 0 0 0; font-size: 1.1em; margin-bottom: -30px; /* compensate for widget margin */ } /* Apply the same style to recent comments block as RSS widgets uses */ .widget-area ul ol li { background: url(../mantra/resources/images/bullets/arrow_white.png) left calc( 2em / 2 - 4px ) no-repeat; margin: 5px 3px; display: block; float: none; width: auto; padding-left: 15px; line-height: 2; }
Note that this is not an extensive list of custom CSS that. It’s only what I added to one of my sites based on my specific usage of Mantra as a parent theme. There might be more tweaks needed depending on the widgets actually used.
- The topic ‘Correct styling for block widgets’ is closed to new replies.