?
Solved

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

Posted on 2015-01-19
4
Medium Priority
?
141 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 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

770 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