and have copied the FormDecorator.Telerik.css (and it's images) to my solution as Button.Telerik.css and have registered this file in my page.
I am able to change the font color when clicking the button (which makes me think I am overriding the embedded form decorator successfully) but am not able to make it bold even if I do the following:
/* START OF CLICKED BUTTON STYLES */
/* Im not sure what the below style is for, but it doesn't seem to affect anything when I comment it out.
I will leave it here in case someone works out what it does.*/
a.radfd_Telerik.radfd_Clicked
{
background-image: url(Button/ButtonSprites.gif);
background-position: 0 -42px;
background-repeat: no-repeat;
}
/* Clicking the button */
a.radfd_Telerik.radfd_Clicked
span, a.radfd_Telerik.radfd_Clicked:hover span
{
background-image: url(Button/ButtonSprites.gif);
color: Black;
font: bold;
font-family: 'Segoe UI' , 'Arial' , 'Helvetica' , 'sans-serif';
font-size: 8pt;
font-weight: bolder;
}
a.radfd_Telerik.radfd_Clicked
.radfdInnerSpan
{
background-position: 0 -63px;
background-repeat: repeat-x;
}
a.radfd_Telerik.radfd_Clicked
.radfdOuterSpan
{
background-position: right -42px;
background-repeat: no-repeat;
}
/* END OF CLICKED BUTTON STYLES */
Does anyone know how to make the font bold when clicking the button?
thanks,
Kellie
2 Answers, 1 is accepted
In your modified CSS you have used font: bold, and this is why the bold setting did not apply. In CSS, the font property is a shortcut, where you are allowed to set all available font properties and values, i.e:
font: bold italic strikethrough 12px Arial, Verdana, Sans-serif;
However, if you use only one property, it may not work:
font: bold;
In such cases you have to use the full font-weight property:
font-weight: bold;
In the case with form decorator, most of the layout-specific properties are declared in the base stylesheet (FormDecorator.css), not in the skin specific. If you do not want to set FormDecorator.css as an external resource (<add key="Telerik.FormDecorator.EnableEmbeddedBaseStylesheet" value="false"/>), you have to force set the bold value with the !important flag:
font-weight: bold !important;
However, I do not recommend this, as bold may trigger unwanted behaviors in different browsers that are hard (actually impossible to handle). This was the reason why, when we were developing FormDecorator have forced the default values of certain properties in the base stylesheet of that control.
Also, notice that the "bolder" value does not work with any browser. You have to stick to "bold".
Best wishes,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
Regarding the 'font: bold' setting - it was not meant to be in the post. I was trying everything to make it work.
Yes, '!important' fixed the problem for me.
Thanks for the warning about the bold behaviour, I will keep my eye on it.
Kellie