[Resolved] Having issues with customizing blog and post layouts

[Ying]

Glad to hear that 🙂

[David Jiménez]

Hi, to close this topic, could you please help me to add some style for the categories list of the block editor, i want the list “2” have the style closest to “1” as you could see on the image above:

https://snipboard.io/r9gytc.jpg
Blog Link

[David]

Try adding this CSS:

.wp-block-categories-list {
    list-style: none;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
    font-size: 15px;
    font-weight: 500;
}

.wp-block-categories-list li a {
    padding: 5px 0;
    margin: 0 5px;
}

.wp-block-categories-list li a:hover {
    text-decoration: none;
    border-bottom: 2px solid var(--naranja-acentuar);
}

[David Jiménez]

Thanks, works perfect.

[David]

You’re welcome

[David Jiménez]

sorry, i fixed it. Thank you

[David]

Update the CSS to this:

.horizontal.wp-block-categories-list {
    list-style: none;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
    font-size: 15px;
    font-weight: 500;
}

.horizontal.wp-block-categories-list li a {
    padding: 5px 0;
    margin: 0 5px;
}

.horizontal.wp-block-categories-list li a:hover {
    text-decoration: none;
    border-bottom: 2px solid var(--naranja-acentuar);
}

Then select the Block you want to apply it to, and go to Advanced > Additional CSS Classes and add: horizontal

[David Jiménez]

thanks, for your help.

[David]

You’re welcome

[Author]

Posts