Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Colourscheme help

Discussion in 'Website Design Forum:' started by Xenonsoft, Jul 7, 2009.

  1. Xenonsoft

    Xenonsoft 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.
  2. Silver Firefly

    Silver Firefly Senior Member

    Well, you could try having a white wrapper and have a monochromatic colour scheme.
  3. h_freezy

    h_freezy Senior Member

    that blue BG is not good for my eyes. sorry
  4. Silver Firefly

    Silver Firefly Senior Member

    Which is why I suggested a white wrapper on top.
  5. Xenonsoft

    Xenonsoft 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.
  6. Silver Firefly

    Silver Firefly Senior Member

    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.
  7. Xenonsoft

    Xenonsoft 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.
  8. Harry

    Harry 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.
  9. Xenonsoft

    Xenonsoft Active Member

    Cheers Harry, I'll take a look at those.
  10. Harry

    Harry 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 :)
  11. Harry

    Harry Senior Member

    Oh and where did you get the markup for the code stuff from?
  12. Xenonsoft

    Xenonsoft Active Member

    Cheers Harry.

    The <pre> tag styling is a Wordpress add-on that's easily tweakable in the css files.

    Deans Code Highlighter
  13. Harry

    Harry 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.
  14. Harry

    Harry 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;} {border-bottom:1px solid #CCCCCC;padding:16px 0 8px;} 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;}
  15. Xenonsoft

    Xenonsoft 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.
  16. Harry

    Harry Senior Member

    Hmm, it's a bit of a dirty grey though to me. If you keep it though I'd suggest darkening the .margin elements.
  17. Xenonsoft

    Xenonsoft 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.
  18. Silver Firefly

    Silver Firefly Senior Member

    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.
  19. Xenonsoft

    Xenonsoft 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.
  20. Harry

    Harry Senior Member

Share This Page