How to make Button Font Bold on Click

3 posts, 0 answers
  1. Kellie
    Kellie avatar
    29 posts
    Member since:
    Feb 2009

    Posted 25 Feb 2009 Link to this post

    I have <add key="Telerik.FormDecorator.EnableEmbeddedSkins" value="false"/> in my webconfig
    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. Martin
    Admin
    Martin avatar
    585 posts

    Posted 26 Feb 2009 Link to this post

    Hi Kellie,

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kellie
    Kellie avatar
    29 posts
    Member since:
    Feb 2009

    Posted 26 Feb 2009 Link to this post

    Thank you.

    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
Back to Top