WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Changing search button icon

<< < (3/3)

Argos:
Your css has the wrong order, and has an error. Always declare highest levels first. So you start with the container and then the container elements. CSS=Cascading Style Sheets. So the styles shoulds cascade from top level to lower levels, because the lower levels inherit the higher levels. The order is very important. This should be your css:


--- Code: ---#search-bar {display:block;float:right;width:250px;}
#search-bar input {border:1px solid #c3b598;width:206px;height:28px;line-height:28px;padding:0 6px;margin:0;color:#888172;float:left;}
#search-bar .search-button {background: transparent url('../images/search-button.gif') no-repeat center;width:30px;height:30px;display:inline-block;float:right;}
#search-bar .search-button:hover {text-decoration:none;}
--- End code ---
And this your code:


--- Code: ---<?php if (SHOW_SEARCH) { ?>
<div id="search-bar">
<form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
  <input type="hidden" name="referrer" value="<?php echo defined('REFERRER_ID') ? REFERRER_ID : PAGE_ID; ?>" />
  <input type="text" name="string" />
  <input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?> ..." class="search-button"/>
</form>
</div>
<?php } ?>
--- End code ---

Roych:
It is now perfect!  :-D
Only had to empty the (value="<?php echo $TEXT['SEARCH']; ?> ...") so my button is now without a text.

Thank you very much for helping ;)
And thanx for the CSS hint ;)

R

Argos:
You're welcome, good to hear it's working now  :wink:

Navigation

[0] Message Index

[*] Previous page