Need help? Check out our Support site, then


Customizing my heading with Enterprise Theme

  1. I am testing out the new Enterprise Theme. But having difficulty to fix the heading. I appreciate help from anyone here.

    My blog is awesomenyc.wordpress.com

    Here is what I need to do with my heading:

    1. I need to set up my logo right above the search box
    2. Need to eliminate the text for "Awesome NYC blog" and "just another Worldpress blog" in the left hand side
    3. Most importantly, I need to fit in the shown image in the heading. As for its width, it should start from the left and stops right before the search box like currently shown

    Thanks so much
    Elias

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

  2. it seems you used the custom header and background features... as it is, I see you have covered points 1 and 3 (logo is above the search box and the faces stop right before the search box), so I don't really understand what you're trying to do.

    Do you have the CSS upgrade for this blog?

    For point No. 2, go to settings and empty the Site Title and Tagline fields.

  3. I don't have CSS upgarde for this site. But, I have it for my main blog awesomedc.com. So, I am currently using awesomenyc.com for my testing till it gets bigger.

    the current heading you are currently seeing on awesomenyc.com is one big image.

    . I have one image for logo that is supposed to go right above the search box

    . I have one image for the banner in the left hand side with picture of people that supposed to fit in from the left hand side of the page to right before it touches the search box on top.

    Although the current banner looks like it has fit in to the heading, but it is not. Part of the image is out of the heading. It needs to get shrunk

    I am not worried about the tag line below the search box. I will take that out.

    Thanks

  4. Although the current banner looks like it has fit in to the heading, but it is not. Part of the image is out of the heading.
    </blockqutoe>

    Are you referring to the face to the left of the header (giving a duplicate effect)? If so, that's because, like I said in my first post, it seems you uploaded the image as a custom background because the current embedded CSS has this selector:

    body {
    	background-image: url('http://awesomenyc.files.wordpress.com/2010/05/logo-for-nyc2.jpg');
    ...
    }

    Also, the current image has these dimensions: 960x80 which seem to be appropriate, so I do not believe it needs to be cropped down.

    Again, check the custom background and try resetting it. Also, if you can upload the images you have (and give me their URL), it would be of great help so that I can test the code. I will need you to reset the header as well.

    Once you've done that, I'll go ahead and write the code you need.

  5. I just uploaded a new image. here is the URL for the image with the faces (the banner): http://awesomenyc.files.wordpress.com/2010/05/logo-for-fb-201.jpg

    As you can see, it has taken the entire box. I want it up to the left hand side of the search box so I can upload my logo right on top of the search box.

    Here is the URL for the medium size logo: http://awesomenyc.files.wordpress.com/2010/05/logo-medium2.jpg

    and, here is the URL for small size logo:
    http://awesomenyc.files.wordpress.com/2010/05/small-logo.jpg

    Not sure which logo I will have to use to fit above the search box.

    Let me know what else you need me to send.

    thanks

  6. Also, how would change the black and gray color for the horizontal bar on top? Can I change the color?

  7. I see you uploaded another image... don't understand why...

    Even if this is your test blog, you don't have to upload the header images through the custom header feature IF you want to test your CSS. I really don't know how else to explain this.

    When I say "reset the background and header images" I mean "remove them so that the blog gets its default look". Can you do that?

  8. what bar are you talking about, the menu bar or the admin bar?

  9. One more question, just to make sure, do you want to display this image as your header bg?

    http://awesomenyc.files.wordpress.com/2010/05/logo-for-fb-201.jpg

  10. I guess I am lacking the knowledge of CSS.

    Per your request, I just removed the images and restored the original heading

    Here is the image for the medium and small logo(I am ok with using either one that make sense:
    Here is the URL for the medium size logo: http://awesomenyc.files.wordpress.com/2010/05/logo-medium2.jpg

    and, here is the URL for small size logo:
    http://awesomenyc.files.wordpress.com/2010/05/small-logo.jpg

    and here is the URL for the image with the faces (the banner): http://awesomenyc.files.wordpress.com/2010/05/logo-for-fb-201.jpg

    Please, not that I am trying to get this right so at the end change my Awesomedc.com theme to Enterprise and put the new heading your are helping me with.

    As a reminder, I have a CSS upgrade for Awesomedc.com

    Thaks

  11. As for the menu bar, I am taking about changing the color of the menu bar for Enterprise Theme currently up on awesomenyc.wordpress.com

    Thanks

  12. Okay, in a few minutes I'll post the code.

  13. Thanks. Are you part of the WordPress team or just another blogger like me with a much better knowledge of coding? :-)

  14. regardless, thank you!

  15. Think nothing of it. I'm just a forum volunteer, and well... I'm a web developer (and computer programmer), so I do have some experience under my belt.

    Now, regarding your CSS, based on our conversation, I understood you wanted this?

    #header {
    background: #fff;
    clear: both;
    height: 517px;
    }
    
    .header-left {
    background: #fff url(http://awesomenyc.files.wordpress.com/2010/05/logo-for-fb-201.jpg) 0 0 no-repeat;
    float: left;
    height: 517px;
    width: 597px;
    }
    
    .header-right {
    background: #fff url(http://awesomenyc.files.wordpress.com/2010/05/logo-medium2.jpg) top center no-repeat;
    float: right;
    height: 100px;
    margin: 375px 0 0;
    
    }
    
    .header-right form {
    margin: 70px 0 0 !important;
    }

    If so, and if you don't mind me saying, your header is too big and I wouldn't recommend you going that way. If I may suggest you an alternative, which I think would suit your blog better, then try this code:

    #header {
    background: #fff;
    clear: both;
    height: 120px;
    }
    
    .header-left {
    background: #fff url(http://awesomenyc.files.wordpress.com/2010/05/logo-for-fb-201.jpg) 0 -85px no-repeat;
    float: left;
    height: 517px;
    width: 597px;
    }
    
    .header-right {
    background: #fff url(http://awesomenyc.files.wordpress.com/2010/05/logo-medium2.jpg) top center no-repeat;
    float: right;
    height: 100px;
    margin: -20px 0 0;
    
    }
    
    .header-right form {
    margin: 70px 0 0 !important;
    }

    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.

    Hope this helps

  16. Thanks. I will give it try.

    since, I want this for awesomeDC.com andI don't have an CSS upgrade for awesomenyc.wordpress.com, I assume I can load your code for awesomnyc.com.

    To use it for awesomdc.com, all I need to do is to change the URLs accordingly.

    Correct?

  17. I meant to say "I assume I can't load your code for awesomnyc.com."

  18. Yes you can paste it in the CSS Editor, but since you don't have the upgrade, you will only be able to preview it.

  19. I just did and here it is: http://awesomedc.com/.

    1. What do I need to do to move the AwesomeDC logo a little bit to the right so the first letter "A" gets aligned with the left hand side of the search box

    2. The banner with the girls face gets stretched all the way to the left of the search box and the faces are shown as supposed to their breast currently :-)

    If you think the banner gets fuzzy if stretched, how can I atleast make it centered?

    3. How would I change the background color of the horizontal bar for the menu right below the banner? They are currently black and gray

    Thanks

  20. BTW, here is your code for awesomedc.com heading:

    #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 -85px 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;
    }

  21. 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

  22. 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.

  23. 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

  24. 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

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

  26. 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;}
  27. 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.

  28. 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

  29. 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

  30. 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.

Topic Closed

This topic has been closed to new replies.

About this Topic