CSS question to modify template (move navigation bar) and add Badges/ Buttons

  • The website is FashionEngineers.com and I have the following questions:

    1) How do I check if the side bar is widget ready?
    What if it’s not, how to I know where in the CSS code to paste the Facebook, Twitter, Digg badges and buttons? Is there also a setting that can add the buttons to every post?

    2) There is a template for the right sidebar, but not for the left one.
    There are page templates with options for no comments, no date etc, but not for the main page- I have the other pages set without anything in the left side bar and I want to be able to remove the info in the left side bar from the first page and replace it with the badges. Where would I find the code?

    3)I edited style.css from
    #header_menu { float:right; display:inline; margin:20px 0 0 0; height:52px; background:url(img/header_menu_right.gif) no-repeat right top; }

    to
    #header_menu { float:right; display:inline; margin:30px 0 0 0; height:52px; background:url(img/header_menu_right.gif) no-repeat right top; }

    and updated and absolutely nothing happened! What did I do wrong? Do I need to edit this in other files too?

    If I slide the whole navigation bar under the name of the website, I’m hoping to fit a Links page and a Tutorials page- those should fit.

Viewing 5 replies - 1 through 5 (of 5 total)

  • k..
    1.) If your theme is widget ready, you should be able to go to (in your admin menu) Appearance -> widgets and be able to place widgets and see them appear

    1a.) If its not widget ready – MAKE IT. Click here for a tutorial

    2.) I dont really know what you mean here. Page templates? Like what you see when you are in the “create new page” page in the admin you have a drop down to choose your page template? Or something else.

    3.) You said nothing changed, but it did. I had a look in firefox and what you did was added a 10px to the margin to the top of your menu was 20px now 30px).. Not A LOT would change there, but it did change 10px. Sometimes when you make a CSS change and view your page you have to hold SHIFT while you refresh to clear the cache.

    Thread Starter fashionengineers

    (@fashionengineers)

    Thank you for replying. I see now that it slid down, but it doesn’t fit under the name. If I slide it more, it overlaps the rest of the site. How do I slide everything down?

    You want the text that says “Fashion Engineers.com” over the navigation bar?

    Then you need to change this :
    #logo {
    display:inline;
    float:left;
    margin:26px 0 0 5px;
    }

    To this:
    #logo {
    margin:26px 0 0 5px;
    text-align:center;
    }

    and this:
    #header_top {
    height:125px;
    }

    and this:
    #header_menu {
    background:url(“img/header_menu_right.gif”) no-repeat scroll right top transparent;
    display:inline;
    float:right;
    height:52px;
    margin:35px 0 0;
    }

    to this:
    #header_menu {
    background:url(“img/header_menu_right.gif”) no-repeat scroll right top transparent;
    float:right;
    height:52px;
    }

    If you want the header navigation area to span across the entire top, you can remove the “float:right” from the header_menu class

    Just realized I made a little mistake..

    I told you”
    and this:
    and this:
    #header_top {
    height:125px;
    }”

    but never told you want to change it to.. You actually dont need to change that.. so just leave it alone. You can make the height attribute taller i you want more space across the top total, but you dont need that to get the layout you want

    Thread Starter fashionengineers

    (@fashionengineers)

    Hi Lindsay, first of all, thank you for the help.

    I’m afraid I need some clarifying though. I did the first part of what you told me and it looked scambled.

    change this :
    #logo {
    display:inline;
    float:left;
    margin:26px 0 0 5px;
    }

    To this:
    #logo {
    margin:26px 0 0 5px;
    text-align:center;
    }

    The Logo was centered above the navigation bar (I would like it on the left side) and the navigation bar was overlapping the top of the black frame of the page. I pasted the original back and now the logo is where I would like it to be but the navigation bar is still ovelapping the top of the page.

    I did this in style.css. Am I in the right place?

    Thank you
    Elizabeth
    FashionEngineers.com

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS question to modify template (move navigation bar) and add Badges/ Buttons’ is closed to new replies.