how to add a focus style to the office 2007 skin

8 posts, 1 answers
  1. Marlou
    Marlou avatar
    27 posts
    Member since:
    Jun 2012

    Posted 21 Aug 2009 Link to this post

    Hi!

    I have radformdecorator which styles my buttons with the Office2007 skin. I want to add a focus style which is the same as the Office2007 mouseover style. How can is do this?

    Regards,
    Marlou

  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 21 Aug 2009 Link to this post

    Hello Marlou,

    I believe that the following KB will be of help:
    http://www.telerik.com/support/kb/aspnet-ajax/formdecorator/decorating-asp-net-wizard-s-steps.aspx


    Regards,
    Georgi Tunev
    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. Marlou
    Marlou avatar
    27 posts
    Member since:
    Jun 2012

    Posted 21 Aug 2009 Link to this post

    Hi!

    thanks for your reaction! i tried this

     

     

     

    a.rfdSkinnedButton:focus    
    {    
      background-position: right -42px !important;    
       
    }    
    a.rfdSkinnedButton:focus *   
    {   
      background-position: left -63px !important;  

    and that works there's only one thing the border of the button isn't closed. I tried to change the number of pixel but don't get it closed.
    Do you have any ideas?

    Regards,
    Marlou

     

  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 24 Aug 2009 Link to this post

    Hello Marlou,

    At this point, I cannot tell what might be the reason for this, but if you open a ticket and send me a small sample project where the problem could be reproduced, I will check it right away.


    Regards,
    Georgi Tunev
    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.
  6. Marlou
    Marlou avatar
    27 posts
    Member since:
    Jun 2012

    Posted 24 Aug 2009 Link to this post

    Hi Georgi!

    I've made the support ticket : 237303
    Meanwhile the problem changed a bit because i had an old version of the telerik dll in my project. I've changed this and now it works in ie8 but not in ie7 compatibility modus. Is there any way to delete the dotted border of the focus style? I've tried border:none; but that doesn't work :-(

    Regards,
    Marlou
  7. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 25 Aug 2009 Link to this post

    OK Marlou,

    I'll check the ticket and will write back to you.

    Regards,
    Georgi Tunev
    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.
  8. Answer
    Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 25 Aug 2009 Link to this post

    Hi again Marlou,

    We've just answered your support ticket. For convenience I am pasting the reply below - I believe it will be of help for other users as well:


    1. IE7 has a kind of a funny support for the :focus pseudo class of CSS, and this is why you were unable to get it working. For IE7 :active should be used in combination with your current selectors. Here is the new CSS for you:

    a.rfdSkinnedButton:focus,
    *+html a.rfdSkinnedButton:active

      background-position: Right -42px !important;

    a.rfdSkinnedButton:focus *,
    *+html a.rfdSkinnedButton:active *
    {
      background-position: Left -63px !important;
    }

    The *+html means that the selector will be evaluated only in IE7, and the setting will not affect other browsers.

    2. The focus dots can be removed with CSS - the outline property, however it is not working in IE7:

    .rfdSkinnedButton:focus
    {
     outline: none;
     margin: 1px !important;
    }


    If you need the focus dots removed in IE7 you can do this with JavaScript - loop through all <a /> elements that contain the .rfdSkinnedButton CSS class (the class of the wrapping element of the buttons when they are decorated with RadFormDecorator) and attach onfocus event handling a this.blur() function.



    Kind regards,
    Georgi Tunev
    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.
  9. Marlou
    Marlou avatar
    27 posts
    Member since:
    Jun 2012

    Posted 25 Aug 2009 Link to this post

    Hi Georgi!

    Thank you for watching! I've tried it and it all works fine! Thanks for your help.

    Regards,
    Marlou
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017