Game got switched. Pass the noobsauce plz?

November 11, 2009 9:04 AM

I suck at wordpress. Should I start over or can someone help me fix this?

I do a lot of hardware repair for side money here, and recently had an established customer ask me to do a site for her daughter. I thought it would be extremely simple, and it was. I did a typical wordpress install and modified the heck out of a template I found somewhere to make it match her colors/logo/etc. I don't usually do web work because it's not my strongsuit.

So I'm doing all this in a sandbox site (live, but not at her .com) and thinking its coming together fine. Top menu, 4 pages, nice gradient, etc. This was originally a right-side menu template, and I've taken all the right column out because it's unnecessary. (blogroll, rss, etc.)

Today I get a call that she loves all of it but she wants the menu down the left side. This was a right/top menu template. I'm in waaay over my head trying to figure out how to chop it up. I've looked at the css, and there's nothing in there that declares positions---only widths. I looked in the wordpress themes settings and there's no place to move the menu left. I've played around in the index moving the php calls to alternate locations and the page doesn't change (or doesn't change significantly.) Changing the sidebar.php to "left column" instead of "right column" puts the menu at the bottom of the body, because the body is the left column.

So I'm assuming the only real way to fix this is to figure out how to resize the columns and move the body to the right and the menu to the left...unless I'm overthinking it?

Happy to share the live-site address and assorted template files if anyone out there in mefi land is willing to take a peek. Otherwise I'll just start modifying a left-column template. Grrr.

posted by TomMelee to computers & internet (22 comments total)

Yeah, you're definitely going to have to share the site with us.

Any of us who do this for a living can probably Firebug it and see what's actually happening, and in the meantime, I'd suggest you install Firebug for Firefox.

It's a plugin that will allow you to analyze what styles are being applied to each and every element on the site, and determine which CSS file that style is coming from. You can also change the styles LIVE on the rendered page to make quick changes without altering the file on the server, just to see if simple tweaks will fix things. It's a bit of a trick at first, but it's an invaluable tool for this sort of debugging.

There's probably some div with a width or a float set somewhere that you're just not able to see no matter how hard you're staring at this. Firebug will show you EXACTLY what's being applied and will outline the elements so you can track down just which bastard is causing you trouble.


CSS-based layouts used to be an interminable nightmare as browsers' handling of DIVs were inconsistent and everyone mocks if you use the obsoleted, boring table for layout. DIVs still cause this pain, but Firebug shines light on the darkness. (In a pinch, hitting F12 in IE 8 will bring up their Developer Tools which sorta offer some of the same functionality, but not really.)
posted by disillusioned at 9:18 AM on November 11

It might not be in the CSS but the location of the bar in the php files (complimented by the css).

But I'd need to see it to be able to help you further. You're more then welcome to mefimail me.
posted by royalsong at 9:28 AM on November 11

It also may not be defined as positions, but via floated divs? Share the site and I'd love to blow off some time looking at it a little later.
posted by CharlesV42 at 9:49 AM on November 11

In the future you should start with a more flexible base, such as the sandbox theme, which has individual stylesheets for different basic configurations (column left, column right, etc.).
posted by shownomercy at 9:51 AM on November 11

Sorry, I had to run out. I realize it looks like I'm asking for help with something I'm making money to do on my own---I'm really not. This is mostly just a favor for an established client.

I do use firebug too, and I love it btw.

I'll share the site, I can throw up the hacked up template in a zip file too if ya'll want that.

You're gonna make fun of me because the site is the ugliness, so long as you understand that all text is placeholder and the menu as it exists is not intended to be the final product.

Non-live live site is here

Zipped up template file here

Really I want to learn this, not just have someone do it for me, so I'll definitely plan on putting right versions next to legacy versions side by side in notepad ++ and learning from my mistakes.
posted by TomMelee at 10:01 AM on November 11

Sorry to double. I love the words of advice so far--just not picking best's yet because I don't want people to ignore the thread. :)

I should say that I'm aware of the power of firebug, and have used it to pick apart the old template as I modified it, but my knowledge is limited enough that I can't inspect the left-side element (because there is no left side element, I think) to figure out what to do. I just figured out the change-in-browser editing capabilities of it the other day, which helped immensely.

This template has a million div's and that's likely the issue---I believe it's in the php and complimented by the CSS, but IDK.

And shownomercy, gosh I wish I knew about that before I started on this one! I'm definitely going to play with that theme. Thanks for that.
posted by TomMelee at 10:08 AM on November 11

I'll dig in more later, but it looks like there may be some odd commenting going on... And youre hiding the right column so we dont need to worry about that.

Try changing this:

#content #left-col {
width: 600px;
float: left;
position: relative;
padding-right: 30px;
}

to this

#content #left-col {
width: 600px;
float: right;
position: relative;
padding-right: 30px;
}

