Support » Themes and Templates » Changing Sidebar Width in Modularity Lite

  • Oops… I put this as a response to a similar thread earlier, but it would have been better to put it here, I guess. I’m afraid this is not brief, but it is as descriptive as I know how to be. And yes, I’ve looked all over for the solution, but have none that are in a language I understand.

    This is my first time (now second) posting here, so please forgive my lack of knowledge. Here’s my site so far, in case it matters: It’s functioning well so far, but I’d love to solve just this one issue.

    I’ve been searching all over trying to figure out how to change the size of the sidebar in Modularity Lite, and have seen many posts including this one. But none of them have helped me. Right now I’m using the full-width option without a sidebar because the sidebar takes up so much space that there’s no room for my images. Since my website will be for selling art prints, I really need space for the images. However, I find there’s something “missing” by not having a sidebar. I’d like to have one, just skinnier. It seems weird to me to have that wide of a sidebar on a theme that’s meant for visual stuff. Still, I love the theme in every other way, so I’m not complaining… much.

    I do not have a page in editor called “screen.css”. I have style.css of course, and supposedly I’m to put this code:

    .span-7 { width: 650px; }
    .span-15 { width: 590px; }

    Presumably I get to specify how many pixels wide each field is. But where exactly does the code go? Is there a line somewhere in style.css within which I paste the code? Or do I just drop it anywhere on the page, pinch my nose and dive in? I’m horribly inept at code-language and really need someone to tell me exactly where to put these things.

    Okay, that’s a really long question for what I’m sure is a very simple issue. But simple or not, it has perplexed me for many hours, so I’m finally reaching out 🙂

    Thanks in advance!

Viewing 15 replies - 1 through 15 (of 17 total)
  • In these sort of themes you shouldn’t touch css files but modify the php files. This theme is divided in 24 columns of equal width, the element width is controlled by expressions like this:
    <div class="span-24">
    If you want to change the width, modify that span-some-number-here part. For example, you can set your main column to span-20 and your sidebar to span-4, and the sidebar will be 5 times smaller then the main column.

    Thanks, zmv. I think I understand that. Getting to those PHP files shouldn’t be a problem. Locating the line of code you’re referring to and making the change could get interesting….

    So I’ll go fiddle with that and we’ll see what comes of it. I’ll post back as soon as I either break it or make it beautiful, whatever comes first.

    Just a quick question, though. When you say “in these sorts of themes”, what do you mean by that? Knowing that might help me in choosing my next theme, so I’ll choose something that looks familiar. I paid for a “premium” theme that I haven’t touched yet because it reads like a foreign language to me.

    Thanks again!

    When you say “in these sorts of themes”, what do you mean by that?

    I mean the themes that use ‘the grid system’, with these span-24 things. They are very few of them.


    Well, I’m really trying but just not getting this. I got sidetracked and fiddled with the Atahualpa theme a bit, but found it too complex despite its awesomeness, so I’m back here.

    I think I understand what you’re saying about a grid system. So I went to edit in PHP.

    Under Page Template (page.php) there’s this line:

    <div class=”span-<?php modularity_sidebar_class(); ?>”>

    Nothing in there indicating size of the main column.

    Under Sidebar (sidebar.php)there’s this line:

    <div class=”span-8 last”>

    If my math is correct, that indicates that the sidebar takes up 1/3 of the total space on my page. (8 out of 24 columns=1/3). So…. I’m going to try changing that number to “3” in order to make the sidebar 1/8th of the total page width, although I don’t appear to have access to the same parameters on the remaining columns of the page. What worries me is that I’ll end up with “dead” columns, if that makes any sense, because I haven’t told the web or whatever brain controls this thing where to put the remaining content.

    So basically I have no idea what I’m doing, but I’m going to do it anyway.

    We’ll see if the whole thing blows up now…

    Under Sidebar, I changed:

    <div class=”span-8 last”>


    <div class=”span-3 last”>

    and that did nothing.

    Then I changed:

    <div class=”span-3 last”>


    <div class=”span-3″>

    and still nothing.

    So I’m guessing I need to figure out where to change the span of the remaining columns? Any ideas?

    Thank you again, so much. It’s great to talk to a real human.

    I just visited your site and couldn’t find any changes to the code. Please make changes to the site so that I could see them.

    Okay, will do that now. I had removed the sidebar again because it was squishing all my other content.

    PS, the site is, not In case you ended up in the wrong place 🙂

    Your sidebar is there, but it’s empty. You probably should add some widgets to it in the admin area. The width of the main column is currently span-15 which is a bit too small. How did you do that?
    By the way you can use Firebug to examine your web page, it’s a great tool!

    I just added the Pages widget to see what it would look like. I didn’t make any changes to the main column, because I can’t find the files to makes changes to. Under Page template (page.php), the only line indicating anything that might be width is this line:

    <div class=”span-<?php modularity_sidebar_class(); ?>”>

    I tried replacing the above line with this one:

    <div class=”span-21″>

    but all that did was hide the sidebar completely.

    I’ll look into that Firebug thing. I did inspect my site using the Firefox Web Developer tool, but there’s nothing on there indicating column width, or span, either. At least not that I can see.

    I bet web designers read these forums just to laugh at noobs like me. As soon as I make a sale, the first thing I’m doing is paying for help, lol.

    Try to find a way to change the main content width in Modularity options.
    If you can’t go to the file functions.php and find the line

    if ( $options['sidebar'] == 1 ) {
        echo "15 colborder home";

    This line must be the culprit. Try changing 15 to some other number and see what happens.

    In functions.php, I found this line:

    $content_width = 950; // pixels

    I’ll try changing it, but seems to me that 950 is already plenty wide, so I’m not sure…


    $content_width = 950; // pixels


    $content_width = 1200; // pixels

    but nothing changed, so I switched it back.

    I’m about to give up and just figure on not having a sidebar for a while… sigh… Or maybe I’ll have to go theme shopping again.

    Thanks so much for all your help zmv. I’m going to press Pause on this issue for now though, and shop around in a few other themes. If I don’t find something marvelous, I’ll definitely give this theme another go – because it really is a nice one.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Changing Sidebar Width in Modularity Lite’ is closed to new replies.