Way To Make Theme Overall Wider?

[akrause2112]

This theme has exceeded my expectations and I love it! My question does not have to do with function, which is perfect, however the only issue my client has is the overall width. We need to use the double sidebar layout and they are just too narrow.

Before I destroy this theme trying to figure it out myself, I would like to know if there is anything I can do to make the theme body areas wider as well as the sidebars without breaking the responsiveness of the theme. Header and Footer are fine as they are.

Let me know if there are any simple things I can change in the theme files to achieve this as it will save this project or if you would be willing to provide me any instructions to achieve this. I would like to see the double sidebars at least 200px – 250px wide and keep the content center the same which would push the overall body out both ways to keep it center.

Thank you!

Amanda

Topic

[Jason Bobich]

Hello,

This will be a CSS customization you’ll need to make to the theme. Although this will be a little easier in the next framework update (see here), right now to do exactly what you’re asking is going to be quite difficult. However, simply adjusting the overall width and letting everything inside adjust will be much easier.

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.

#top #branding .content {
	max-width: 940px;
}
#main .main-content,
#featured_below .featured_below-content,
#featured .featured-inner {
	max-width: 960px;
}
#colophon .footer_content,
#colophon #footer_sub_content,
#colophon .footer-below  {
	max-width: 920px;
}

Note: After doing this you may start noticing the theme’s image crop sizes are too small and you may need to finagle with that. — http://wordpress.org/extend/plugins/theme-blvd-image-sizes/

[akrause2112]

Thank you very much for this. I figured it was something like that and I did play with it in Firebug although it seemed to break the responsiveness. I will give it a shot and thank you!

[Jason Bobich]

As long as you’re using max-width and NOT width, it shouldn’t break your responsive layout.

[tdean]

This is great. Is there a way for me to make the left column stay the size it is and the main content to shrink (because the right col is bigger) and then the right column to be twice as big as the left column? Its basically the column sizes of the double left or right sidebar layouts but with the smaller column on the left and the larger column on the right.

Any help on how I can get this done would be greatly appreciated.

TW

[Jason Bobich]

@tdean

These columns are setup with percentages, and so when you make the overall layout wider everything is going to scale symmetrically. You’d have to adjust these column percentages within your custom CSS. You can find all of this at the top of /framework/frontend/assets/css/themeblvd.css under the comment “Sidebar Layouts” — Just copy what you need to change to your Child theme’s custom CSS file.

http://www.themeblvd.com/demo/barely-corporate/wp-content/themes/barelycorporate/framework/frontend/assets/css/themeblvd.css

For example for left and right sidebar layouts:

.sidebar_left #content, .sidebar_right #content { width:64.75%; }
.sidebar_left .fixed-sidebar, .sidebar_right .fixed-sidebar { width:31.25%; }

1% + 64.75% + 1% + 1% + 31.25% + 1% =  100%

[tdean]

Sweet. After reading more in your docs I tried this in my child theme fuctions.php file:

<?php
/*-------------------------------------------------------*/
/* Run Theme Blvd framework (required)
/*-------------------------------------------------------*/

require_once ( TEMPLATEPATH . '/framework/themeblvd.php' );

/*-------------------------------------------------------*/
/* Start Child Theme
/*-------------------------------------------------------*/

// Start the party ...

function my_sidebar_layouts( $layouts ){
     
    $layouts['double_sidebar']['columns'] = array(
        'content'   => 'span5',
        'left'      => 'span3',
        'right'     => 'span4'
    );
     
    return $layouts;
 
}
add_filter( 'themeblvd_sidebar_layouts', 'my_sidebar_layouts' );

// Add stylesheet - Level 4, will get added after EVERYTHING
themeblvd_add_stylesheet( 'custom_styles', get_stylesheet_directory_uri().'/assets/css/custom.css', 4 );

Why wouldn’t that work?

[tdean]

One more question about this. If you can answer the one above and this one I think I’ll have a really good understanding of how this is put together. My last question on this is…I’ve edited that css file you pointed me to like this for the double sidebar:

.double_sidebar #content { width:46.1%; }
.double_sidebar .sidebar_left .fixed-sidebar { width:16.65%; }
.double_sidebar .sidebar_right .fixed-sidebar { width:31.25%; }

It looks like it worked but now the right column widgets are still the smaller size. I can see there is room on the right of the right column for the right column to grow. How can I get those right column boxes to match that new column width?

Thank you very much for your time and this template, it rocks!

[Jason Bobich]

After reading more in your docs I tried this in my child theme fuctions.php file …
Why wouldn’t that work?

What you’re trying to incorporate with the Bootstrap columns is not supported until framework v2.2. Your theme currently has framework v2.1. So, the only way to modify this is with the CSS changes I pointed out previously.

Note: You can always see your framework version by looking at the bottom of your Theme Options page.

It looks like it worked but now the right column widgets are still the smaller size. I can see there is room on the right of the right column for the right column to grow. How can I get those right column boxes to match that new column width?

This CSS is not correct:

.double_sidebar #content { width:46.1%; }
.double_sidebar .sidebar_left .fixed-sidebar { width:16.65%; }
.double_sidebar .sidebar_right .fixed-sidebar { width:31.25%; }

You’re mixing up sidebar layouts. Look again at the CSS you’re copying from in themeblvd.css. What sidebar layout are you trying to target? Double Sidebar? Sidebar Right? or Sidebar Left?

[tdean]

Trying to target double sidebar. That is the default sidebar style I set. Again I want left to be 16.65%, content to be 46.1 and right to be 31.25. I think my math is right. Thank you so much this is one of the main things I can’t figure out. You cam email me if you want and I can send you the dev url.

I am a programmer so this shouldn’t be too hard for us to adjust. I just don’t have that much experience with Bootstrap or ThemeBlvd templates.

Take care,

TW

[Jason Bobich]

Ok, so the classes “sidebar_left” and “sidebar_right” are not the actual left and right sidebars. Those classes represent the overall sidebar layouts.

However, if you inspect the double sidebar layout in your browser, you can see there are some classes you can use — “left-sidebar” and “right-sidebar” — What you’re trying to do would look like this:

.double_sidebar #content { width:46.1%; }
.double_sidebar .left-sidebar { width:16.65%; }
.double_sidebar .right-sidebar { width:31.25%; }

[tdean]

Just awesome…..Best support I’ve ever seen with a template, and support site for that matter.

Thanks again,

TW

[Author]

Replies