WordPress.org

Ready to get started?Download WordPress

Forums

Newbie needs help customizing column widths... (12 posts)

  1. HackWrestling
    Member
    Posted 9 years ago #

    G'day,
    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:
    http://giveme.jaxee.com
    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,
    Thanks!

  2. Lorelle
    Member
    Posted 9 years ago #

    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:

    #content {
    float: left;
    width: 50%;
    margin: 15px 9px 24px 10px;
    overflow: hidden;
    text-align: left;
    }

    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.

  3. HackWrestling
    Member
    Posted 9 years ago #

    G'day Lorelle,
    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!
    Thanks!

  4. HackWrestling
    Member
    Posted 9 years ago #

    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:
    http://giveme.jaxee.com

  5. Lorelle
    Member
    Posted 9 years ago #

    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:

    http://codex.wordpress.org/Using_Themes
    http://codex.wordpress.org/WordPress_Lessons#Designing_Your_WordPress_Site
    http://codex.wordpress.org/Finding_Your_CSS_Styles
    http://codex.wordpress.org/Theme_Development
    http://codex.wordpress.org/Blog_Design_and_Layout

  6. DavidDeCristoforo
    Member
    Posted 9 years ago #

    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.

    DD

  7. HackWrestling
    Member
    Posted 9 years ago #

    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!

  8. HackWrestling
    Member
    Posted 9 years ago #

    bump

  9. Michael Bishop

    Posted 9 years ago #


    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.

    The <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.
    http://codex.wordpress.org/Templates
    Is a good jumping off point for the nuances of templates.

  10. moshu
    Member
    Posted 9 years ago #

    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.

  11. HackWrestling
    Member
    Posted 9 years ago #

    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.
    http://giveme.jaxee.com

    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.

  12. moshu
    Member
    Posted 9 years ago #

    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 :)

Topic Closed

This topic has been closed to new replies.

About this Topic