how to add a focus style to the office 2007 skin

[Marlou]

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

[Georgi Tunev]

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.

[Marlou]

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

 

[Georgi Tunev]

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.

[Marlou]

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

[Georgi Tunev]

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.

[Georgi Tunev]

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.

[Marlou]

Hi Georgi!

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

Regards,
Marlou