Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #27670

    Hello. I’m working with Enfold and I’m trying to color code some sections at least partly through the colors (primary and highlight colors) of Avia Layout Builder Content Elements, such as horizontal rulers, icon boxes, etc.

    Currently, it appears these colors are tied to a single source for the entire theme – the Enfold Theme Options styling area for Main Content. I’m pretty sure that can be over-ridden through the quick css, but is there any way to override it to assign different colors/values for different individual sections within a page? The different sections I’m building are currently broken out as separate color sections in a one-page layout.

    Thanks again for the help!



    Hi Omar,

    You can use the color sections unique ID field to get each a custom ID to then target with css.

    For example:

    #top #customcolorsection .av-special-heading h3 { color: red; }

    Which will target the color sections special heading h3 and make it red.




    Thanks Devin,

    Cool, that helps, but can you also tell me what specific css tags/bits of code I’d have to use to target Border Color, Primary Color, and Highlight Color?

    The Border Color, which seems to determine the color of Horizontal Rulers, was actually my biggest concern. I was trying to figure it out by inspecting the code and looking through the forum but have had no luck. Text I can modify via the text and/or visual editor in individual text boxes, dropped in as content elements.

    I thought I saw something about the Horizontal Ruler color being tied to a png file somewhere in the Forums, but I believe that was for another theme. Again, I’m working with Enfold.




    Hi Omar,

    If you can provide a link to the page and point out the section and items specifically we can assist with the css.




    Hi Devin,

    Cool, that’d be great… everything is kind of a work in progress right now, so try to ignore the mess, but if you go to under the “About Me” section labeled #aboutme there’s the horizontal ruler line beneath “– A LITTLE BIT ABOUT ME –” as well as the line immediately above the “Hello” beneath that.

    In the “– PROFESSIONAL EXPERIENCE & TRAINING –” section higher up, which I’ve labeled #resume , there’s the line beneath the section header, just above the word “My Resume” as well as all the horizontal lines below that..

    Under the “– GET IN TOUCH –” section, labeled #contact , I was considering changing everything that’s blue to the red I use above… so the line under get in touch, the icons in the icons boxes, the line underneath the contact boxes, and anything blue in the contact form.

    For that contact form in that section, I also wanted to be able to change the over color from orange to something else… not sure what yet though.

    I hope that’s not too much work, and thanks ahead of time



    one last thing… would it be possible to change the outline color around the box housing the “Download resume” button and it’s accompanying blurb/caption?



    First, add this to your functions.php:


    This will give you a new field on all your advanced layout editor elements. For each element you want to customize you can just give it a class and then add some css to effect that class specifically.

    So for the hr element you could add the class name of or-custom-hr . Then add this css to your Quick CSS:

    #top or-custom-hr-gray{
    border-color: #333;

    (I’m adding or to the start of the class for your initials to make sure there is no possible overlap of css names on accident).

    Then repeat for each element you want to edit/specifically customize.


    I tried this and it’s not working for some reason. I got the class field to appear, and I’ve assigned a name to a specific horizontal ruler, and called it out in the quick css along with the ID of the color section it’s in, just as you’ve advised.

    Here’s what I’ve tried, for instance:

    #portfolio or-custom-hr-red{

    border-color: #d81919;


    with the class name of:


    for a horizontal ruler in a color section with the ID of:


    Any idea why that may not be working?



    Try forcing it with:

    #portfolio or-custom-hr-red{
    border-color: #d81919 !important;

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Custom Colors for Content Elements, Primary and Highlight Colors – Color Coding’ is closed to new replies.