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

    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

    #118643

    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.

    #118644

    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?

    #118645

    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?

    #118646

    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

    #118647

    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?

    #118648

    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

    #118649

    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.

    #118650

    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

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

The topic ‘Content Elements Background Color’ is closed to new replies.