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

Changing search button icon

<< < (2/3) > >>

Argos:
The class "search-button" must be declared somewhere, and will probably have a picture as background, and maybe some other styling. This is really not a WB question, it's just basic HTML/CSS stuff.

nibz:
In the dutch forum i posted a solution wich uses a full background and makes the button transparant

Code:

--- Code: ---<style type="text/css">
#w2b-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form name="search" id="w2b-searchform" action="<?php echo WB_URL; ?>/search/index.php" method="get">
    <input type="text" name="string" id="s" class="search_string" value=""/>
    <input type="image" name="submit" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

--- End code ---


I used the code from http://www.way2blogging.org/2011/06/add-fresh-and-beautiful-search-boxes-to.html and converted it to a usable WB string

Roych:
Hi thx for help

I'we tried but Im out of ideas I know its a html-CSS problem but somehow dont find an anwser anywhere.
I would like this search bar make working already so I can go on.  :?

Im posting the CSS of the button and HTML of the form.

HTML:

--- Code: ---<div id="search-bar">

                        <input type="text" name="s" id="s" value="Search ..." />

                        <a href="#" class="search-button">&nbsp;</a>

                    </div>
--- End code ---

And 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 a.search-button {
    background: transparent url('../images/search-button.gif') no-repeat center;
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
}
#search-bar a.search-button:hover { text-decoration: none; }
--- End code ---

I have tried almost anything but Im out of ideas Im not a coder but understand some! But this is out of my league.

Someone please help ;)
Thx!

Argos:
Your code is wrong, to begin with. Try this:


--- 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" class="search-button"/>
</form>
</div>
<?php } ?>
--- End code ---

And remove the "a" from the styling for the button. So the new button styles will be:


--- Code: ---#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 ---

Roych:
Yees great it works ;)
 Thx Argos ;)

I had to change the codes a bit so that the looks is now alright.

--- Code: ---  <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" value="<?php echo $TEXT['SEARCH']; ?> ..." />
  <input type="submit" name="submit" class="search-button"/>
</form>



                    </div>
--- End code ---

CSS:

--- Code: ---#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 a.search-button:hover {
text-decoration: none;
}



#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;
}
--- End code ---

Now everithing looks fine only now I see (submit text) on a button and if I change it or delete it in code the style is broken any idea?

Navigation

[0] Message Index

[#] Next page

[*] Previous page