Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 11, 2013 at 2:06 pm #23133
    tocal

    I’d like to put a background colour on some of my content elements that aren’t full width (like a 1/4 width email form) is this possible and, if so, how?

    Thanks

    May 11, 2013 at 3:09 pm #118643
    Dude

    Yes you can do this but tbh it will probably look weird. However insert following code into the quick css field:

    .post-entry-734 .av_one_fourth{
    
background: #333;
    
}

    Replace the background color value and the page id (734 – use your contact form page id instead). If you just want to style one column use:

    .post-entry-734 .av_one_fourth:nth-child(2){
    
background: #333;
    
}

    This code would just apply the bg color to the secons column, with :nth-child(3) you can style the third column, etc.

    May 11, 2013 at 8:22 pm #118644
    tocal

    Thanks but that doesn’t seem to do anything (maybe I’m missing something). All I really want to do is to ‘highlight’ forms on some pages like I have done with the text area above the form here: : http://symbioticmarketing.co.uk/pages/services/social-media

    Is that possible?

    May 12, 2013 at 11:49 am #118645
    tocal

    I’ve tweaked the CSS for the forms like so and it has done the trick:

    fieldset{
    
border:none;
    
padding:20px 20px 20px 20px;
    
background-color:#bdd3ee;
    
}

    The only thing I would like to be able to do is have the ability to have some forms styled this way and some that are as the theme dictates. Is that something I’m able to do?

    May 13, 2013 at 12:23 am #118646
    Ismael

    Hi,

    Yes, you can target a specific page. Inspect the page then look for the body class. Example should be like this

    .page-id-1411 fieldset{
    
border:none;
    
padding:20px 20px 20px 20px;
    
background-color:#bdd3ee;
    
}

    That is the unique page id of your Services page. The style above will only be applied on the Services page’s fieldset alone.

    Regards,

    Ismael

    May 22, 2013 at 12:47 pm #118647
    tocal

    Perfect Ismael, thanks. If I have two forms on the same page how do I style them differently using the Custom CSS? e.g. could I have one with a white background and one with a blue?

    May 23, 2013 at 12:28 pm #118648
    Devin

    Hi tocal,

    You would need to inspect the code for each of the forms and use the class specific to each to target them individually. If you have two on a page we can take a look.

    Regards,

    Devin

    May 23, 2013 at 1:29 pm #118649
    tocal

    Sure. I’ve got one set up here: http://symbioticmarketing.co.uk/pages/services/search-engine-optimisation/

    I’d like to put the 2/3 width form just on a white background.

    May 24, 2013 at 2:15 am #118650
    Ismael

    Hi,

    Just add this on your custom.css

    .ajax_form.avia-builder-el-5.el_after_av_textblock.avia-builder-el-last fieldset {
    
background-color: white !important;
    
}
    

    
#avia_e-mail_1 {
    
border-color: gray !important;
    
}

    Regards,

    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Content Elements Background Color’ is closed to new replies.