Customizing my heading with Enterprise Theme

  • Author
    Posts
  • #481746

    awesomenyc
    Member

    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.

    #481854

    devblog
    Member

    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.

    #481876

    awesomenyc
    Member

    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

    #481882

    devblog
    Member

    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: 960×80 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.

    #481892

    awesomenyc
    Member

    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

    #481897

    awesomenyc
    Member

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

    #481898

    devblog
    Member

    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?

    #481899

    devblog
    Member

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

    #481900

    devblog
    Member

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

    #481901

    awesomenyc
    Member

    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

    #481902

    awesomenyc
    Member

    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

    #481903

    devblog
    Member

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

    #481904

    awesomenyc
    Member

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

    #481905

    awesomenyc
    Member

    regardless, thank you!

    #481906

    devblog
    Member

    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

    #481907

    awesomenyc
    Member

    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?

    #481908

    awesomenyc
    Member

    I meant to say “I assume I can’t load your code for awesomnyc.com.”

    #481909

    devblog
    Member

    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.

    #481912

    awesomenyc
    Member

    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

    #481913

    awesomenyc
    Member

    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;
    }

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