How to create a shorter header

  • Unknown's avatar
    ginab13 · Member ·

    Hi – I want to add a thin logo to the header in Triton Lite, but it seems that the only option is to add a thick header. When I try to crop, the functionality isn’t there to re-shape the header, only to resize. How might I add a header that is not so high.

    Additionally, is there a way to add a header that only takes up the left portion of the header space? Then, I can use the tagline in the other portion. If not, that’s ok…

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

    Could you please provide any CSS that may help with this? Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    I checked the site you selected when you entered your help request https://baleriacreative.wordpress.com/ and I found that it is currently using the Reddle theme.

    How might I add a header that is not so high.

    There are a few different ways you could do this. One way to shorten the header area in the Triton Lite theme would be to upload an image normally and then use a height property in CSS to cut the image off:

    #header-image {
	height: 100px;
}

    Another way to do it would be to not use the built in header option and insert an image as a background to some element on the page using CSS. Here is an example that adds a background image above the “#logo” element, which is the one that contains the site title and tagline, and adds some padding at the top to give it space so it doesn’t overlap the text:

    #logo {
	background: url(http://i2.wp.com/s.w.org/about/images/logos/wordpress-logo-notext-rgb.png?w=150) center top repeat-x;
	padding-top: 180px;
}

    You could use this example and adjust all the values such as the image URL and the repeat and how much padding is needed based on the size of your image. It looks like it would work best if the header image were 960 pixels wide if you want it to fill the entire content area to match the content width below.

    Additionally, is there a way to add a header that only takes up the left portion of the header space?

    Sure, that’s a little different. In that case you might try something like this where the background image is aligned left with “no-repeat” and you add a little padding to the top of the site title (“logo h1”) to make it look more vertically centered:

    #logo {
	background: url(http://i2.wp.com/s.w.org/about/images/logos/wordpress-logo-notext-rgb.png?w=150) center left no-repeat;
	height: 150px;
	padding-left: 80px;
}

#logo h1 {
	padding-top: 2em;
}

    All of the values like 150px and 80px and 2em would need to be adjusted depending on the size of your image and the width of your site title and tagline. You can try out the example and experiment with the numbers until you get a fit that looks good to you.

  • Unknown's avatar
    ginab13 · Member ·

    Thank you!

  • Unknown's avatar
    designsimply · Member ·

    Cheers :)

  • The topic ‘How to create a shorter header’ is closed to new replies.