Solved

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

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

Expert Comment

by:Morgan Finley
Comment Utility
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 4

Expert Comment

by:Morgan Finley
Comment Utility
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 4

Accepted Solution

by:
Morgan Finley earned 500 total points
Comment Utility
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
Comment Utility
Thanks a ton Morgan.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery or CSS 9 37
reset email that plugins send alerts to 1 22
Mobile version of website does not react 6 49
Img not displaying 11 15
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

744 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

18 Experts available now in Live!

Get 1:1 Help Now