Changing Colors

  • cttl

    #12777

    Kim,

    Your code has helped me change the color of my blog from blue to gray — Thank you! Do you know how to change the upper left and right corners so that it is rounded? I tried to change it to something like the code listed below, but it still did not work. I would appreciate any suggestions you may have. (also used your .h1-page-title code too, but the border-radius does not show there either) Thanks!

    .sidebar h3 {

    -pie-background: linear-gradient(#BABABA, #6E6E6E);

    background: #BABABA;

    background: linear-gradient(#BABABA, #6E6E6E);

    background: -moz-linear-gradient(#BABABA, #6E6E6E) repeat scroll 0 0 transparent;

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#BABABA), to(#6E6E6E));

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#BABABA’, endColorstr=’#6E6E6E’); /* for IE */

    text-shadow: 0 -1px 0 #000000;

    border-radius: 10px 10px 0px 0px;

    }

    Kim

    #12778

    Hi cttl

    Thank You for the kind words 🙂

    Hmm.. When I look at Your sidebar with Firefox in combination with Firebug,

    Your .sidebar h3 needs just a little twist at border-radius: 10px 10px 0 0,

    try:

    .sidebar h3 {
    background: -moz-linear-gradient(#BABABA, #6E6E6E) repeat scroll 0 0 transparent;
    border-radius: 8px 8px 0 0;
    text-shadow: 0 -1px 0 #000000;
    }

    Rounded corners in IE explorer:

    http://msdn.microsoft.com/en-us/library/bb250413%28v=vs.85%29.aspx

    Kim

    #12779

    And If You want a look at my sprite_master.png,

    try this link:

    http://www.nørrebo.dk/bbpress/topic.php?id=13#post-14

    Graphene theme PSDs are here:

    http://graphene.googlecode.com/svn/trunk/PSDs/

    Kim

    cttl

    #12780

    Hi Kim,

    Thanks for the reply. I tried using the code but it just comes up with the sidebars having rounded corners, but blue instead of gray. This looks similar to what happens if I don’t use any custom code at all.

    If you see the rounded borders then maybe the problem is IE. I am using IE9, which is supposed to have implemented border-radius, and I see it when there is no custom code, so I am not sure what the problem is.

    Thanks again for your help and any thoughts you may have are appreciated.

    Kim

    #12781

    You might not have seen this right:

    border-radius: 10px 10px 0 0;

    Make a small error on Your sidebar. Try using:

    border-radius: 8px 8px 0 0;

    In any case, my latest edition of sidebar h3 & h1.page.title:

    .sidebar h3 {
    -pie-background: linear-gradient(#afaeae, #6E6E6E);
    background: #afaeae;
    background: linear-gradient(#afaeae, #6E6E6E);
    background: -moz-linear-gradient(#afaeae, #6E6E6E) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#afaeae), to(#6E6E6E));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afaeae', endColorstr='#6E6E6E'); /* for IE */
    text-shadow: 0 -1px 0 #000000;
    }

    h1.page-title {
    -pie-background: linear-gradient(#afaeae, #6E6E6E);
    background: #6E6E6E;
    background: linear-gradient(#afaeae, #6E6E6E);
    background: -moz-linear-gradient(#afaeae, #6E6E6E) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#afaeae), to(#6E6E6E));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afaeae', endColorstr='#6E6E6E'); /* for IE8 */
    text-shadow: 0 -1px 0 #000000;
    -moz-border-radius: 0 5px 0 0;
    }

    Anonymous

    #12782

    Hi from a newbie who has managed to set up a website and changed the colors from a blue palette to a green palette and I love, love the theme and the way it looks….okay here comes the but, when my website is viewed with IE8 the sidebars are still blue. Firefox, Chrome, Safari, Netscape all show the site beautifully in all it’s glorious shades of green…..any suggestions?

    When asking around I got the following responses;

    You have a number of CSS validation errors. IE8 is less able to render broken CSS. I recommend fixing the errors and seeing if that solves it. Focus on the ones that look like this:

    Value Error : background Too many values or values are not recognized : linear-gradient(left top,#003300,#ccff99) linear-gradient(left top,#003300,#ccff99)

    Also keep in mind that IE8 will simply not render a lot of the fancy CSS you have used, i.e. rounded corners, gradients, shadows. It’s a limitation of the browser. You should be able to get the background

    http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.mostabear.info%2F

    and;

    Check your CSS for .sidebar h3 this line:

    background: url(images/bg-sidebar-h3.png) left bottom repeat-x #003300; should be in this order:

    background: #003300 url(images/bg-sidebar-h3.png) repeat-x left bottom;

    Not sure this will fix the background colour of your sidebar titles in IE8 but you could try this one before fixing the other CSS issues.

    Kim

    #12783

    Hmm..

    Try post Your .sidebar h3 like here:

    (code between backtick)

    .sidebar h3 {
    -pie-background: linear-gradient(#afaeae, #6E6E6E);
    background: #afaeae;
    background: linear-gradient(#afaeae, #6E6E6E);
    background: -moz-linear-gradient(#afaeae, #6E6E6E) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#afaeae), to(#6E6E6E));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afaeae', endColorstr='#6E6E6E'); /* for IE */
    text-shadow: 0 -1px 0 #000000;
    }

    Kim

    stevivor

    #12784

    Hey all!

    I’ve changed my website colours in most places but can’t get the ‘Category Archive’ bar to switch from blue — I just don’t know what it’s called in the css.

    Can anyone help?

    Example at: http://stevivor.com/bravestest/?category_name=news

    stevivor

    #12785

    I feel so stupid — re-read what Kim wrote — already fixed! Thanks heaps!

    Anonymous

    #12786

    Okay Kim,

    I think I understand but would like some clarification/confirmation from you if possible….I have copied all the CSS (colors only)code changes that I want to make (adding your suggestions for the “.sidebar h3”. I am attaching that code to the bottom of this post for your review…In my previous post there was a reference to lots of CSS errors after running the domain through Jigsaw’s validator, is that a concern I should have since I only changed the color codes? One last question I am not clear on, is it better to create a child in the w-p content directory as I have seen suggested or can I put it in the custom code display area of Graphene Options, to avoid the possibilities of any updates changing the colors back to the default blue…and thanks so much from all of us newbies who so rely on your expertise….KUDOS!

    /*

    Theme Name: Graphene Child

    Theme URI: http: //example.com/

    Description: Child theme for the Graphene theme

    Author: Your name here

    Author URI: http: //example.com/about/

    Template: graphene

    Version: 1.0

    */

    @import url(“../graphene/style.css”);

    /* Your modification goes here */

    body {

    background: url(images/bg_g.png) repeat #000 fixed;

    font: 12px Tahoma, Arial;

    }

    a,

    a:visited {

    color: #669966;

    text-decoration: none;

    }

    a:hover {

    color: #003300;

    text-decoration: none;

    }

    }

    #nav .menu li a,

    #nav .menu li a:visited {

    color: #99ff99;

    font: normal 12px arial;

    line-height: 24px;

    padding: 0 6px;

    text-decoration: none;

    }

    }

    #nav #secondary-menu.menu li a,

    #nav #secondary-menu.menu li a:visited {

    color: #71716F;

    font-size: 11px;

    text-transform: none;

    }

    }

    h1.page-title {

    background: #336633;

    background: linear-gradient(left top, #003300, #ccff99);

    background: -moz-linear-gradient(left top, #003300, #ccff99);

    background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#ccff99));

    -pie-background: linear-gradient(left top, #003300, #ccff99);

    color: #e3e3e3;

    font-size: 130%;

    margin: 0 auto 10px;

    padding: 8px 0;

    text-align: center;

    text-shadow: 0 -1px 0 #333333;

    }

    }

    .featured_slider {

    -pie-background: linear-gradient(left top, #003300, #ccff99);

    background: #336633;

    background: linear-gradient(left top, #003300, #ccff99);

    background: -moz-linear-gradient(left top, #003300, #ccff99);

    background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#ccff99));

    margin-bottom: 20px;

    padding-bottom: 25px;

    padding-top: 15px;

    position: relative;

    width: 100%;

    }

    }

    .full-sized .block-button,

    .full-sized .block-button:visited {

    border-color: #003300;

    position: absolute;

    right: 10px;

    bottom: 10px;

    }

    }

    .block-button,

    .block-button:visited {

    background: url(images/bg-block-button.png) left bottom repeat-x #336633;

    background: -moz-linear-gradient(#003300, #ccff99);

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#003300), to(#ccff99));

    background: linear-gradient(#003300, #ccff99);

    border: 1px solid #336633;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    -moz-box-shadow: 0 0 5px #555;

    -webkit-box-shadow: 0 0 5px #555;

    box-shadow: 0 0 5px #555;

    color: #fff;

    cursor: pointer;

    display: block;

    float: right;

    font: bold 12px arial;

    margin: 10px 5px 5px;

    padding: 5px 15px 6px;

    position: relative;

    text-decoration: none;

    text-shadow: 0 -1px 1px #444;

    }

    .block-button:hover {

    background: url(images/bg-block-button-hover.png) left bottom repeat-x #336633;

    background: -moz-linear-gradient(#003300, #ccff99);

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#003300), to(#ccff99));

    background: linear-gradient(#003300, #ccff99);

    color: #fff;

    cursor: pointer;

    text-decoration: none;

    }

    }

    .sticky {

    background-color: #bdff8e;

    }

    }

    p code {

    background-color: #edffd6;

    }

    }

    /*

    #comments li.bypostauthor {

    background-color: #003300 !important;

    -moz-box-shadow: 0 0 5px #333333;

    -webkit-box-shadow: 0 0 5px #333333;

    box-shadow: 0 0 5px #333333;

    color: #FFFFFF;

    }

    #comments .children li.bypostauthor {

    padding: 10px 10px 0 60px !important;

    border:1px solid #003300;

    }

    #comments ol li.bypostauthor img.avatar {

    border-color:#003300;

    }

    }

    .sidebar h3 {

    -pie-background: linear-gradient(#003300, #ccff99);

    background: #003300;

    background: linear-gradient(#003300, #ccff99);

    background: -moz-linear-gradient(#003300, #ccff99) repeat scroll 0 0 transparent;

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#003300), to(#ccff99));

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#003300′, endColorstr=’#ccff99′); /* for IE */

    text-shadow: 0 -1px 0 #000000;

    }

    }

    .sidebar h3 a,

    .sidebar h3 a:visited,

    .sidebar h3 a,

    .sidebar h3 a:hover {

    color: #336633;

    }

Viewing 10 posts - 11 through 20 (of 25 total)

  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!