CSS an XML

i was looking back at issue 29 about search styling. there was a skin i seen www.dnnskin.net/nukeskin that used an image but with mouseover affect

the image is changed by css

within a div tag dnnbreader
.right a:
.right a:hover -21px

i am having a problem recreating that look, i am able to have the mouseover affect, but i still have the search text visable

i have being playing around with the skin.xml and the search token to no avail any ideas

The CSS code for that skin is:

#dnn_dnnSEARCH_txtSearch    { height:16px; position:absolute; top:4px; right:40px; padding:2px 0px 0 0px; background:#fff; width:140px; font:bold 9pt Arial, Helvetica, sans-serif; color:#777; border:1px #d7d5d8 solid}
#dnnbreader .right a:link,
#dnnbreader .right a:active,
#dnnbreader .right a:visited{ position:absolute; right:0px; border:0px; top:4px; width:25px; height:20px; display:block; border:0px; background:url(images/search-button.gif) left top no-repeat; overflow:hidden; margin-right:10px;}
#dnnbreader .right a:hover    { background:url(images/search-button.gif) 0 -21px no-repeat}


Basically they have placed a div tag around the search area, then in the CSS have specified for any links use an image and for any links when you hover over use an image in a different position.

Hi Lee

i was able to replicate the mouse over affect by using the css, the problem is that i still have the word search visible

i have checked the source output, it looks like a space is used rather than the word search for id dnn_dnnSEARCH_cmdSearch

more info on attached txt file

i am unable to do this using the xml file, is it something simple i am missing

Hello,

You can specify the text to be used for the search link using the following code in the skin.xml file, so perhaps you could add a space instead of the search text.

< Token >[SEARCH]< / Token >
 < Settings >
    < Setting >
         < Name >Submit< / Name >
         < Value >Search< / Value >
     < Setting >
< / Setting >