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.
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?
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.
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.
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.
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.
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?
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
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?
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
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>
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
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.
Doesnt change, and actally resets the button style to a default windows style one.
Fixed, after searching firebug some more, the font size and color was being inherited from ContactForm input, rather than the button itself.
EDIT:
Deleted color code from the input section above and is working now, was inheriting it.
Thanks for help Jan
thanks Jan for the help
I also can not change button backgound color, anyone can help me?
Thank you,
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
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
is working on a reply...