[Resolved] How I can create category title like on this page?

[Anonymous]

Hello,

I am looking to do on my post listing for category name to appear like the web bellow, if you scroll a bit down you will see category Planes, Estilo, etc and placing category name inside a blue line, how can I achieve that for my website?

Thanks!

Sara

[Leo]

Hi there,

It’s using HTML structure with CSS like this:
https://www.screencast.com/t/6ocM2re8B8

If you right-click on the element and use the browser inspection tool then you can copy exactly what they’ve done.

[Anonymous]

Ok and where I place this code in additional CSS? is only css code?

[Leo]

Yup additional CSS should work.

[Anonymous]

What is the name of the CSS ID or Class I need to place this code bellow:

font-family: Oswald,Sans-serif;
font-size: 1.5rem;
line-height: 1.4;
display: inline-flex;
position: relative;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
width: 100%;

Is this code correct or do I need to add any more code? what about line color?

[Leo]

That’s not the code I’m showing the screenshot here:
https://www.screencast.com/t/6ocM2re8B8

Again if you right-click on the element and use the browser inspection tool then you can copy exactly what they’ve done.

The selector depends on what you are adding it to.

Can you link me to your current set up?

[Anonymous]

I just placed my website link in textbox on first post, can you tell me where I should place code you show on screenshot? Thanks!

[Leo]

Which title are you trying to add the line?

The <h1> Bienvenid@s a nuestra página para amantes de la belleza! ?

CSS can be added using one of these methods:
Adding CSS: https://docs.generatepress.com/article/adding-css/

[Anonymous]

Hello Leo,

I am trying to add the line and style to the h2 ones which are “Ultimo en Cabello” and “Ultimo en Salud”.

[David]

Hi there,

try adding this CSS:

.ruled-heading {
    display: grid;
    grid-template-columns: 40px auto 1fr;
    align-items: center;
}
.ruled-heading:before,
.ruled-heading:after {
    content: '';
    display: block;
    height: 4px;
    width: calc(100% - 15px);
    background-color: #00F;
}
.ruled-heading:after {
    justify-self: end;
}

Then you will need to give the H2 element a CSS class of ruled-heading

[Anonymous]

Does not seem to be working David, Where is that style showing? Because I am using WP Show Posts to list posts and title is coming from h2 text.

Thanks!

[David]

edit the Heading in you the text editor it will look like this:

<h2>Ultimo en Cabello</h2>

change it to:

<h2 class="ruled-heading">Ultimo en Cabello</h2>

[Anonymous]

Perfect David Thank you!

[David]

You’re welcome

[Author]

Posts