WordPress.org

Ready to get started?Download WordPress

Forums

Change color in Graphene theme (5 posts)

  1. Brannigans_Maw
    Member
    Posted 3 years ago #

    Hi all,

    Pretty new to wordpress.org and after looking through the forums here I've not found an answer that helps-sorry if there is one and I missed it!

    My site is http://www.wegameinyourface.com and I am using the Graphene theme. All I want to do is change all of the blue on there to another color (red)

    Any ideas? :(

    Thanks a million in advance

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    a lot of the blue parts are actual background images;
    find them in the /images folder of your theme.

    and most of the blue fonts are links:
    in style.css:

    a,
    a:visited {
    	color: #1772af;
    	text-decoration: none;
    }
    a:hover {
    	color: #FF0101;
    	text-decoration: none;
    }
  3. Brannigans_Maw
    Member
    Posted 3 years ago #

    Thank you for your quick reply!

    The font I dont have a problem with, I know how to change those.

    I've set up a child theme for it after looking on another support site. The person on there who had the same issue managed to fix it without the need to change any 'images' in an image editor as such. Here is their finished site: http://www.mostabear.info/

    So to test out I copied their exact code into my style.css in the child theme: which was:

    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;
    }

    and as you can see it has changed some of the font etc but not those big blue blocks. Is there something up with the code above?

  4. Brannigans_Maw
    Member
    Posted 3 years ago #

    Think I'm getting somewhere now! HAHA

    Managed to change it to gray, will try red now :)

  5. Brannigans_Maw
    Member
    Posted 3 years ago #

    Okely dokely, here's where I stand now:

    Managed to make some of the changes wanted-most of them in fact. It looks messy and that's cos it is, I just want to get the hang of changing this round before incorporating bground images etc. So currently it looks like this http://www.wegameinyourface.com

    and this is the code behind that:

    /*
    Theme Name:     Graphene Child
    Theme URI:      http: //wegameinyourface.com/
    Description:    Child theme for the Graphene theme
    Author:         Dan Tausney
    Author URI:     http: //example.com/about/
    Template:       graphene
    Version:        1.0
    */
    @import url("../graphene/style.css");
    
    .sidebar h3 {
     -pie-background: linear-gradient(#000000, #000000);
     background: #000000;
     background: linear-gradient(#ff605f, #ff0100);
     background: -moz-linear-gradient(#ff605f, #ff0100) repeat scroll 0 0 transparent;
     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff605f), to(#ff0100));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff605f', endColorstr='#ff0100'); /* for IE */
     text-shadow: 0 -1px 0 #000000;
    }
    
    .featured_slider{
     background: -moz-linear-gradient(left top , #000000, #000000) repeat scroll 0 0 transparent;
     background: -webkit-gradient(linear, left top, right bottom, from(#000000), to(#000000));
     background: linear-gradient(left top, #000000, #000000);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE8 */
     -moz-box-shadow: inset 0px 0px 1px 1px #FFFFFF;
     -webkit-box-shadow: inset 0px 0px 1px 1px #FFFFFF;
     box-shadow: inset 0px 0px 1px 1px #FFFFFF;
    }
    .featured_slider #slider_root {
     -moz-box-shadow: inset 0px 0px 1px 1px #FFFFFF;
     -webkit-box-shadow: inset 0px 0px 1px 1px #FFFFFF;
     box-shadow: inset 0px 0px 1px 1px #FFFFFF;
     background: none repeat scroll 0 0 #000000
    }
    .block-button, .block-button:visited {
     -moz-border-radius: 5px 5px 5px 5px;
     -webkit-border-radius:5px;
     border-radius:5px;
     border: 1px solid #CCCCCC;
     display:block;
     font:bold 12px arial;
     text-decoration:none;
     padding:5px 15px 6px 15px;
     color:#ffffff;
     text-shadow:0 -1px 1px #000000;
     margin-top:10px;
     position:relative;
     float:right;
     -moz-box-shadow: 0 0 0px #ffffff;
     -webkit-box-shadow:0 0 0px #ffffff;
     box-shadow:0 0 0px #ffffff;
     background:#ffffff;
     background: -moz-linear-gradient(#ff605f, #ff0100) repeat scroll 0 0 transparent;
     background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff605f), to(#ff0100));
     background:linear-gradient(#ff605f, #ff0100);
     -pie-background: linear-gradient(#ff605f, #ff0100);
    }
    .block-button:hover{
     text-decoration:none;
     color:#FFFFFF;
     cursor:pointer;
     background:#ff605f;
     background:-moz-linear-gradient(#ff605f, #ff0100);
     background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff605f), to(#ff0100));
     background:linear-gradient(#ff605f, #ff0100);
     -pie-background: linear-gradient(#ff605f, #ff0100);
    }

    Now as you can see my background is still a dull gray color. I want to change that, is there anywhere in the code above I have missed that would allow me to do so? Same would go for the white background of the sidebars.

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic