1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    13
    Vote Rating
    -1
    wyjzsw is an unknown quantity at this point

      0  

    Default Font on the Button Style

    Font on the Button Style


    Hello all,

    I am new to Sencha Designer 2. I have a difficult time to style the font on the button. I could style the background of the button but not font (neither family nor size.) If you have any experience, could you please help me on this?

    the button id: "buttonTry". So in the css file, here is what I write (highlight the font setting part):

    Thanks a lot~~
    ===========

    #buttonTry {
    -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
    box-shadow:inset 0px 1px 0px 0px #f29c93;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    filter:progidXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color:#fe1a00;
    -moz-border-radius:29px;
    -webkit-border-radius:29px;
    border-radius:29px;
    border:1px solid #d83526;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:25px;
    font-weight:bold;
    padding:15px 40px;
    text-decoration:none;
    text-shadow:1px 1px 0px #b23e35;
    }#buttonTry:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
    filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background-color:#ce0100;
    }#buttonTry:active {
    position:relative;
    top:1px;
    }

  2. #2
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Moore, Oklahoma
    Posts
    486
    Vote Rating
    15
    Mthor will become famous soon enough

      0  

    Default


    add a style in your css


    .styledButton .x-btn-inner {
    color: #1a4bbb; !important;
    font-size: 12px; !important;
    }

    then just add styledButton to the cls: in the designer

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    13
    Vote Rating
    -1
    wyjzsw is an unknown quantity at this point

      0  

    Default


    Thank you, Mthor!

    I did what you told.
    1) put the following code in css.
    .styledButton .x-btn-inner {
    color: #1a4bbb; !important;
    font-size: 12px; !important;
    }

    2) add
    styledButton to the cls of button in designer.
    But nothing changed, neither color nor fontsize..

    Did I do anything wrong?

Thread Participants: 1