Header Image/Font Style + Colour

Nov 23, 2006 17:58

Hi! I've read through the other posts here but am still feeling confused due to not knowing a thing, really, about coding and stuff.

I'm using the "Food Sweets" theme under Expressive, can someone please tell me how to:

1) Add a header image?
2) Change the font style/colour?
3) Making the header and sub header centred on the layout?

header:nav links:placement, page:fonts, header:image

Leave a comment

av8rmike November 24 2006, 17:07:37 UTC
These are all CSS changes, not code changes; Go to Customize Options, Custom CSS:
1)
#header {
background-image: url(image path);
}3)
#header-text {
text-align:center;
}2) is a little more complicated. How many places do you want to change the font or color? Just in entries? Entry headers? Page headers? Sidebars?

Reply

beautifulworld November 24 2006, 17:13:28 UTC
Thanks!

And I want to change the font/colour on the header/sub header and journal entry.

Reply

av8rmike November 24 2006, 18:51:28 UTC
This post actually addresses a bunch of the same questions, you may want to check it out.
#header-name a,
#header-description{
color: #fff;(or whatever)
} to change the colors on the journal title and subtitle. Change .asset-body {} font or color properties to change formatting in entries alone.

Reply

beautifulworld November 24 2006, 19:23:32 UTC
Thanks, again! That other post is helpful.

Is there a way of moving the header image down so I can still see the Header/Subheader text clearly?

Reply

av8rmike November 24 2006, 21:09:49 UTC
OK, this is what I came up with. I just copied all your CSS to make it easier. Any time you start messing around with moving header stuff around, it gets ugly. There's probably a more elegant way to do this, but this worked for me. You may want to tweak some height numbers here or there.
#header {
background-image: url(http://img.photobucket.com/albums/v64/MademoiselleBelle/sophieheader.png);
background-position: center bottom;
background-repeat: no-repeat;
background-color: #FFFFFF;
padding-bottom: 0px;
height: 360px;
}
#header-inner { height: 130px; }

#header-text {
text-align:center;
}

#header-name a { color: #4B0082; }
#header-description { color: #FF69B4; }

#header .nav a { color: #000000; }
#header .nav a:visited { color: #DC143C; }

body {
font: normal 10px Verdana, sans-serif;
}Note that I took the liberty of changing the header background color to white so you wouldn't see the pink, ( ... )

Reply

beautifulworld November 24 2006, 21:16:12 UTC
*grins* Thanks, that's great! One day when I have more time I'll start learning all this stuff for myself.

Reply

bunnysquee November 16 2007, 16:37:06 UTC
this post was very helpful to me and everything worked like a charm except one this - the navigation links won't centre!

i am working on the layout for canadian_shack, which is expressive seasonal, and i have a paid account. here is my code:

#header-inner {
background-image: url(http://img.photobucket.com/albums/v12/orlisbunny/ob5/canadian-shack-banner-3.jpg);
height: 380px;
}
#header-content-inner {
margin: 300px 15px 80px 60px;
}
#header-text {
text-align:center;
}
#header-name a { color: #3216A7; }
#header-description { color: #3216A7; }

#header .nav a { color: #3216A7; }
#header .nav a:visited { color: #3216A7; }

any suggestions would be greatly appreciated, especially if there is a way i can code the header and nav links text to be white with a black outline.

Reply

av8rmike November 16 2007, 17:22:00 UTC
Center vertically or horizontally? If vertically, change the 300px margin; change the 60px otherwise.

Reply

bunnysquee November 16 2007, 18:08:00 UTC
horizontally ... so i can't just tell it to align center like the header text? i'll play around with it.

thank you so much.

Reply


Leave a comment

Up