Fix Button Text Color in Triton Lite

  • Unknown's avatar
    ginab13 · Member ·

    Hi – I found a button generator that created some nice CSS buttons for my Triton Lite webpage. BUT, even though I’ve made the text WHITE, it comes out GRAY on my page. I have changed the color of the drop shadow to WHITE to counter the gray, but I do not like how that looks.

    Could you please look at the CSS below and tell me where I’m going wrong in setting my text color to WHITE?

    Here is the button generator I used:

    http://www.bestcssbuttongenerator.com/

    Thank you!

    .page-button {
    -moz-box-shadow: inset 0 1px 5px -4px #dcecfb;
    -webkit-box-shadow: inset 0 1px 5px -4px #dcecfb;
    box-shadow: inset 0 1px 5px -4 #dcecfb;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0.05,#cc202e),color-stop(1,#cc202e));
    background: -moz-linear-gradient(top,#cc202e 5%,#b8232f 100%);
    background: -webkit-linear-gradient(top,#cc202e 5%,#b8232f 100%);
    background: -o-linear-gradient(top,#cc202e 5%,#b8232f 100%);
    background: -ms-linear-gradient(top,#cc202e 5%,#b8232f 100%);
    background: linear-gradient(to bottom,#cc202e 5%,#b8232f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#b8232f’,endColorstr=’#cc202e’,GradientType=0);
    background-color: #cc202e;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #84bbf3;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    padding: 14px 50px;
    text-decoration: none;
    text-shadow: -1px 2px 0 #ffffff;
    }

    .page-button:hover {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0.05,#cc202e),color-stop(1,#bddbfa));
    background: -moz-linear-gradient(top,#cc202e 5%,#b8232f 100%);
    background: -webkit-linear-gradient(top,#cc202e 5%,#b8232f 100%);
    background: -o-linear-gradient(top,#cc202e 5%,#b8232f 100%);
    background: -ms-linear-gradient(top,#cc202e 5%,#b8232f 100%);
    background: linear-gradient(to bottom,#cc202e 5%,#b8232f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#b8232f’,endColorstr=’#cc202e’,GradientType=0);
    background-color: #cc202e;
    }

    .page-button:active {
    position: relative;
    top: 1px;
    }

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

  • staff-happychia · Staff ·

    The following rule that applies to the links (a tags) in the widgets in the footer, determines the text color on the button. 

    .site-footer .widget a {
    color: #979797;
}

    Change the color to white as following: 

    .site-footer .widget a {
    color: #fff;
}
  • Unknown's avatar
    ginab13 · Member ·

    Thanks! This fixed the footer problem – and I was able to fix the page button issue by turning the text black… but the primary sidebar still shows the gray text when I’ve indicated white in the CSS. I tried using the convention above (.site-primary-sidebar .wiget), but that did not work. Any suggestions? Thanks again!

  • staff-happychia · Staff ·

    The color of the text (actually, it is a link, “a” tag) on the primary sidebar buttons is coming from the following rule:

    .widget-area .widgets ul li a {
color: #6D6D6D;
}

    So change the color to white (#fff) or black(#000) as you wish :-)

    .widget-area .widgets ul li a {
color: #000;
}

    I am glad to help but if you are keen to learn, here are some support documents to get started:

    How to Find Your Theme’s CSS
    An Intro to CSS, or How to Make Things Look Like You Like

  • Unknown's avatar
    ginab13 · Member ·

    (Huge sigh of relief) It worked! Thank you so very much. I am also very keen to learn, so I appreciate the links! I also appreciate your assistance. Have a great week.

  • staff-happychia · Staff ·

    You are welcome.

    Happy blogging :-)

  • The topic ‘Fix Button Text Color in Triton Lite’ is closed to new replies.