http://impexvending.com.au/contact-us/
The added CSS is having an affect in all areas, not just the desired ones?
NOTE: This issue only happens when the elements are in the color section, when done out of the color section they are okay. I am using the Custom Css Class inside the element that I would like the change to happen but it is not happening in all elements inside the color section?
How do I fix this?
Thanks!!
Here is what has been done so far:
Added to functions.php:
add_theme_support(‘avia_template_builder_custom_css’);
Added to Quick CSS:
#av_section_1 .av-special-heading {
background-color: #3892CE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-top: 10px;
}
#av_section_1 .avia_textblock {
background-color: #3892CE;
padding: 10px;
color: #FFF !important;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#av_section_1 .avia-image-container.avia-align-center {
margin: 0 auto;
}
.shaded-box.avia_textblock {
background-color: #3892CE;
padding: 10px;
}
Hey Micheal0424!
#av_section_1 is the default ID that gets allocated to the first color section within a layout.
You need to override this ID by entering a new ID(without the #) in the ID settings for the color section:
Use this ID instead of the default #av_section_1 in the custom CSS e.g
This code:
#av_section_1 .av-special-heading {
background-color: #3892CE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-top: 10px;
}
becomes
#THE_ID_YOU_ENTERED_IN_ID_SETTING .av-special-heading {
background-color: #3892CE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-top: 10px;
}
Cheers!
Arvish
Worked perfectly, I was placing the code in the wrong place before.
Thank you for clearing that up, your screen shots help A LOT !!