Global CSS, Class & V2 Elements

Support
#1

In my Global CSS I’ve defined several classes e.g.:

.item_title {
font-family: “Open Sans”;
font-weight: 400;
color: #58595b;
font-size: 24px;
line-height: 28px;
margin-bottom: 12px;
}

.item_date {
font-family: “Open Sans”;
font-size: 16px;
font-weight: 700;
color: #58595b;
margin-top: 16px;
}

.item_body {
font-size: 15px;
text-align: left;
line-height: 22px;
color: #58595b;
margin-bottom: 0;
}

With Classic Elements like Classic Text I can use Class in the Inspector to set the style and that works fine. But when I select an V2 Element like Headline or Text and in Customize I select any of my defined classes in Class nothing happens. Bit lost how to make this work.

I tried

.item_title.x-text.x-text-headline

but that didn’t work and I’m also not quite sure why that should work.

Lennert

#2

Hello Lennert,

Possible reasons are either wrong selector or CSS priority.
For example, using v2 Headline, try this selector:

.item_title.x-text .x-text-content-text-primary {
font-family: "Open Sans";
font-weight: 400;
color: #58595b;
font-size: 24px;
line-height: 28px;
margin-bottom: 12px;
}

See this screencast: https://screencast-o-matic.com/watch/cqiDi4O3QK
For body see this: https://screencast-o-matic.com/watch/cqiDiAO3QW

.item_body.x-text {
    font-size: 15px;
    text-align: left; /*By default text is left. No need to define it as left again.*/
    line-height: 22px;
    color: #58595b;
    margin-bottom: 0;
}

The following might help:

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.