Customizing my heading with Enterprise Theme

  • Author
    Posts
  • #481914

    awesomenyc
    Member

    Just fyi, to avoid the confusion, I managed to show the faces now. Here is the new code:

    #header {
    background:#fff;
    clear:both;
    height:120px;
    }

    .header-left {
    background:#fff url(‘http://awesomedc.files.wordpress.com/2010/05/logo-for-fb-183.jpg’) 0 0 no-repeat;
    float:left;
    height:517px;
    width:597px;
    }

    .header-right {
    background:#fff url(‘http://awesomedc.files.wordpress.com/2009/12/medium-logo.jpg’) top center no-repeat;
    float:right;
    height:100px;
    margin:-20px 0 0;
    }

    .header-right form {
    margin:70px 0 0!important;
    }

    Working on other requirements I pointed out.

    Meanwhile, I appreciate your additional input once you get a chance

    #481917

    devblog
    Member

    Re. Point No.1, in .header-right, change “top center” to “-5px 0”

    Regarding point No. 2, you got different results because you changed the image. The code I gave you was based around the “logo-for-fb-201.jpg” file. Like I pointed out before:

    Keep in mind that if you decide to change graphics, the code would also need to be altered in order to fit the new image.

    I’m glad you managed to figure out how to fix that.

    Regarding the menu bar, I’ll take a look at that later and I’ll post something as soon as I can.

    #481924

    awesomenyc
    Member

    Re. Point no 1, done thanks

    Re. point no 2, I will be changing the banner once on daily basis. In order for me to understand how to do it on my own, would you modify the new code so I can compare it with the original one? Here is the latest I have:

    #header {
    background:#fff;
    clear:both;
    height:120px;
    }

    .header-left {
    background:#fff url(‘http://awesomedc.files.wordpress.com/2010/05/logo-for-fb-183.jpg’) 0 0 no-repeat;
    float:left;
    height:517px;
    width:597px;
    }

    .header-right {
    background:#fff url(‘http://awesomedc.files.wordpress.com/2009/12/medium-logo.jpg’) -5px 0 no-repeat;
    float:right;
    height:100px;
    margin:-40px 0 0;
    }

    .header-right form {
    margin:70px 0 0!important;
    }

    Re, point number 3, I look forward to get your feedback.

    Thanks

    #481925

    awesomenyc
    Member

    Ok, I manged to center the image by changing “0 0” to “130px 0” in .header left.

    Check it out. http://www.awesomedc.com

    The piece that is left is to make the banner wide enough so it fills up all the white space in the left hand side of the search box

    #481926

    awesomenyc
    Member

    re no 2, not to worry. I figured it out. Thx

    #481941

    devblog
    Member

    OK, to change the nav bars, here’s the code:

    #nav {background: COLOR-YOU-WANT;}
    
    #subnav {background: COLOR-YOU-WANT;}

    if you want both to have the same color, then you’d write the selectors like this:

    #nav, #subnav {background: COLOR-YOU-WANT;}
    #481942

    devblog
    Member

    BTW, if you want to change the background image every day, just make all your images with the same dimensions, that way, you will only have to change the file name in your CSS code.

    #482001

    awesomenyc
    Member

    Thanks for all the tips. Here are a few more questions. I sent an email to WordPress, but haven’t got back to me yet. Appreciate the additional feedback.

    1. One of the main reason I chose the new Enterprise theme is to be able to display my categories and subcategories on top. Although most of them are shown within the horizontal menu bar, I have kept the original list of categories in the right hand side for your comparison (scroll down).

    I know why a few of the categories in the right hand side are not showing up within the top horizontal bar due ot limited space, but why the subcategories are not showing up either? i.e. I have 4 subcats for the Entertainment cat (Parties, Clubbing, Our Bill Maher, and Our Jon Stewart). However, if you move the mouse on “Entertainment” cat on top, only the “Parties” subcat shows up

    2. Is there anyway, I can make the text within the top menu bar “HOME About US ……” bold so they look a little bit different than the list of categories right below it?

    3. How can I get ride of the little white space in the left hand side of the search box? I need to end my banner right to the left of the search box. The right end of the banner should touch the left side of the search box. Is that possible?

    Thanks

    Thanks

    #482025

    awesomenyc
    Member

    Now that I have them up and running (thanks to your help), one more thing just came to my mind:

    Is there anyway I can link the banner and the logo on top to a page?

    Thanks

    #482047

    devblog
    Member

    1. I’m afraid I don’t have the answer to that… Maybe it’s how the creator of the theme decided it to be? Only Staff can give you a better answer.

    2. Add this to your “#nav” selector:

    font-weight: bold;

    3. Add this to your “.header-right form” selector:

    clear: both;

    Add this selector to your CSS

    .header-right form #s {
    float: left;
    width: 210px !important;
    }

    And since I think you’ll want your logo aligned to the left as well, in the background property, change the “-5px” to “-40px”;

    Notice that I widened the search field so that it still covers some of the white area.

    4. Besides that I wouldn’t recommend it because Headers usually link to the Home page (linking it to a different page might confuse your users), doing so on this theme can be a bit tricky because to make it linkable, you’d need to use a text widget where you’d place the link to the page, then you’d have to tweak some more the CSS in order to place it on top of the header. However, that layer will be covering the search field and, although visible, when people clicks the field it would take them to that page.

    Of course, you can play with the “z-index” of every element but that needs to be tested thoroughly just to make sure it works well.

    #482053

    awesomenyc
    Member

    Done.

    Thanks for all the help.

    #482056

    devblog
    Member

    You’re welcome.

The topic ‘Customizing my heading with Enterprise Theme’ is closed to new replies.