Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Pat 56 posts 147 karma points
    Jan 25, 2012 @ 23:07
    Pat
    0

    Button font color won't change

    Trying to make the background of button be #333333 and the font to be #FFFFFF and also 22pt.

    The background changes color fine, the font-family is set right, but the color and the size just will not change.

    Any idea?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jan 25, 2012 @ 23:24
    Jan Skovgaard
    0

    Hi Pat

    If you inspect your html using firebug you should be able to see if the CSS changes you have made are specific enough to overwrite the default styling. If not try adding html as the first selector, which can possibly avoid that you use the !important rule, which can give all sorts of specifity issues etc.

    So try html #yourid{color:#333} for instance.

    Hope this helps.

    /Jan

  • Pat 56 posts 147 karma points
    Jan 25, 2012 @ 23:47
    Pat
    0

    Hi Jan,

    When I inspect the button element, on the style area the color and the font-size definitions have a line through them, so I guess this means they are being totally ignored?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jan 25, 2012 @ 23:50
    Jan Skovgaard
    0

    Hi Pat

    Yup, that's because the styles you're writing to overwrite the default styling is not being specific enough.

    What does the style definition for the default styling look like?

    And what does your definition look like?

    If you post it I might be able to pinpoint exactly what you need to do - as a last restort you can use !important but as mentioned it should be avoided since it can cause more trouble than it solves.

    /Jan

  • Pat 56 posts 147 karma points
    Jan 25, 2012 @ 23:55
    Pat
    0

    Hi Jan,

    Yes I heard it can be a bit annoying, so would like to avoid if possible.

    The css for the button is this:

    .button
    {  
        margin:0 15px 0 0;
        cursor:pointer;
        width: 590px;  
        height: 32px;  
        line-height: 16px;  
        text-decoration: none;  
        font-size: 24px;   <------- This line isnt working
        font-family: BlanchCondensed;  
        display: inline-block;  
        text-align: center;  
        position: relative;  
        -moz-border-radius: 7px;  
        -webkit-border-radius: 7px;  
        border-radius: 7px;     
        background-color:#f4f4f4;
        color:#FFFFFF;   <------- This line isnt working

     

    This is it in the XSLT file:

    <div class="ContactFormRow">
                        <div class="ContactFormCol">
                         <input id="submit"  type="button" value="wallop me" title="{RVContactForm.XsltExtensions:GetDictionaryItem('RV-ContactForm.labels.submit.title',$languageID)}" class="button" />
                          </div>
                    </div>

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jan 26, 2012 @ 00:18
    Jan Skovgaard
    0

    Hi Pat

    I suppose the .button styles in your above post is all created by you? What does the styles from the package look like? Are they also applied directly on the .button class? Or is it wrapped like .ContactFormRow .button{styles here} or?

    If so then try doing your delcaration like this

    html .ContactFormRow .button{
    your styles here
    }

    This should make your declaration more specific if my assumptions are correct.

    Hope this helps.

    /Jan

  • Pat 56 posts 147 karma points
    Jan 26, 2012 @ 10:00
    Pat
    0

    This was what it was like from the package, just changed the font and the size of the button really. Will give that a go, thanks.

  • Pat 56 posts 147 karma points
    Jan 26, 2012 @ 10:55
    Pat
    0

    Doesnt change, and actally resets the button style to a default windows style one.

  • Pat 56 posts 147 karma points
    Jan 26, 2012 @ 11:02
    Pat
    0

    Fixed, after searching firebug some more, the font size and color was being inherited from ContactForm input, rather than the button itself.

  • Pat 56 posts 147 karma points
    Jan 26, 2012 @ 11:07
    Pat
    0

    EDIT:

    Deleted color code from the input section above and is working now, was inheriting it.

     

    Thanks for help Jan

  • Eran 292 posts 436 karma points
    Jan 26, 2012 @ 20:13
    Eran
    0

    thanks Jan for the help

  • Bobby 3 posts 23 karma points
    Nov 01, 2012 @ 07:44
    Bobby
    0

    I also can not change button backgound color, anyone can help me?

    Thank you,

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Nov 01, 2012 @ 21:21
    Jan Skovgaard
    0

    Hi Bobby

    Have you tried the suggestions in the previous replies? If so could you try posting your CSS and the HTML generated? As mentioned previously it might be a specificity issue with the CSS.

    Looking forward to hearing from you.

    /Jan

  • Bobby 3 posts 23 karma points
    Nov 02, 2012 @ 04:11
    Bobby
    0

    Hi Jan,

    Thank for your respond, I was read previous suggestions but I don't understand where to change and what is need change because I don't know about code (only know copy/paste) so could you show me strong detail. I can change text font, text color and also can change button border but background color alway appear blue color.

    Thank you,

    Bobby

Please Sign in or register to post replies

Write your reply to:

Draft