Return to Support

Changing button color

Home Forums Graphene WordPress theme Support Changing button color

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1156
    Draco
    Member

    Interesting issue. Not a problem.

    I have child pages, that on the parent page a snapshot of the child pages appears at the bottom. The default “view page” button is in blue, but I want to change the background color of that view page button. To know more what I’m talking about, go here please. http://www.kenhoffman.net/enviroscience/?page_id=8

    Any help is very much appreciated. Thanks!

    #14743
    Kim
    Member

    Hi

    This is Your button right now:

    .block-button, .block-button:visited, .Button {
    background: -moz-linear-gradient(#2982C5, #1C5FA5) repeat scroll 0 0 transparent;
    border: 1px solid #1C5FA5;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #555555;
    color: #FFFFFF;
    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 #444444;
    }

    Edit: This is My grey button right now:

    .block-button, .block-button:visited, .Button {
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border: 0px 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 #333333;
    -webkit-box-shadow:0 0 0px #333333;
    box-shadow:0 0 0px #333333;
    background:#afaeae;
    background: -moz-linear-gradient(#afaeae, #6E6E6E) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#afaeae), to(#6E6E6E));
    background:linear-gradient(#afaeae, #6E6E6E);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afaeae', endColorstr='#6E6E6E'); /* for IE */
    -pie-background: linear-gradient(#afaeae, #6E6E6E);
    -moz-transition: color 0.25s ease-in-out 0s;
    }

    http://www.color-hex.com/color/3b5323

    You might change the color codes for Your need & insert the code in Custom CSS for aprove

    and then permanent in Child Theme – style.css 🙂

    Kim

    #14744
    Draco
    Member

    Thank you Kim!!! Worked just perfect!

    #14745
    cynthia
    Member

    Kim – I’ve followed your instructions and tried changing in both custom CSS and in the master style.css. and my View Post button is still blue – even though there is no blue coding left in there (that I know of!). When I scroll over it turns red for just a moment but goes back to blue. http://redcarpetrollout.com/

    Any help here is much appreciated! Thanks!!

    Cynthia

    #14746
    Syahir Hakim
    Keymaster

    Looks like it’s an IE-only problem. Make sure you have replaced all the colour codes with the red ones, particularly those in these lines:

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afaeae', endColorstr='#6E6E6E'); /* for IE */
    -pie-background: linear-gradient(#afaeae, #6E6E6E);

    You would also probably need to insert this for the red colour to be retained when the button is hovered over:

    .block-button:hover {
    background:#afaeae;
    background: -moz-linear-gradient(#afaeae, #6E6E6E) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#afaeae), to(#6E6E6E));
    background:linear-gradient(#afaeae, #6E6E6E);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afaeae', endColorstr='#6E6E6E'); /* for IE */
    -pie-background: linear-gradient(#afaeae, #6E6E6E);
    }

    Remeber to change the colour codes to red as well.

    #14747
    Kim
    Member

    Hi Cynthia

    What version of IE do You have installed?

    Last time I checked my grey button it worked in IE9 🙂

    Kim

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.