Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 2, 2014 at 12:04 pm #344837
    Aefiel

    Hi, I’d like to know how to change the background color for one element (e.g. text box) but full width and height. Currently I know it can be adjusted through the settings on VC>design options but it turns out as a colored block with uncolored margins, not full width/height. (see linked image: http://www.easierprint.com.sg/wp-content/uploads/2014/11/Screenshot.png)

    Also, is there any way to change page background color for only certain pages on the site? I tried the CSS on enfold styling but it changes the bg color for all pages. Unfortunately I am not very familiar with CSS :(

    Appreciate any help given! Thanks!

    November 2, 2014 at 7:26 pm #344955
    Elliott

    Hi Aefiel!

    You can do that with the color section element. I went ahead and added it in with the advanced layout editor so you can see how it’s done. To do it on other pages just drag the color section over and select which color you want to use.

    Best regards,
    Elliott

    May 17, 2015 at 1:24 am #445329
    friendlier

    Hi Elliott,

    This is useful; however, advanced layer sliders can’t be contained in color sections. Can you suggest another fix, please..?

    • This reply was modified 8 years, 11 months ago by friendlier.
    May 18, 2015 at 6:10 pm #445918
    Elliott

    Hey!

    Go ahead and send us a link to your page and take a screenshot highlighting what your trying to do so we can get a better idea.

    Best regards,
    Elliott

    May 18, 2015 at 6:23 pm #445931
    friendlier

    Hi Elliott,

    I used:-

    #top.page-id-34 .main_color, .main_color .site-background {
    background-color: white! important;
    }

    the first part of the CSS #top.page-id-34 restricts it to the landing page

    I’ve sent you a link to the site so you can check it out for yourself ;-)

    best

    Simon

    May 19, 2015 at 2:08 pm #446409
    friendlier

    Hi!

    However, I’m going seriously wrong when I try to apply to ore than one page

    #top.page-id-2 , .page-id-34 .main_color, .main_color .site-background {
    background-color: white! important;
    }
    http://www.calmyoga.fr/ (id 34)
    http://www.calmyoga.fr/en (id 2)

    and it’s driving me nuts. Please help!

    May 20, 2015 at 8:29 am #446977
    Rikard

    Hey!

    Please try the following:

    .page-id-2 .main_color {
background-color:#ddd !important;
}

    You might have to remove your other CSS for it to work.

    Best regards,
    Rikard

    May 20, 2015 at 4:51 pm #447264
    friendlier

    Hi – I need both pages; ID-34 and ID-32 to have that css. So what I’m confused about is how to list them with commas.

    Thanks

    best

    Simon

    May 20, 2015 at 4:53 pm #447269
    Yigit

    Hey!

    Please use the code as following 

    .page-id-32 .main_color,.page-id-34 .main_color {
background-color:#ddd !important;
}

    Best regards,
    Yigit

    May 20, 2015 at 5:08 pm #447291
    friendlier

    Perfect – thanks for the quick reply!!!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Change background color per element – full width’ is closed to new replies.