Solved

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

Posted on 2015-01-19
4
136 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The viewer will learn how to dynamically set the form action using jQuery.

911 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now