different background coloured sections in debut theme page

Highlighted
Tourist
10 0 2

hey!

im trying to get the different sections on a specfic page on my site (which has its own page.liquid template) to have different coloured backgrounds, to help the viewer easily see where each section changes, like in this site (made in squarespace).

in this thread someone got it working in shopify.

so i used the code suggested in that thread:

#pagesection1 {background-color: blue;}

and then put the appropriate div in the body where I want it, the problem what that was that the page content is already subject to other div's that restrict the width, so the background-color doesnt go all the way to the edge of the page like it should. and when I remove these other div's the other styles obviously also get removed, which i want to keep (such as font colour and margins). 

so my questoins is: how do i get different div sections to be different background-colors (that go 100% of the page width) while still maintaining all the other formatting consistent with the rest of the site?

thanks in advance.

0 Likes
Highlighted
Tourist
17 0 1

I have this same exact question! Anyone?

0 Likes
Highlighted
Tourist
17 0 1

Benjamin, did you find a fix?

0 Likes
Highlighted
Shopify Expert
2684 67 755

Hi Ben,

your page now consists of many divs like this one

<div style="background-color: transparent;" class="hypervisual__content-block hypervisual__content-block--image   hypervisual__image-valign-top hypervisual__image-align-center">

Just replace the style="background-color: transparent;" with style="background-color: lightblue;"  or whatever you want it to be and you're done. It is, however, strange that you were unable to do it in Hypervisual... 

Garret, your question can not be answered without seeing your shop, knowing your theme, and particular pages you want to color.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
17 0 1

Tim,

I am using the debut theme. 

ALso, unsure of the exact color I want but I can change that easily later when i figure out where to put code or what code to use. Essentially, starting with the 3rd section (100% Natural Products) on the page, I would like that section to have a different color along with the 5th section (Discover the wonderful benefit...)

shop is healthynaturalsleep.com

0 Likes
Highlighted
Shopify Expert
2684 67 755

Now it's easier to answer:

1. Find out the id of the section. The easiest is to right-click just above the section heading and select "inspect element" On the newly opened pane of your browser you will see something:

<div id="shopify-section-1482208935804" class="shopify-section index-section">

Now you can add the rule like this to the bottom of your theme.scss.liquid  Asset usind the id from the above line:

div#shopify-section-1482208935804 {
    background-color: lightcyan;
}

You should enter a rule like this for every section you want to have different color.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
5 Likes
Highlighted
Tourist
17 0 1

Tim, 

THANK YOU!

You sir are amazing. Thank you so much. Such an easy fix! I have been trying to add similar things to the section template. This is MUCH BETTER than you so so so much.

 

Garrett

0 Likes
Highlighted
New Member
11 0 0

Thanks. this really helped. Once I changed colors in sections I faced that I needed to change the font colors in those sections. anyone could help me  to solve this?

0 Likes
Highlighted
Shopify Expert
2684 67 755

Hélio,

this could be more difficult. Obvious first step is to modify the code above to include  color:

div#shopify-section-1482208935804 {
    background-color: lightcyan;
    color: red;
}

but some elements may have explicitly defined color, so this would probably not work for all section content.

The next easy step is to try to modify the selector to target the children of the section element:

div#shopify-section-1482208935804 * {
    color: red;
}

If this does not fix the problem, then some individual approach is required.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
9 0 2

Tim, I know this is an old post but I have the same question. I'd like to put a solid color from edge to edge on my footer, no white spaces, I tried following the instructions here but I guess I did something wrong. I'm using the Simple theme. Can you help?  

0 Likes