Class not working with headline

Hello,
I’ve made a class who works fine with a text element but not with a headline element.
Why and how to make the class fully working with headline element ?

Hello @Lyser,

Thanks for writing in!

The text element and the headline element have a different structure.
r3-OKdQUTGqZG4VhMsNiUw

The text element displays the text immediately without a wrapper while the headline element requires you to assign a headling element.

Text Element:

Headline Element:

If you want your CSS code to be applied to all the elements inside the class you will have to use the * selector. For example;

.titrebuild,
.titrebuild * {
    font-family: 'oswald' !important;
    font-weight: 300 !important;
    font-size: 35px !important;
    color: #fff !important;
    line-height: 1.2em !important;
}

To learn more about the CSS selectors, please check this out:

Ah perfect, i had the same problem with v2 butons, but not anymore ! =)
Thx you ruenel !

Glad we could help, Cheers!

Hello,
When i try this * technic to have total control with a class to a v2 button with image background it’s not working, image is shifted and font is not centered anymore)
What im i doing wrong ?

.bouton250,
.bouton250 * {
background-image: url(https://mywebsite/wp-content/uploads/2020/05/bouton250.png);
font-family:'blinker';
width: 250px;
height: 48px;
border-radius: 0px !important;
color:rgb(255, 179, 116)!important;
}

.bouton250:hover,
.bouton250:hover * {
background-position:0 -48px;
color:#fff !important;
}

Hello @Lyser,

Your custom CSS will not work on the v2 elements because of CSS Specificity. Keep in mind that using * will apply the same code to the rest of the child elements of the button. This means that you will not get the correct and expected result. Use only the * if you want to apply general or inherited attributes. What you have in mind does not work. What will only work is this:

.bouton250{
	background-image: url(https://mywebsite/wp-content/uploads/2020/05/bouton250.png);
	font-family:'blinker';
	width: 250px;
	height: 48px;
	border-radius: 0px !important;
	color:rgb(255, 179, 116)!important;
}

.bouton250:hover{
	background-position:0 -48px;
	color:#fff !important;
}

To learn more about the CSS * selector, please check this out:

Hope this helps.

Ok thx for the links, so is there a way for css to be written to have a higher specificity for all the css lines to be working with v2 buttons, or some v2 button class css customisations are simply not possibles ? (font-family, text color or color on hover are not working here and adding !important change nothing)

.bouton250{
background-image: url(https://mywebsite/wp-content/uploads/2020/05/bouton250.png); /*ok*/
font-family:'blinker' !important;  /*not working*/
width: 250px; : /*ok*/
height: 48px; /*ok*/
border-radius: 0px !important; /*ok*/
color:rgb(255, 179, 116) !important; /*not working*/
}

.bouton250:hover{
background-position:0 -48px; /*ok*/
color:#fff !important; /*not working*/
}

Hello @Lyser,

For the color and the font-family CSS property, please use the element settings:
iXks-4-oSZ2UBNk73LSXcA

Though using the custom CSS to set a font-family may seem correct, it will still not work because the font file will not be loaded. You have to use the font manager to properly load the fonts.

If you still want to use the *, you can only use it in setting a color provided that you add !important in it. You must separate it though.

.bouton250:hover{
   background-position:0 -48px;
}

.bouton250:hover *{
    color:#fff !important; 
}

Best Regards.

Ok i see. Having a class who works directly without using elements settings is better i think and i just found out that with classic button, every line of css works well, so i’ll use thoses v1 buttons instead now.

Thx for all theses explanations @ruenel, awesome support. :+1:

You’re welcome, @Lyser.

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