Copy link to clipboard
Copied
I am a neophyte with code and css and normally work with Muse. But I am currently trying to customize the appearance of the search module so that it works with the website it will be serving. I have accomplished a large part of what I've been attempting, but have hit a snag in removing the default search button (CAT_Search). I've placed the image I want to use no problem, but it is contained in some weird gray beveled box with the original 'Search' text overlapping my image.
I have been making the rounds of tech support, tutorials, and every documented article on the search module and can find nothing that address this specific issue. Any help would be greatly appreciated! I am enclosing the what I've done so far below.
Thanks!
Paula
<style type="text/css">
body form {
width: 163px;
height: 48px;
form-top-right-radius: 5px;
form-bottom-right-radius: 5px;
background-image: url(http://corehog.businesscatalyst.com/images/search.png);
}
.search-box {
color: #999966;
font-family: lato;
font-style: normal;
font-weight: 100;
width: 86px;
height: 24px;
border: none;
max-width: 86px;
opacity: 0%;
max-height: 24px;
margin-left: 12px;
margin-top: 12px;
margin-bottom: 12px;
}
.cat_button {
width: 32px;
height: 24px;
border: none
background-color: none;
background-image: url(http://corehog.businesscatalyst.com/images/search-button.png);
margin-left: 12px;
margin-top: 12px;
margin-right: 20px;
margin-bottom: 12px;
}
</style>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/lato:n1:default.js" type="text/javascript"></script>
<form name="catsearchform87352" method="post" action="/Default.aspx?SiteSearchID=3752&PageID=/http://corehog.businesscatalyst.com/search-results.html"><div><input class="search-box" type="text" name="CAT_Search" id="CAT_Search" /><input class="cat_button" type="submit" value="Search" /></div></form>
{module_searchresults}