-
Posts
-
Hi there,
Ive successfully created font changes by using a p.tag but im struggling to make a class work within the page builder shortcode like the colour section.
I want to create a dedicated 50px height header for all my pages (not home) with a blue background, 20px padding at the top and to have my font size to be 3.5em. The font is Bebas Neue which ive already installed and had working.
Ive tried all sorts to get this working but it just gets ignored and nothing happens. Any example to show me how i should be setting up a class for your shortcodes in the builder would be helpful
cheers
Andy
Hi Andy,
You could try using the ‘special heading’ shortcode and style it the way you want with CSS:
.av-special-heading-h3{
background: blue;
font-size: 3.5em;
color: white;
padding-top: 20px;
padding-bottom: 0;
}
.av-special-heading-h3 h3{
font-size: inherit !important;
color: inherit !important;
}
.av-special-heading-h3 .special-heading-border{
display: none;
}
I tested locally and achieved something like this:
Regards,
Josue
Hi there,
thanks for this although is it not possible for me to style any section the way I want using the new class attributes? In other questions there has been reference to generating a unique class name (say in the color section) then in CSS I could attribute standard styles like font, color, padding etc. which im assuming I could apply anywhere providing I had put the Class ID in the special section class ID field.
This seemed simpler and more obvious than me trying to work out the specific unique elements for all the key components throughout the site…. eg. Special Header.
Also…. if I create a unique ID name like ‘special-header’ why do I need a unique one font h3 and special border? Cant they be encompassed within the overall special-header? What am I missing here?
Cheers
Andy
Hi Andy,
If you have the custom class field turned on for your elements then you can do the same as Josue showed above but targeted at your custom class name. Eg:
#top .my-custom-blue-header .av-special-heading-h3{
background: blue;
font-size: 3.5em;
color: white;
padding-top: 20px;
padding-bottom: 0;
}
#top .my-custom-blue-header .av-special-heading-h3 h3{
font-size: inherit !important;
color: inherit !important;
}
#top .my-custom-blue-header .av-special-heading-h3 .special-heading-border{
display: none;
}and if you find a specific declaration (property+value) isn’t taking effect then you can use !important to force it since it will only ever effect your specific class name.
Regards,
Devin
- The topic ‘Class creation within a page builder element’ is closed to new replies.