Wrap each section in a div. Give each div a class. Add classes with background colors to your style sheet.
If you just want to color every other section, wrap each section in a div and then wrap all the divs in a wrapper div. Then give that div a class such as “my_sections”, and add a :nth-child pseudo-class to your style sheet.
for example, in the style sheet
div.my_sections:nth-child(odd) { background-color:#eee; }
I would like to know if there is a way to set the responsive menu to not be transparent. When using phone or Tablet the menu appears transparent and the page beneath shows through which for me is not desirable. Other than that it’s a great theme. Love how responsive it is…..
http://uplc.us
Thanks Geotonics for your response.
I am new to coding but I will give your solution a try. If you are able to look at my page/code and copy and paste an example of what it should look like… I want to create a div for the 3 main header questions… here is the code:
<div id="main-wrapper" class="container">
<div class="container" role="main">
<div class="row column-content-wrapper">
<div id="content" class="span12 article-container tc-gallery-style">
<article id="page-5" class="row-fluid post-5 page type-page status-publish hentry hover">
<div class="entry-content">
<h1 style="text-align: center;"><span style="color: #000000;">ARE YOU TIRED OF YOUR BANNERS NOT GETTING <span style="color: #ff0000;">CLICKS</span>?</span></h1>
<h1 style="text-align: center;"><span style="color: #000000;">ARE YOU LOOKING FOR ADS THAT <span style="color: #ff0000;">CONVERT BETTER</span>?</span></h1>
<h1 style="text-align: center;"><span style="color: #000000;">DO YOU WANT MORE <span style="color: #ff0000;">TRAFFIC</span>?</span></h1>
Rivenmaster,
Create a new thread for your question. This one is about creating div wrapper around a page’s section to change the background color.
Wrap them in a div, give the div a class, add background color to that class in your style sheet.
<div class="header_section">
<h1 style="text-align: center;"><span style="color: #000000;">ARE YOU TIRED OF YOUR BANNERS NOT GETTING <span style="color: #ff0000;">CLICKS</span>?</span></h1>
<h1 style="text-align: center;"><span style="color: #000000;">ARE YOU LOOKING FOR ADS THAT <span style="color: #ff0000;">CONVERT BETTER</span>?</span></h1>
<h1 style="text-align: center;"><span style="color: #000000;">DO YOU WANT MORE <span style="color: #ff0000;">TRAFFIC</span>?</span></h1>
</div>
Then put this in your stylesheet
.header_section{
background:blue;
}
Thanks Geotonics, definitely made it more clear on where to put everything. Unfortunately your solution doesn’t extend the background full-width.
Is there something to input into the background code which was placed in the style sheet in order to make it full-width?
It seems the entire code may have to be re-done since the entire front page content was already in a div wrapper, within a div wrapper, etc… ???
Thanks so much for your time and help, I’ve already learned a lot.
you can wrap divs inside divs, that is not a problem. The wrapper you created is filling the space that its in. If you want that area to be full width you have to change the layout of the page.
Go to the admin -> appearance customize -> front page->set the front page layout and choose “no sidebars – full width layout”.
That should do it.
It is already set to full width layout.
I think it is because the other divs inside the main-wrapper div are restricted in size. When I inspect the elements, the div inside the 1st main-wrapper div is not full width.
Like I said, I am very green when it comes to coding. I will continue to try to tweak the divs and wrappers to see if I can get the correct result.
Thanks for the help Geotonics.
If have firebug and you inspect on the various containers you will see that one of them has a class .container with a width of 1170px. Find the original line in your style sheets and it looks like this
.container, .navbar-fixed-bottom .container, .navbar-fixed-top .container, .navbar-static-top .container, .span12 {
width: 1170px;
}
Don’t change that, but this tells you what exactly to override. In your theme, or child theme, put this into your style sheet
.container, .navbar-fixed-bottom .container, .navbar-fixed-top .container, .navbar-static-top .container, .span12 {
width: 100%;
}
That did it! Thanks so much for walking me through the steps. I learned a lot from your help. Much appreciated!
