Thursday, January 11, 2007

How do I put a picture at the top of my blog?

Victor Tabbycat rites:

Ok, here's one. How can we put a pictor at the top of our blog instead of the boring tidal box? Fanks!

That's a hard qweshchun to answer VT, becuz it depends on what blog platform yer on, and whut template yer using. Whut I can do is show yoo how I made the banner at the top of this blog.

ALWAYS BAK UP YER TEMPLIT BEFORE YOO START MESSIN' WITH IT.

LEVEL OF DIFFIKULTY: Intermeediyut +

Konsepchewully, yer going to make a bakgrownd grafik that the text in yer hedder sits on top of. Yoo don't wunt to make evrything (inklooding the text) a grafik, becuz the serch enjines will have trubble indexing yer blog.

So whut I did wuz change the styles for the hedder-rapper (this is using the New-Blogger platform). It now looks like this:


#header-wrapper {
background:
url("http://www.skeezixthecat.com/images/catbloghelp/banner_cbhc.gif")no-repeat ;
text-align:right;
height: 188px;
repeat: no repeat;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
Heer are all the things I did:

  1. Added a bakgrownd image and set it not to repeat.
  2. Spesifide the height of the wrapper, wich is IXZAKTLY the same height as the graphik (188px;). (If yoo don't do this, it gits mest up.)
  3. Changed the text so that it a-lines on the rite, and I diddled with the margins and padding so that the text is a-lined korrektly atop the bakgrownd grafik.

3 comments:

mister jeter harris, hizself said...

deer skeezix,
dis iz sumthin i'm intrestid in doin. but yer instrukshunz seem to be fer da noo blogger. i am still a old blogger.
can u be spesifik fer a old blogger like miself?
wut duz "diddled" meen?
i hav been takin yer tootorial an i am makin sum good changez on mi blog.
thank u.
yerz troolee,
jh

Skeezix the Cat said...

Jete, I'll werk on adding instrukshuns for old blogger.

Victor Tabbycat said...

Ok, that doesn't look too hard. Mom'll try it in my secrit blog since that's new blogger. I figgered it was sumfing like replace the default grafic (roundersx.jpg) wif a new one. What do margin an padding do? I thot padding is what older, fatter cats haf.
If she figgers it out in old blogger, we'll letcha know.