Essentially that means that instead of stacking objects as they appear like

A B C

it will stack them like

C B A

Thus, swapping the content and left-col divs.
posted by CharlesV42 at 10:36 AM on November 11

Hey, good thought. I coulda come up with that! It's hacky but it works. Changes now visible.

Any ideas about how to deal with the padding on the left there? That's a lot of dead screen space.
posted by TomMelee at 10:52 AM on November 11

CharlesV42 is right. That's what you need to do to get your sidebar moved from the right side to the left side.

to move the navigation out of the header and into the side bar.. look for the 'page-navigation' comments in the header.php. Cut the snippits of code between those comments. and paste it into the sidebar.php just under the "" line (It's near the top)
posted by royalsong at 11:09 AM on November 11

The padding between the menu and the left of the browser window? Probably a position absolute and padding left 10 px would fix that. If you change the size of the browser, the padding changes.

If its the padding between the menu and the content, just change the padding right of the menu and the padding left of the content to smaller numbers.
posted by gjc at 11:10 AM on November 11

Thanks again. Changing the position of the column to absolute and giving it 10px of padding left just scoots it 10px to the right. Something somewhere else is telling it where to start the column...

It's the same for the header too. If I could figure out how far over it is (pix), I'd just search for that value and change it. Can't find it though.
posted by TomMelee at 11:19 AM on November 11

Your problem lies here:

#content {
width: 960px;
float: left;
}

#content #left-col {
width: 600px;
float: left;
position: relative;
padding-left: 30px;
}

#content #right-col {
width: 330px;
margin-top: 20px;
float: left;
position: relative;
}

#content #right-col #sidebar {
width: 330px;
float: left;
position: relative;
}

Your "#content" div is both the sidebar and the plog posts. You see that it's being defined at 960px wide. You'll also note that "#content #right-col" and "#content #left-col" width's equal 930px wide. (with a 30px padding-left to equal 960).

you need to subtract pixels from the right-col and add them to the left-col. It should work.
posted by royalsong at 11:30 AM on November 11

Oh, and this is purely optional, the designer in me poking me in the side of my brain. Unless the customer has requested it this way, center the logo. It'll look better.

Change:

#header {
width: 960px;
height: 100px;
float: left;
}

to

#header {
width: 960px;
height: 100px;
align: center;
}
posted by royalsong at 11:36 AM on November 11

Royalsong--thanks for the follow ups, everyone else too.

Changing column widths still isn't doing it it. I got them to look better together, but there's still the gap on the left of the bar. Here's what it looks like now:

#content {
width: 960px;
float: left;
}

#content #left-col {
width: 700px;
float: right;
position: relative;
padding-right: 30px;
}

#content #right-col {
width: 230px;
margin-top: 20px;
float: left;
position: relative;
}

#content #right-col #sidebar {
width: 330px;
float: left;
position: relative;
}


This is probably something glaringly obvious that I don't see and you're explaining it clearly, it just eludes me this second. Thanks though.

And the logo's not done, and she wants it aligned left, although I'll probably align it with the menu....assuming I can figure out how.
posted by TomMelee at 11:39 AM on November 11

hehe, it's because you changed the padding! Get rid of the padding-right: 30px; in #content #left-col
posted by royalsong at 11:55 AM on November 11

Yes yes and for sure---but I think I misrepresented what I am saying.

The deadspace between the menu on the left and the content is fine now---what I dislike is the deadspace between the edge of the screen and the menu/header.
posted by TomMelee at 12:21 PM on November 11

Oh, I got it. That is odd because there should be no margins (there is none defined in the body or the content classes). Add this and see if that fixes it: padding-left: 0px;

As an alternative, try placing borders around different classes (border:2px solid red;) and see what it adds borders to. That should help you discover where the extra spaces are coming from (although, if it's the margin causing the issue - this won't help).
posted by royalsong at 12:42 PM on November 11

Is it something daft like the page width is set at 960 and so it's auto centering 960pix across the available screen space? It occurs to me that, for the first time in my life, I'm on a widescreen monitor.
posted by TomMelee at 12:52 PM on November 11

It shouldn't be, because the content and wrapper are all aligning it to the left. But it's possible I am missing something. Is it possible for you to upload another zip of the source files so I can play with it?
posted by royalsong at 12:55 PM on November 11

Hah what a noob. It looks fine on a normal screen. Gosh. What a dumb dumb. Throw rocks at me now plz.

I owe you each a beer. Because I feel bad about posting the links in the first place i'm going to ask a mod to delete them.

You guys rock. Thanks.
posted by TomMelee at 12:58 PM on November 11

It's no trouble! Not everyone can know everything, or askmefi wouldn't exsist!

Think of it as an opportunity to learn :)
posted by royalsong at 1:05 PM on November 11

[removed links at poster's request]
posted by jessamyn at 1:19 PM on November 11