Friday, November 9, 2012

Cloudy Normal Button :hover fix

mouse_cursor_hoverMaybe you have noticed it, maybe not, but the hover effect of the Normal Button template in the APEX Cloudy theme does not  work in IE. It seems it hasn’t been implemented. So if you want the hover effect in IE, here is the CSS snippet you need to to add to your template:

.ie6 a.uButton:hover span,
.ie6 a.uButtonLarge:hover span,
.ie6 a.uButtonSmall:hover span,
.ie7 a.uButton:hover span,
.ie7 a.uButtonLarge:hover span,
.ie7 a.uButtonSmall:hover span,
.ie8 a.uButton:hover span,
.ie8 a.uButtonLarge:hover span,
.ie8 a.uButtonSmall:hover span,
.ie9 a.uButton:hover span,
.ie9 a.uButtonLarge:hover span,
.ie9 a.uButtonSmall:hover span {
background: url(#IMAGE_PREFIX#themes/theme_24/images/app_theme.png) 0 -400px repeat-x #DEDEDE;
} 

This will only affect IE and will load a slightly lighter gray gradient background on the hover state of the normal button.

Credits go to Shakeeb. Thanks!

2 comments:

  1. Hello Christian,
    First I would like to thank you for your post on apex listener forum on Mapping many domains to different apex app.

    I am using theme 24, and I need a red button similar to the one on theme 23, Do you know the CSS rules I have to use ?

    Best regards,
    Fateh

    ReplyDelete
    Replies
    1. Hi Fateh,

      You can try to create your own button with one of the online tools available and include it in your theme. I tried http://www.cssbuttongenerator.com/ to create a pure CSS3 button looking similar to the one in Theme 23. It only took a few minutes.

      Delete