Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Changing header, banner, colours in TwentyEleven

  1. kinetikat
    Member

    Hi all,
    I’m a non-techie wanting to alter the header on Twenty Eleven – I have the Custom Design upgrade and can access the CSS code. I copied a bit of code I found on http://www.throwingabrick.com to get rid of the white space at the top of the page and effectively drop the title and tagline into the banner image, and it worked fine, except that the default thin grey tagline text now virtually vanished against my shades-of-grey banner image, and the Searchbox fouled the image on the right hand side. I took the code off again till I knew a bit more about what I was doing!
    I don’t want to make the banner image smaller, I like it the size it is.
    I’d like to be able to change the colour of the title, modify the font so the title is white with a black drop shadow.
    I want to make the tagline text bold and change its colour so it shows up nicely against the grey banner image.
    I also need to alter the width of the right-hand tagline margin so the tagline text doesn’t intrude on the silhouette in my banner image.
    lastly, I'd like to get rid of the ‘search’ box altogether, as it is duplicated immediately below the banner by a widget.

    Sorry to have such a list of stuff, but it's really bugging me!

    The blog I need help with is throwingmyweightsaround.com.

  2. designsimply
    Staff

    I’d like to be able to change the colour of the title, modify the font so the title is white with a black drop shadow.

    To make the site title black white with a black drop shadow, add this to your Appearance → Custom Design → CSS page:

    #site-title a {
	color: #fff;
	text-shadow: 3px 3px 3px #000;
}

    Adjust the numbers and color values as necessary.

  3. designsimply
    Staff

    I want to make the tagline text bold and change its colour so it shows up nicely against the grey banner image.

    To make the tagline bold and change the font color, use this:

    #site-description {
	color: #000;
	font-weight: bold;
}

  4. designsimply
    Staff

    I also need to alter the width of the right-hand tagline margin so the tagline text doesn’t intrude on the silhouette in my banner image.

    You can add a "margin-right" property to the "#site-description" block like this:

    #site-description {
	color: #000;
	font-weight: bold;
	margin-right: 410px;
}

    Adjust the number as necessary.

  5. designsimply
    Staff

    I'd like to get rid of the ‘search’ box altogether, as it is duplicated immediately below the banner by a widget.

    You can hide the search box in the header of the Twenty Eleven theme like this:

    #branding #s {
	display: none;
}

    I think it looks kind of cool at the bottom of the header though. Give this a try as a possible alternative:

    #branding #s {
	margin-top: 180px;
}

  6. designsimply
    Staff

    Here are all the changes in one list:

    hgroup {
	position: absolute;
}

#site-title a,
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	color: #fff !important;
	text-shadow: 3px 3px 3px #000;
}

#site-description {
	color: #000;
	font-weight: bold;
	margin-right: 410px;
}

#branding #s {
	margin-top: 180px;
}

    I added in the positioning style and some styles to keep the site title white on hover.

  7. designsimply
    Staff

    I love the header image btw!

  8. kinetikat
    Member

    Fantastico!
    Thanks a million, Designsimply, you are a star.
    It all looks great. I've gone with the 'goodbye, Searchbox' option, BTW.

    I'd never have got all that sorted myself, or not for many months, knowing my tendency to procrastinate...

    Glad you like the header image, it is rather spiffy, isn't it?
    Thanks again,
    Sue

  9. designsimply
    Staff

    It looks great!

    You might consider adding a "Donate" link to the top navigation in a custom menu item.
    http://en.support.wordpress.com/menus/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags