Creating different widths for primary sidebar and footer widgets

[Angelique]

I have the Modern Studio Pro theme.

How do I separately target the primary sidebar and the footers? I need the primary sidebar (which will be on most of my pages) at 35%, but I need footers 1 - 3 (on my full-width front page) at 28%. Right now the width code has been set here:

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar {
	width: 28%; 
}

I have Firebug; it cannot tell me what to do in this case.

I've tried targeting the sidebar separately, including trying .sidebar-primary and .widget-area, but I obviously have the wrong class selectors.

http://itsolutionsbycmit.com

[Brad Dalton]

The full width layout generates the following class you can view in the source code

.full-width-content

And the content sidebar layout generates

.content-sidebar

---

Tutorials for StudioPress Themes.

[Angelique]

Brad --

I'm afraid I still can't connect the dots, especially since I just realized that those footers aren't just showing up on my full-width page; they are also showing up at the bottom of ALL pages. (Fixing that is another problem.) In the meantime, I have tried many different ways of applying the selectors you suggested, and I still can't figure out how to change the primary sidebar to 35% while leaving the footer widgets at 28%.

[Brad Dalton]

You need to modify the content width by the same amount you modify the sidebar width. I suggest you test this first using Firebug or Chrome inspector before modifying the CSS in your style sheet.

http://www.studiopress.com/genesis/markup.php

The footer widgets is a separate question.

---

Tutorials for StudioPress Themes.

[Angelique]

Are you talking about the content width for the primary sidebar and footers (which are apparently also considered sidebars,) or the main .content selector for the two-column pages?

My primary content and primary sidebar widths were already set perfectly before I decided to try this footer-widget nonsense. The original code was:

.content {width: 48%; /* 446.40px *}

.full-width-content .content {float: none; margin-left: auto; margin-right: auto; width: 100%;}

.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar {width: 35%;}

Then I decided, hey! Let use those footer widgets. They'll be useful! But changing the percentage of the footer widgets so that three fit across the page ALSO changes the width of the primary sidebar (obviously; in the code above, they are all grouped together.) However, i don't seem to be able to separate them. When I try to set JUST the footer widgets to 28% (and making a new .sidebar section set at 35%,) the widgets no longer arrange themselves in columns; they are stacked on top of each other.

I don't mind making changes to my style sheet. The worst that can happen if you mess up is your site looks stupid for 5 seconds until you change it back. It's not like a .php mistake that can crash your site (which I have done many times to other sites!) And sometimes I need to leave the stupid stuff up so that you guys can see what's going wrong!

[Angelique]

In case anyone else is having the same problem, I found the answer: You have to specify the width for each individual footer widget. In the block of code containing the .sidebar and the three footer widgets, I set the width to 35%. Then I individually styled .footer-widgets-1, .footer-widgets-2, and footer-widgets-3 with a width of 28%.

[Author]

Posts