Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Imbalance 2 CSS

  1. girlonasailboat
    Member

    I'm new to the CSS customization. I'm using the Imbalance 2 theme.

    I wanted to have a header with full width image, plus centered menu tabs below it.
    I was able to do this by using a text widget with the following code:

    <div style="width:960px;overflow:visible;position:relative;right:750px;top:3px;z-index:11;margin-bottom:-60px;">
    <img style="min-width:960px;" src="IMAGE URL HERE" alt="" />
    <div style="width:960px;text-align:center;margin-top:14px;">
    TAB NAME HERE
    </div>
    </div>

    And the result looks great.

    I tried to use CSS editor to accomplish the same thing but desired result was not the same. After spending all afternoon reading online guides, I got more confused. So I reverted going back to the text widget.

    Now I would like to do the following.

    1. Move the header section up a little further.

    2. Try to align the 'search' with the menu tabs.

    3. Attach a page to the specific menu tab (e.g. About me & Contact)

    My other question is: how does the code (widget) I use to create the menu tabs differ from creating custom menus?

    The online guides seem to be too general or just takes you in circles. I'm ready to pull my hair !

    p.s. - after using the CSS editor all afternoon, I have a whole list of revisions that I want to get rid of and keep the original style list that was part of the theme. How do I get rid/delete/remove the revisions from the list?

    The blog I need help with is thegirlonasailboat.wordpress.com.

  2. girlonasailboat
    Member

    Oh forget to my blog site address:

    http://thegirlonasailboat.wordpress.com/

  3. designsimply
    Staff

    1. Move the header section up a little further.

    In your case, the padding comes from a couple places. One is the #wrapper. You can get rid of the top padding on that element by setting it to zero like this:

    #wrapper {
  padding-top: 0;
}

    Try it out to see if that moves it up enough.

    I'll get to the other questions too. I'm just on and off here and there for the next little while. :)

  4. designsimply
    Staff

    Darn, I think that last answer was either for a different theme or you changed some things from the last time I opened your blog. I'll be back online again in a bit to check it out again. Maybe ignore that first reply in the mean time!

  5. designsimply
    Staff

    Okay, here we go again! :)

    1. Move the header section up a little further.
    2. Try to align the 'search' with the menu tabs.

    Give this a whirl. Moving the search widget down actually clears out some of the spacing above the header. This is based on what you've done already with your text widget:

    #header-right {
  position: relative;
}
#search-2 {
  position: absolute;
  top: 30px;
  right: 83px;
}

    To reduce the spacing above your text widget header even more, change top:3px to top:-15px (or whatever value you choose). Or if you want to override that value using CSS on the Appearance → Custom Design → CSS page, you can add this:

    #text-2 .textwidget div {
  top: -15px !important;
}

  6. designsimply
    Staff

    3. Attach a page to the specific menu tab (e.g. About me & Contact)

    Since you created the menu manually using html in a text widget, that's where you need to adjust the menu tabs. I see that 'About the Girl' points to http://thegirlonasailboat.wordpress.com/about-the-girl/ and so it looks like you figured out how to change the links.

    Because of they way you have setup the menus, there aren't any selectors to indicate what the current page is, so you won't be able to style those differently. You could do that ifs you switched back to the built in menu system though.

  7. designsimply
    Staff

    How do I get rid/delete/remove the revisions from the list?

    There is not a way to remove revisions from the revision list.

  8. designsimply
    Staff

    You know, one thing that might really help you would be to use the built in web inspector that comes with some browsers (try right-clicking a web page and choosing 'Inspect Element' if you see an option with that name). There are also extensions or add-ons you can download that will let you live edit CSS just for your browser session. One really good example is Firebug for Firefox. You should check it out. I think you'll really like it!

  9. girlonasailboat
    Member

    Thanks for your help. The changes you suggested did the trick.

    In regards to Firebug, I'm using Safari for Mac and am having problems downloading and installing it. Any suggestions?

  10. girlonasailboat
    Member

    Oh yeah....all the suggestions fixed everything except for the alignment of the search box.

    Anyway suggestions?

  11. timethief
    Member

    hello agin,
    My suggestion it to take note that Staff will not be available to assist you until Tuesday. I'm posting this so you can organize your time and life accordingly.

  12. girlonasailboat
    Member

    I'm aware of that the staff is out til Tuesday.

    Thanks

  13. designsimply
    Staff

    Thanks for your help. The changes you suggested did the trick.

    Yay!

    In regards to Firebug, I'm using Safari for Mac and am having problems downloading and installing it. Any suggestions?

    Oh noes, sorry I wasn't more clear! Firebug is only for Firefox.

    For Safari, there are some built in tools and you just have to turn them on from the Preferences → Advanced setting in Safari. I searched Google and found a tutorial that shows exactly how to turn it on and right-click elements to inspect them, check it out! http://www.youtube.com/watch?v=BUQaqn6DM4k

    The web inspector will knock your socks off. :)

  14. designsimply
    Staff

    Oh yeah....all the suggestions fixed everything except for the alignment of the search box.

    The code I posted earlier depended on the previous setup you were using, and you may have changed the setup. Also, in the #search-2 CSS code I provided earlier, I just picked out some values for top and right but they were just a guess about where you wanted to place the search box. I should have mentioned that you would need to adjust the top and right values to move the box to where you wanted it.

  15. designsimply
    Staff

    How do you feel about the updates you've made so far? I really like your header image. :)

    I noticed that created the top navigation menu links manually and you don't have corresponding pages created to make it so those links work. To fix that, you should add pages that match the links you entered. For example, create a page named "About the Girl" to make this link (which you added in your text widget) work: http://thegirlonasailboat.wordpress.com/about-the-girl/

    http://en.support.wordpress.com/pages/#video

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags