• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Colourscheme help


Active Member
Regarding DefaultYes, the colourscheme is in need of a change as some of you kindly pointed out.

I'm happy with the blue background with (slightly duller to ease the strain) white on top, but I need another colour to go with it, for the links etc.

I personally think green goes best but blue and green should never be seen and it's quite distracting when trying to read the main post.

Any opinions welcome.

EDIT: I'm currently changing the colourscheme around, so it'll look a bit weird until it's done.


Active Member
Cheers SF.

A monochromatic colour scheme is a possibility but I was hoping for a an extra colour to bring it out more, especially as a MCS will be reasonably hard to read with the blue background.

When you say white wrapper, do you mean make the background, border or something else white?

EDIT: No worries H. If I'm going for a design with darker background then I don't think that's easily avoidable. It doesn't hurt my eyes though.

Seems the dark-ish background light text idea isn't favoured by most.

I don't want to go with a boring plain colour, light background with the normal colours on top, but it seems like I may have to.
What I mean is like you keep your blue background in the background but have your text inside a white wrapper. That way you keep your background but people will find it easier to read the content. Like Six Revisions for example.

BTW you should aim to please your target market's eyes rather than your own as if they can't be comfortable reading your text then they're going to go elsewhere.


Active Member
Fair point regarding target markets.

I'm not a fan of boxing the design in as such, although I might go for a white background with blue links and black text style.


Senior Member
#ff8 #ffc #00f #ccc #333 #e4e4e4 in varying amounts is always nice :)

#00f for links, believe it or not.
#ff8 and #ffc for highlights/link bgs
#333 for body text
#ccc for subtle borders
#e4e4e4 for subtle backgrounds.

Use Georgia for headings and and 12pt Arial for body copy.


Senior Member
It looks really clean, exactly what you'll be after I image. You colours at the mo remind me of a Russian hackers site haha (except the absence of a black background haha).

I worked all those colours in that I mentioned using firebug and it looks nice :)


Senior Member
Ah right, cos the markup for it is dreadful lol, but at least that ain't yours.

If you use the colour scheme I suggested, that code stuff looks much much nicer using the light greys :)

EDIT: And use a white body BG, so much cleaner and makes everything loads easier to read. IMO the #e4e4e4 doesn't work as a body BG.


Senior Member
Back up your old CSS and see what you think to this :D

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin:0;padding:0;}body {background-color:#FFFFFF;color:#333333;font-family:Arial,Verdana,Tahoma,sans-serif;font-size:62.5%;line-height:24px;text-align:left;}#wrapper {margin:32px auto;width:703px;}#container {float:left;margin-top:-11px;position:relative;width:475px;}#top {height:61px;margin-bottom:16px;width:703px;}#top-right {float:right;font-size:14px;height:59px;line-height:18px;margin-left:32px;margin-top:2px;text-align:right;width:327px;}#top-right span {}#top-right span#quotee {border-bottom:1px dashed #2653B0;}.sidebar {float:right;font-size:14px;margin-left:48px;margin-top:5px;width:180px;}#footer {clear:both;width:500px;}div.post {border-bottom:1px solid #CCCCCC;padding:16px 0 8px;}div.post img {margin-left:-50px;}a {color:#0000FF;}a:hover {background-color:#FFFFCC;border-bottom:2px solid #FFFFCC;text-decoration:none;}img {border:medium none;}a img:hover {border:medium none;}ul {list-style-type:none;}h1, h2, h3, h4, h5, h6 {color:#FFFFFF;font-family:Georgia,"Times New Roman",Times,serif;}h1, h2 {font-size:24px;}.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6 {color:#333333;}.sidebar h2 {font-size:18px;font-weight:normal;margin-bottom:-2px;margin-top:2px;}p {font-size:1.2em;margin:12px 0;}p.margin {color:#AAAAAA;left:-110px;margin:0;position:absolute;text-align:right;width:96px;}#logo {float:left;height:61px;width:344px;}#searchform input, #searchform button {background-color:#2653B0;border-color:#214796 #214796 #183570;border-style:solid;border-width:1px 1px 2px;color:#B0E4B5;}#searchform input:hover, #searchform input:focus, #searchform button:hover, #searchform button:focus {border-color:#B7FC2A #B7FC2A #89BC1F;border-style:solid;border-width:1px 1px 2px;}#searchform input#searchsubmit {margin-top:2px;}#date {color:#AAAAAA;}#ilastfm_display a {font-size:12px;}.lastfm_music {color:#AAAAAA;}.comments-template {border-top:1px solid #CCCCCC;margin:10px 0 0;padding:10px 0 0;}.comments-template ol {list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0 0 15px;}.comments-template ol li {border-bottom:1px solid #CCCCCC;line-height:18px;margin:10px 0 0;padding:0 0 10px;}.comments-template h2, .comments-template h3 {font-family:Georgia,Sans-serif;font-size:16px;}.commentmetadata {font-size:12px;}.comments-template p.nocomments {padding:0;}.comments-template textarea, .comments-template input {font-family:Georgia,"Times New Roman",Times,serif;font-size:14px;}/* These need to overwrite the geshi.css styles */.dean_ch {font-size:1.2em;background-color:#FFFFCC;border-bottom:1px solid #CCCCCC;color:#0000BB;font-family:'Courier New',Courier,monospace;}


Active Member
Cheers for all the help Harry :)

I had a look at your CSS and it's definitely a step in the right direction, but for now I'm quite happy with the smooth light grey BG with blue and dark grey text.

I'm gonna have a play with the code highlighting colours either later today or tomorrow.


Active Member
I'm pretty happy with it, reasonably easy to read and clean enough. Definitely agree about the .margin elements though, pushed it up to a #888.
Oh please not Arial. If I were you I'd use Helvetica. It's a much nicer font. Say the font stack could be: "Helvetica Neue", Helvetica, Arial, sans-serif or something like that for the body. If you'll see, Arial comes after Helvetica.


Active Member
Not a bad shout changing the font list SF.

I think I'm going to stick with Georgia for the body text though, arial/helvetica just seems to boring to me.