Change your colours!
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