Solved

CSS - Sidebar's background color, full width (wordpress)

Posted on 2015-01-19
4
139 Views
Last Modified: 2015-01-20
Hi,

I'm trying to change background color of the sidebar. I was able to find the class that controls this, however I cannot get the background to extend to the full width of the sidebar, it's only as wide as the content.

URL: http://7pwc.moshpitdigital.com

Any help appreciated!

Example of what I'm trying to achieve:
Screen-Shot-2015-01-19-at-3.47.26-PM.png
0
Comment
Question by:doug s
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 3

Expert Comment

by:Morgan Finley
ID: 40558887
Are you talking about the sidabar on the right side of an internal page? I can't quite see what you're talking about.
0
 
LVL 3

Expert Comment

by:Morgan Finley
ID: 40558923
You will have to use the faux-columns technique for this. Basically it uses an image (or two, as in your case) that repeat vertically to give the illusion of having two columns.

I say you will need two images because one will be the textured background of the main content, and the other will be a slice to overlay that background.

I'll get back to you with a code example.
0
 
LVL 3

Accepted Solution

by:
Morgan Finley earned 500 total points
ID: 40559088
Here goes, and this takes a few steps:

First make sure that the pages with the sidebar have some kind of identifying class or id to differentiate them from the other pages with different layouts (no sidebar).

Second, make sure there are multiple containers wrapped around the main content column (at least two). If this is a WordPress site, there should at least be a couple when you include he loop and page wrapper. The HTML should go something like this:

...
<div id="main-outer">

<div id="main-inner">

</div>

</div>
...

Open in new window


Third, apply the background images to the containers. In your given layout, you have a repeating square tile for the main background and you will have another for the sidebar background. I'm assuming this for the moment, but if that isn't the case I'll get to that next, it's just a matter of how you sliced the images and plan for them to repeat across the page. Your CSS should be similar to this:

...
#main-outer {
background:  #ffffff url(someTilingPaperPattern.jpg) top left;
/* that sets the repeating paper pattern on the outer wrapper */
#main-inner {
background: #ffffff url(transparentSidebarBG.png) repeat-y top right;
/* this sets our transparent sidebar image to repeat vertically.
...

Open in new window


The idea here is that you have assigned a background to a container which stretches the entire length of the page (or main content, whatever you're calling it) instead of repeating it behind just the sidebar. The sidebar background will be a slice in the dimensions of your entire page container, with fully transparent pixels spanning the width of the content column, and semi-transparent pixels on the right side in the width of your sidebar. I hope this is making sense still.

You have to use this two-image method because the sidebar in your design lets some of the background show through. If that wasn't the case, you could find a way to make a single slice that has both of your backgrounds, and then repeat it vertically across a single container.

I hope all of that made sense.
0
 
LVL 4

Author Comment

by:doug s
ID: 40561035
Thanks a ton Morgan.
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question