Need help? Check out our Support site, then


How do I make the header "shorter" in iThemes 2

  1. thepoliticalpaige
    Member

    I have the custom upgrade. I've uploaded a header picture and the length is fine but the height is way too much. How do I decrease the header height in this theme?

    (*while we're at it, is there a way to make the corners of the header, posts, all blocks really straight/squared off instead of rounded?)

    Thanks!

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

  2. thepoliticalpaige
    Member

    I thought if I could see the CSS stylesheet I could copy/paste the "header" section and just change the height to to, say, 175, but I can't find the actual CSS stylesheet anywhere!

  3. Hi,

    It looks like the header image itself has a rather large space beneath your logo/text which you might consider cropping out. This is responsible for most of the height.

    Also, there is a little bit of padding at the top of the site which you can remove if you want by using this CSS code:
    #masthead {padding: 0px;}

    The theme uses this code for your header image to create the rounded corners on your header image:
    #custom-header-image{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}

    You can use this code to remove the rounding there:
    #custom-header-image{-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}

    To remove the rounding on the other pieces, would take a bit of searching. It wouldn't be too difficult, but this method (though a bit heavy-handed) seems like it might work to remove rounded corners from everything without causing any problems.

    * {-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px !important; }

    I hope this helps.

  4. thepoliticalpaige
    Member

    thank you so much for your input, but I had to leave that large blank bit of header space because if I make the picture shorter, it makes me crop the whole thing to that same ratio - except now half the picture would be cut out!

    how do I just make the header height less?

  5. I thought if I could see the CSS stylesheet I could copy/paste the "header" section and just change the height to to, say, 175, but I can't find the actual CSS stylesheet anywhere!

    The best way to view CSS is by using browser tools. If you right-click on an element on a web page and select the "Inspect Element" option, it will show you the HTML of what you clicked on and all of the CSS that applies to it. Browser tools are extremely handy!

    You can also access the original stylesheet link in your Appearance → Custom Design → CSS editor by clicking "Edit" next to "Mode: Add-on."

  6. How do I decrease the header height in this theme?

    Check out the answer posted here:
    http://en.forums.wordpress.com/topic/header-broken-css-gone?replies=6#post-1154229

  7. While we're at it, is there a way to make the corners of the header, posts, all blocks really straight/squared off instead of rounded?

    To remove the rounded corners from the header image on the iTheme2 theme, add this to your Appearance → Custom Design → CSS editor:

    #custom-header-image {
         border-radius: 0;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic