Changing Sidebar Width in Modularity Lite

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.

Okay…

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”>

to:

<div class=”span-3 last”>

and that did nothing.

Then I changed:

<div class=”span-3 last”>

to:

<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 minitopia.com 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 mimitopia.com, not minitopia.com. 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…

Changed

$content_width = 950; // pixels

to

$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.