Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 13, 2013 at 2:09 am #27670
    ramirezo

    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!

    -Omar

    August 14, 2013 at 12:39 am #134931
    Devin

    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.

    Regards,

    Devin

    August 16, 2013 at 6:22 am #134932
    ramirezo

    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.

    Thanks!

    Omar

    August 19, 2013 at 1:33 pm #134933
    Devin

    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.

    Regards,

    Devin

    August 19, 2013 at 11:56 pm #134934
    ramirezo

    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 http://omarramirez.net/cms/ 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

    Omar

    August 20, 2013 at 12:00 am #134935
    ramirezo

    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?

    thanks

    August 22, 2013 at 1:21 am #134936
    Devin

    First, add this to your functions.php:

    add_theme_support('avia_template_builder_custom_css');

    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.

    August 24, 2013 at 10:14 am #134937
    ramirezo

    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:

    or-custom-hr-red

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

    portfolio

    Any idea why that may not be working?

    Thanks

    August 25, 2013 at 3:11 pm #134938
    Devin

    Try forcing it with:

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

  • Author
    Posts
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.