How to create colored sections across a page

[scrambler]

What is easier is a personal question, but none are complicated anyway.

You can try the div method  right away, Create a test page, switch the content editor to text mode, and put the following HTML in it.

<div class=”wvrx-fullwidth  mydiv” style=”background-color:grey;”> Add some content here like test images etc… </div>
<div class=”wvrx-fullwidth  mydiv” style=”background-color:yellow;”> Add some content here like test images etc… </div>
<div class=”wvrx-fullwidth  mydiv” style=”background-color:blue;”> Add some content here like test images etc… </div>

[Shama]

Thank you for all the details. I tried the div method and got it to work right away. 

Couple of questions:

1. Can I fine tune the colors with color codes? If so, how would the code look like then?

2. Does this method work only on full width layouts, or could I use it if I have a frame around the site like in this example:

http://thaihealingmassage.com/info/video/

3. If it only works with full width layouts, is it possible to specify that only certain pages use a full width layout, and other pages keep the frame as in the example site above. In other words, would I have to eliminate the frame on all pages, or can this be done on a page by page basis?

[scrambler]

1- of course, you can use any CSS hex code you want, or rgb value code. If you do not know the code, you can use any color option box in weaver admin to select a color and copy the code from there.

it will then look like   background-color:#445654;

2- If you do not want full width (browser edge to edge), then just remove the wvrx-full-width. In that case the div will only be 100% of the content area. Eventually it will need some tweaking as you may want to remove some right and left padding on the content area which can easily be done.

the code would look like

<div class=”mydiv” style=”background-color:grey;”> Add some content here like test images etc… </div>
<div class=”mydiv” style=”background-color:yellow;”> Add some content here like test images etc… </div>
<div class=”mydiv” style=”background-color:blue;”> Add some content here like test images etc… </div>

3- Not 100% sure I follow, but if you wanted only some pages to use true full width blocks, we could give you CSS to eliminate the frame on these pages

[Shama]

Fantastic! Much easier than I had thought at first with my limited coding skills. 

I played around with one test page and set up one full width section and one which is not full width. 

http://thaihealingmassage.com/info/test/

Is there a way to extend the yellow section right to the edge of the page border?

And what would the code be to eliminate the page border on this page only?

[scrambler]

You have a 5% right and left padding on the content area, as well as a 10px  right and left padding on the wrapper.

This could be removed globally with a zero in MAin Options > Content Areas > Content Area > PAdding Left and right boxes
and a zero in Main options > wrapping areas > Wrapper Area > Right and left padding boxes

Or, to only remove the paddings on that specific page, add the rule below in Main Options > Fonts & Custom > CUstom CSS Rule box

.page-id-2038 #content {padding-left:0;padding-right:0;}
.page-id-2038 #wrapper {padding-left:0;padding-right:0;}

You will probably want to add padding to the content of your colored div, using the mydiv class rule as I explained initially

For other pages, you can find the page id # on the page editing page

To remove the border and shadow, change the rules to

.page-id-2038 #content {padding-left:0;padding-right:0;}
.page-id-2038 #wrapper {padding-left:0;padding-right:0;border:none !important;-moz-box-shadow:none !important;-webkit-box-shadow:none !important;box-shadow:none !important;}

[Shama]

Great, I will play with these options. One more question – if I add all this code to Weaver Xtreme and wordpress, is there any possibility that any of it would get deleted with an update of either Weaver or wordpress?

[scrambler]

All options and Custom CSS are saved in the database, they are safe in any update.

That being said, I strongly advise to do two things every time you change your design

In Save / restore page, click Save to create a duplicate of the settings in the database that could be restored with the restore button.

Then below that click Download ALL settings to keep a local copy of all your settings in case of a problem

[Shama]

I ran into a little snag. I added some padding to my div (.mydiv {padding:20px 0px 1px 20px;width:100%;}. However this extends the colored section to the right, so now there is less margin on the right than on the left of the section. So now the colored section does not look properly centered anymore. How do I deal with this?

Here is the imbalanced effect: http://thaihealingmassage.com/info/test/

Another question: What code would make the corners of the colored content sections rounded? Something like on this page: http://www.thaihealingmassage.com/certification/

[scrambler]

Yes, my bad, you need to add another rule in mydiv so the width includes the padding,

.mydiv {padding:20px;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

For rounded corners, add   the CSS property below to that same rule

border-radius:20px;

You can find CSS rules in any CSS reference site like

http://webdevrefinery.com/forums/topic/6-just-starting-htmlcss/

https://developer.mozilla.org/en-US/docs/Web/HTML

https://developer.mozilla.org/en-US/docs/Web/CSS

[Author]

Posts