This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Way To Make Theme Overall Wider?

  • Creator
    Topic
  • #408
    akrause2112
    Member

    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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Author
    Replies
  • #410
    Jason Bobich
    Keymaster

    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/

    #411
    akrause2112
    Member

    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!

    #412
    Jason Bobich
    Keymaster

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

    #7268
    tdean
    Participant

    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

    #7279
    Jason Bobich
    Keymaster

    @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%
    #7282
    tdean
    Participant

    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?

    #7284
    tdean
    Participant

    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!

    #7288
    Jason Bobich
    Keymaster

    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?

    #7294
    tdean
    Participant

    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

    #7297
    Jason Bobich
    Keymaster

    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%; }
    #7299
    tdean
    Participant

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

    Thanks again,

    TW

Viewing 11 replies - 1 through 11 (of 11 total)
  • The forum ‘Barely Corporate Responsive WordPress Theme’ is closed to new topics and replies.