Newbie needs help customizing column widths…
I’m in the process of trying to convert my site over to WordPress and have been able to figure out some of the things, but this has me bamboozled. I am trying to modify the Identification 3 column theme to my site and have come upon this problem. Here is the address of the temporary hosting of what I’ve been working on:
For some reason my central column where my main content will be is way down the bottom of the page and nothing I’ve tried in adjusting the CSS has been able to fix it or bring it up to the top where I beleive it should be. If anyone can throw any helpful suggestions for what I’m doing wrong or what I should look at it’d be much appreciated,
First, install Firefox and it’s free add on Web Developer. It will allow you to adjust the CSS right on the screen when you view your web page. It’s amazing.
Second, if you are intent on using the calendar in your left column sidebar then you must make the entire sidebar width be wide enough to encompass the calendar or it just looks strange. I changed the width to 160px but you can adjust it to what works best for you.
Just playing around with the content section:
margin: 15px 9px 24px 10px;
Got the center section into a good position, but this is not a fix, just a start. The whole width and positioning is totally borked on this and I recommend that you dig in and fix this or try another three column theme. Or start over and do little tweaks to accommodate it.
and thanks for taking the time to help!
I use Firefox as my browser, how would I get/use the Web Developer function?
I messed around with it not knowing what I was doing, just changing #’s trying to get the thing to fit and go where it should. Would you reccomend I scrap it and start over by reinstalling the theme? And if I run into the same problem again just get help before I bork things up again, huh!
Ok, I’ve decided to dump that theme for another theme I think will fit the content of the website better. But of course it’s only a 1 column. Doing my typical trying to solve it attitude I thought maybe it’d be as simple as copying and pasting sidebar.php from the Identification Tags theme that has 2 columns. I’m stopping here before I mess up any more. I’m thinking that there’s references in the style sheet to things in the sidebar.php file that it’s not finding, because it’s not creating a right hand sidebar.
What would I need to adjust in the style sheet to have it reference the 2 columned sidebar.php? Do I need to adjust/ add anything else to the style sheet to make it 2 columns? Did I just screw things up with this template and should reinstall the original file?
All my troubles so far with WordPress has come with sidebars/columns for some reason. I appreciate any help or point in the right direction and thanks for your time.
Please feel free to track my progress/status at:
In Firefox, click Tools, Extensions, Get More Extensions and then search for Web Developer tools.
From there, after installing and restarting Firefox, it will add a new tool bar. Click on the green puzzle piece while viewing your site and choose Edit CSS. Then find the different site architecture parts and pieces and make your changes and you will see them change instantly on the screen. Be sure and save or copy and paste your changes into your style sheet when you get it “just right”.
Modifying a theme isn’t easy. It takes a lot of knowledge about CSS. Check out the Codex for more help to walk you through this at:
If you just want to mess around with the .css you can download the Edit CSS plugin for firefox which is part of the developer’s package Lorelle mentioned. Here is a good screen shot of it in use. You can play with the .css file to your heart’s content because the plug in does not actually modify the file itself. But once you get it tweaked, you can copy the code and paste it into your .css file.
I’m getting there slowly, real slowly. I’m following a course online at w3schools.com
I’m getting so close to what I want though and ready to upgrade my site to WordPress, but I’m not there yet.
I can’t find in the CSS code anywhere where it makes my sidebars start below my content. If anyone has a couple of minutes and can help point a newbie in the right direction, what to look for, it would be much appreciated.
I’m using the Firefox web developer toolbar and it’s a fantastic help in seeing my changes instantly before I make them.
Thanks for your help!
I can’t find in the CSS code anywhere where it makes my sidebars start below my content
If I’m understanding the question, the CSS doesn’t call for the sidebar, except for the case of floats, widths, and margins.
<php? get_sidebar(); ?>is in your actual templates within the theme (home.php, index.php, etc).
If that is not what you are refering to them perhaps something more specific.
Is a good jumping off point for the nuances of templates.
I really don’t understand why nobody tells “newbies” that making a 1 column theme into a 3 column layout it’s much more than adding in the code an extra sidebar.php – or two. It will never work by just calling two sidebars into it.
If you want a 3 column layout, pick a stable one and modify the colors, fonts etc.
I took moshu’s suggestion and ran with it. I started from scratch yet again and after working hard all last night was able to transform the Fall-In-Love theme that I got from the codex here at wordpress.org and have the style and color scheme and layout I want.
I was really happy and excited that I’d finally done something and it looked good (to me) and was getting ready to transfer my site to WordPress tonight after adding all the content.
That’s when it hit me. I sent a link to a mate and he pulled it up in IE while I had always browsed it in Firefox. Well in Firefox it shows up exactly how I want it to but in IE the right menu/toolbar starts waaaaaaaayyyyy down the page.
Please if anyone has a hack or quick fix it would be very greatly appreciated because I’d rather not have to start from scratch yet again as it’s very very time consuming.
Thanks for the help.
Usually it happens because of one or more elements in that sidebar (or in the content area – which is not the case here!) are too wide compared to the width. It could be anything: an image, a long link, a calendar… Note that in IE the calendar table cell (
<td>) don’t inherit the font size of the page, they have to be defined.
I’d try to take out one by one the elements from the sidebar, to figure out which piece is guilty 🙂
- The topic ‘Newbie needs help customizing column widths…’ is closed to new replies.