Adjusting widths of content and sidebars

[jahuron]

Thanks again for your help with the category issue before. I have one other question for you. I’ve tried to add several widgets to the 2 sidebars, but the widgets don’t seem to fit in (or correctly in) the widget box. How would I go about widening the left/right sidebars?

Thanks in advance for any help you can offer, Jason!

Josh

Topic

[Jason Bobich]

This would be a CSS customization you’d need to make to the theme, which my be a bit complicated. You can see all of the framework’s sidebar layout column width CSS at the top of /framework/frontend/assets/css/themeblvd.css, if you want to copy any to your Child theme’s CSS to modify.

========

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[jahuron]

Thanks very much for your reply. I was able to find the code, and look through it You’re right, this is a little complicated. Here is the link to the code you mentioned for the sidebars: http://tinypic.com/r/2a76fdh/5

If you have a little time, would you mind pointing me in the right direction to widen my 2 sidebars?

Thanks, Jason!

Josh

[Jason Bobich]

So, what sidebar layout are you changing?

[jahuron]

I’m talking about the two sidebars on either side of the article posts in the middle column. The website is http://www.inroadpress.com. I’d like the left sidebar to align with the left hand side of the Auto category on the primary menu and the right sidebar to align with the right hand side of the Blog category. I may have to play with the width a bit after I insert the widgets I want, but if I know how to configure the width, I can play with it on my own.

Really, REALLY appreciate your help. : )

Josh

[Jason Bobich]

I’m talking about the two sidebars on either side of the article posts in the middle column.

So we call this the “Double Sidebar” layout and we reference within the sidebar layout CSS with the class selector .double_sidebar.

This corresponds to this CSS within themeblvd.css and is what you’re actually copying to change:

.double_sidebar #content { width: 60.7%; }
.double_sidebar .fixed-sidebar { width: 16.65%; }

You’re adjusting the widths here so everything adds up to 100% when all this comes together:

1% | 16.65% | 1% | 1% | 60.7% | 1% | 1% | 16.65% | 1%

Essentially, you’ve got three columns with 1% gutters on both side of each, which account for 6% of the added percentages. And so one main content column and the two sidebars should add up to 94%.

16.65% + 60.7% + 16.65% = 94%

========

Note: Starting with Swagger 2.0 with Theme Blvd framework 2.3, this will be the standard way to change sidebar widths, using the Bootstrap grid system: http://dev.themeblvd.com/tutorial/sidebar-layouts/#widths

[Jason Bobich]

I’ve split this into its own topic.

[Author]

Replies