WordPress.com Forums » Topic: Changing header, banner, colours in TwentyEleven

designsimply on "Changing header, banner, colours in TwentyEleven"

designsimply — Sat, 21 Apr 2012 12:11:30 +0000

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/

kinetikat on "Changing header, banner, colours in TwentyEleven"

kinetikat — Fri, 20 Apr 2012 13:15:01 +0000

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

designsimply on "Changing header, banner, colours in TwentyEleven"

designsimply — Thu, 19 Apr 2012 22:44:42 +0000

I love the header image btw!

designsimply on "Changing header, banner, colours in TwentyEleven"

designsimply — Thu, 19 Apr 2012 22:40:13 +0000

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.

designsimply on "Changing header, banner, colours in TwentyEleven"

designsimply — Thu, 19 Apr 2012 22:39:16 +0000

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

designsimply on "Changing header, banner, colours in TwentyEleven"

designsimply — Thu, 19 Apr 2012 22:34:03 +0000

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.

designsimply on "Changing header, banner, colours in TwentyEleven"

designsimply — Thu, 19 Apr 2012 22:31:53 +0000

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

designsimply on "Changing header, banner, colours in TwentyEleven"

designsimply — Thu, 19 Apr 2012 22:30:47 +0000

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.

kinetikat on "Changing header, banner, colours in TwentyEleven"

kinetikat — Thu, 19 Apr 2012 19:31:59 +0000

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!