• 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.

    • This topic was modified 3 years, 8 months ago by Michal Stanke. Reason: fix markdown
  • The topic ‘Correct styling for block widgets’ is closed to new replies.