Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[CSS] Search Box [IPB Style]



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  nanako

avatar
Punbb Guru
Punbb Guru


Tutorial: Search Box [IPB Style]

Search Box, IPB style like ours
Thanks to IPS


--> Tutorials, tips and tricks <--
Search Box [IPB Style]



- Template
Add this thing to wherever you want to
Code:
[panda=html]<div id="search" class="attach">
<form method="get" action="/search?search_where=11" id="search-box">
<fieldset>
<label for="main_search" class="hide"></label>
<a href="/search" title="Advanced Search" accesskey="4" rel="search" id="adv_search" class="attach"></a>
<span id="search_wrap">
<input type="text" name="search_keywords" id="main_search" maxlength="128" value="Search..." onclick="if (this.value == 'Search...') this.value = '';" onblur="if (this.value == '') this.value = 'Search...';">
<span class="choice ipbmenu clickable" id="search_options" style="">Forums</span>
<input type="submit" class="submit_input clickable" value=""></span>
</fieldset>
</form>
</div>


- CSS
then CSS
Code:
.attach{float: right;}
.hide{display: none;}
#adv_search{width: 16px;
height: 16px;
background: url(http://community.invisionpower.com/filestore/public/style_images/master/advanced_search.png) no-repeat right 50%;
text-indent: -3000em;
display: inline-block;
margin: 4px 0 4px 4px;}
#search_wrap{position: relative;
background: white;
display: block;
padding: 0 26px 0 4px;
height: 26px;
line-height: 25px;
-moz-border-radius: 3px 4px 4px 3px;
border-radius: 3px 4px 4px 3px;
border-radius: 3px 4px 4px 3px;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
min-width: 230px;}
#main_search {margin-top: 5px;
font-size: 12px;
border: 0;
padding: 0;
background: transparent;
width: 130px;
outline: 0;}
#search_options {font-size: 10px;
height: 20px;
line-height: 20px;
margin: 3px 3px 3px 0;
padding: 0 6px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #EAEAEA;
display: inline-block;
float: right;
max-width: 80px;
text-overflow: ellipsis;
overflow: hidden;}
#search .submit_input {background: #7BA60D url(http://community.invisionpower.com/filestore/public/style_images/master/search_icon.png) no-repeat 50%;
text-indent: -3000em;
padding: 0;
border: 0;
border: 1px solid #7BA60D;
display: block;
width: 26px;
height: 26px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
-webkit-box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 0 rgba(255, 255, 255, 0.2);}


- Preview






© PunBB Design



If you have any questions related to this topic create a topic with the following title:
Search Box [IPB Style]

Powered by PunBB
Currently 0 users have thanked nanako for this post:

2
Offline

  J0k3R^

avatar
Pemanently Banned
Pemanently Banned
worked fine, thank u very much Smile

Powered by PunBB
Currently 0 users have thanked J0k3R^ for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum