Colours other than defaults: Inuit Types

  • Unknown's avatar
    solidgoldcreativity · Member ·

    Hello,

    I would like to use a light grey or mid grey colour scheme for my blog, instead of one of the standard colour schemes that come with Inuit Types. The blog is http://solidgoldcreativity.com

    Any help much appreciated :) Thank you.

    SGC

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    This code will change the colour for the sidebar background and text. The last line will also move your categories dropdown away from your main navigation links. If you want to change anything more specific the let me know.

    .feat_background, .featured_post span.date_bg, .widget, .menu li a:hover {background-color:#333;}
.widget, .widget a, .widget h2, .widget h3, .widget li, .widget p, .menu li a:hover {color:#ccc!important;}
div.widget_categories {left:26em;}

    lh

  • Unknown's avatar
    bokunosekai · Member ·

    where should we put the code? I’m also using inuit for http://novroz.wordpress.com

  • Unknown's avatar
    panaghiotisadam · Member ·

    @bokunosekai: Do you have the paid CSS upgrade? If not, you can’t use Luke’s suggestion.

  • Unknown's avatar
    bokunosekai · Member ·

    ah I see … thank you

  • Unknown's avatar
    solidgoldcreativity · Member ·

    Hi hallluke,

    Thanks for the code, and for caring where the categories drop-down is :) I’ve added the code, and the drop-down looks much better, though I would like the grey colour to be much lighter. I’d also need to change the text colour for the sidebar text to black.

    Thanks again.

    SGC

  • Unknown's avatar
    devblog · Member ·

    solidgoldcreativity,

    Change the “26em” to “26%”. EM units should be used for text only, not for margins nor paddings. In this case “%” is more appropriate.

    To make the gray in the menu lighter, add this code to your CSS:

    #main_menu a {color: #999;}

    You’d need to play with the value to get the gray you want.

    I’d also need to change the text colour for the sidebar text to black.

    You already have a dark background, I wouldn’t recommend changing the text color to black… it would be really hard to read.

  • Unknown's avatar
    solidgoldcreativity · Member ·

    @devblog,

    Thanks :) I changed the em units to %. With the colour thing, where are you looking to get the colour values? I want black text cos I want the background shade to be very light grey.

    Cheers, sgc

  • Unknown's avatar
    devblog · Member ·

    I see. Okay, try this:

    .widget {background: #ccc;}

.sidebar h3, .sidebar ul, .sidebar p, .sidebar a, .sidebar table {color: #000 !important;}
.sidebar h3 {border-bottom: solid 1px #000;}

    With the colour thing, where are you looking to get the colour values?

    I guess it’s because I just woke up but I don’t really understand what you mean… are you asking about how do I know the HEX for gray or what to look for in the source code? ‘casue you were talking about giving the text color of the menu bar a lighter gray, right?

  • Unknown's avatar
    devblog · Member ·

    solidgoldcreativity,

    I was revising your code and, although it works, it distorts the layout when the text is enlarged or made smaller. It also displaces the dropdown list if the browser window is widen or made narrow. The following code fixes that, so the ddl is kept in place no matter how big/small the text is or how wide/narrow the window is.

    Add this to your CSS:

    .wrapper {
position: relative;
overflow: hidden;
}

    Replace this:

    div.widget_categories {
position:absolute;
top:28px;
background:transparent;
left:26%;
margin:0;
}

    with this:

    .widget_categories {
background:transparent;
left: 220px;
margin:0;
position:absolute;
top: -12px;
}

    Also, you might want to add this code (it styles the ddl):

    .widget_categories select {
border: none; background: #ddd;
color: #666;
font: bold 85% Georgia, "Times New Roman";
padding: 2px 0;
}
  • Unknown's avatar
    solidgoldcreativity · Member ·

    @devblog,

    Good morning. Sorry, I haven’t been too clear. The colour scheme I want to change is the red/white one that applies to the whole site. I want to change the red to very light grey, and the white text to black.

    Re the question about colour values .. I’m curious where you get the hex values for the colours.

    Thanks :) sgc

  • Unknown's avatar
    devblog · Member ·

    Replace your current code (the whole thing) with this one:

    body {
margin:40px;
}

body,.top_menu {
padding:0!important;
}

#main_menu a {color: #999;}

.wrapper {
position: relative;
overflow: hidden;
}

.entry img {
background:transparent;
border-style:none;
}

.top_menu {
margin-top:-3px!important;
}

.top_menu .fl a {
font-weight:bold;
}

.entry blockquote {
border-left:0;
font-style:normal;
background-color:#FAFAD2;
}

.widget_categories h3 {
display:none;
}

div.widget_categories {
background: none;
left: 220px;
position:absolute;
top: -12px;
}

.sfhover1, .feat_background, .featured_post .date_bg{background:#ccc !important;}
.widget{background-color:#ccc}
.Navi .on{background:#ccc!important}
input#submit{background:#ccc}

#submit, .date_bg, .featured_post, .featured_content h2 a, .featured_content .comments-feat, .sidebar h3, .sidebar ul, .sidebar p, .sidebar a, .sidebar table {color: #000 !important;}
.sidebar h3 {border-bottom: solid 1px #000;}

    This should replace the red color with light gray and the white text with black. Optionally, if you want to style your categories dropdown list, add this code to the CSS

    .widget_categories select {
border: none; background: #ccc;
color: #666;
font: bold 85% Georgia, "Times New Roman";
padding: 2px 0;
}

    If you want lighter grays, replace all instances of “#ccc” with “#ddd” or “#dfdfdf”.

    I’m curious where you get the hex values for the colours.

    Some I already know by heart, and some I use programs like Photoshop. When I’m using my windows machine, and want to know the HEX color of an element, I use a little app called pixie. Very cool, and it’s free.

    HTH

  • Unknown's avatar
    devblog · Member ·

    Oh, and top ‘o’ the morning to ya!

  • Unknown's avatar
    solidgoldcreativity · Member ·

    Hi db,

    Thanks so much for your generosity. I applied the code and it all worked great.

    Only thing is, I’ve decided to switch themes again (yes, after all your contribution!). There are some things about Inuit Types I really like such as the featured post, however, it also moves content a click deeper than most other themes. So I’m changing again.

    Thanks again and may you have a magical day :)

    sgc

  • The topic ‘Colours other than defaults: Inuit Types’ is closed to new replies.