Wednesday, October 20, 2004

Change your colours!

I've used the Minima Black template from Blogger - virtually the same basic coding as the Minima template.

Webmonkey colours
For the colours, I went via google to Webmonkey's colour page: Color codes

Then I cut and pasted the codes I wanted into the relevant part of the template:

Body text
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#000066; [Replace the code with the one you want. Remember the hash sign at the beginning and the semi-colon at the end. If you miss that out it just shows grey
]
font-size/* */:/**/small;
font-size: /**/small;
}

Links - the way they appear in the text before you've opened them
a:link {
color:#0000CC; [Replace code]
text-decoration:none;
}

Links - the way they look once you've opened them
a:visited {
color:#660099; [Replace code. Check if the colour still looks OK with the body text.]
text-decoration:none;
}

Links - the way they look for the few moments when the cursor moves over them
a:hover {
color:#FF9900; [Replace code. Great place for that vile pink or green!
text-decoration:underline;
}

Main blog title
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#CC6600; [Replace code]
text-transform:uppercase;
letter-spacing:.2em;
}

Main blog title as it appears on the Comments page
[I'd never noticed that it changed...]

#blog-title a {
color:#CC6600; [Replace code. Remember the hash and the semi-colon...
]
text-decoration:none;
}

Main blog title as it appears on the comments page when you pass cursor over it
[Never noticed that either..]

#blog-title a:hover {
color:#FFCC00; [Replace code]
}

Text under the Main Blog title
In my case: PICCADILLY - the weblog with a changing title. A Brit adrift etc. etc...

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999900; [Replace code]
}

Headings - including the date line, ' About me', ' Previous posts', ' Archive' etc.

h2 {
margin:1.5em 0 .75em;
font:bold 60%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#663399; [Replace code]
}

Post titles - the headline on each new post

Under 'Posts' - which follows on after ' Headings':

post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:120%; [This is where you can reduce the size of the headlines if you want to]

line-height:1.4em;
color:#CC9900; [Replace code]

Post title what? Any ideas?

.post-title a {
text-decoration:none;
color:#ad9; [?}

t-title a:hover {
color:#fff; [?]
}

Comments

Haven't tried this yet but presume it determines the colour of the comments people write. Should I have you all writing in bright pink? Hmmm.....

Under ' Comments' -

#comments h4 {
margin:1em 0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#FF6600;
}

Sidebar - colour of the text under your name and location

Like, ' Read my blog. My '100 things about me' list has got stuck, like its creator, at thirty-something... '

Last item under ' Sidebar Content':

#sidebar p {
color:#CC9900; [Replace code]
line-height:1.5em;
}

Profile - colour of your name and location

The original template doesn't actually give you a colour but you can add one:

Under 'Profile' - which follows on from 'Sidebar Content':

.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
color:#993366; [Add this whole line, replacing the code with the one you want]
}

And that's it. I haven't bothered changing the colour of lines but you'll find there's opportunity to do that in the relevant bits of the template.

ENJOY!


0 Comments:

Post a Comment

<< Home