Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > WarDB Seach Box
Mottie (MVP) 10/14/2008 1:43 PM EST : WarDB Seach Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster


WarDB Search Box

The WarDB site provides a search box that you can add to your site, but it doesn't work when you add it. So, because I have OCD, I worked on it until I made it work 

There is no need to add the javascript code from the WarDB search box page once you add this code.

The Code

<style type="text/css">
.searchbox120 { background: url(http://www.wardb.com/images/wardb120.png) no-repeat; position: relative; width: 120px; height: 100px; }
.searchbox120 div { position: absolute; top: 0px; height: 0px; cursor: pointer; width: 120px; height: 70px; }
.searchbox120 input {background: transparent; border: 0; color: white; width: 88px; position: absolute; top: 75px; left: 7px; }
.searchbox120 button { background: transparent url(http://www.wardb.com/images/btn_search.png) no-repeat !important; width: 58px; height: 57px; position: absolute; right: -24px; bottom: -20px; border: none; cursor: pointer; }
.searchbox120 button:hover { background: url(http://www.wardb.com/images/btn_search_hover.png) !important; }

.searchbox160 { background: url(http://www.wardb.com/images/wardb160.png) no-repeat; position: relative; width: 160px; height: 125px; }
.searchbox160 div { position: absolute; top: 0px; height: 0px; cursor: pointer; width: 120px; height: 70px; }
.searchbox160 input { background: transparent; border: 0; color: white; width: 103px; position: absolute; top: 97px; left: 14px; }
.searchbox160 button { background: transparent url(http://www.wardb.com/images/btn_search.png) no-repeat !important; width: 58px; height: 57px; position: absolute; right: -5px; bottom: -18px; border: none; cursor: pointer; }
.searchbox160 button:hover { background: url(http://www.wardb.com/images/btn_search_hover.png) !important;}
</style>
<div align="center">
<div class="searchbox">
<a href="http://www.wardb.com/"><div></div></a>
<input id="search-input" type="text" title="WarDB Search" maxlength="256" name="search_text" />
<button id="searchbx" />
</div>
</div>
<script type="text/javascript">
searchSize = 120;
searchNewWindow = false;
/*
******************************
Don't Change anything below
****************************** */
if (searchNewWindow) $(".searchbox").find("a").attr('target','_blank');
var temp = ( searchSize == 160 ) ? "searchbox160" : "searchbox120";
$(".searchbox").addClass(temp);
$("#searchbx").click( function(){ searchWin() });
$("#search-input").keypress(function(e){var key=(e.which)?e.which:e.keyCode;if(key==13){searchWin()}});
function searchWin () {
 var searchtxt = "http://www.wardb.com/search.aspx?search_text=";
 searchtxt += $("#search-input").attr("value");
 if (searchNewWindow) { window.open(searchtxt) } else { document.location.href = searchtxt; }
}
</script>

Customizing
  • The CSS has all the contents of the external javascript, so now you can change the CSS to make it fit your site.
    • The ".searchbox120" is for the 120 x 100 size box

    • The ".searchbox160" is for the 160 x 125 size box
  • The box size is changed by modifying this part of the code:

    searchSize=120;

    • Use 120 for the 120 x 100 size box

    • Use 160 for the 160 x 125 size box

  • To open the search results in a new window or same window, modify this part of the code:

    searchNewWindow=false;

    • false = Same window

    • true = New window
Edit (10/16/2008): Added an extra wrapper to center the box where ever you place it.
Edit (10/17/2008): Cleaned up the code and got rid of the "warDB" prefixes to standardize the code to use with other search types
Edit (10/18/2008): Fixed the opening two new windows problem
TopBottom

Avandius (New Admin) 10/15/2008 9:57 AM EST : RE: WarDB Seach Box
Avandius
Posts: 337
Fingers of Fury!

Freaking awesome Mottie! I dont mind you being OCD one bit! I've learned alot from you.

Anyhow i edited it and posted as you see here:
http://www.guildportal.com/Guild.aspx?GuildID=241533&TabID=2106231

However, i'd like to center it but not sure where to add the alignment command.

Also as you notice my RSS feed is screwing up. I'm not sure why it started doing this. As far as i know i didnt change anything other than some header/footer script for other things. Like WarDB tooltips.
TopBottom

539981318_Inactive (New Admin) 10/15/2008 8:23 PM EST : RE: WarDB Seach Box
539981318_Inactive
Posts: 24
Becoming Adept!

Very cool.  Wish they had something like this for their sister site, wowdb.com. Awesome job once again Mottie.
TopBottom

Mottie (MVP) 10/16/2008 6:54 AM EST : WowDB Seach Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster


WoWDB Search Box

*WOWDB No longer exists!*

This is pretty much the same code as above 

I had to make the images since WoWDB doesn't have a search box for some odd reason. But feel free to replace them with images of your own making to match your site.

The Code
<style type="text/css">
.searchbox120 { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowdb120.png) no-repeat; position: relative; width: 120px; height: 100px; }
.searchbox120 div { position: absolute; top: 0px; height: 0px; cursor: pointer; width: 120px; height: 70px; }
.searchbox120 input {background: transparent; border: 0; color: white; width: 88px; position: absolute; top: 75px; left: 7px; }
.searchbox120 button { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn_search2.png) no-repeat !important; width: 58px; height: 57px; position: absolute; right: -24px; bottom: -20px; border: none; cursor: pointer; }
.searchbox120 button:hover { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn_search_hover2.png) !important; }

.searchbox160 { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wowdb160.png) no-repeat; position: relative; width: 160px; height: 125px; }
.searchbox160 div { position: absolute; top: 0px; height: 0px; cursor: pointer; width: 120px; height: 70px; }
.searchbox160 input { background: transparent; border: 0; color: white; width: 103px; position: absolute; top: 97px; left: 14px; }
.searchbox160 button { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn_search2.png) no-repeat !important; width: 58px; height: 57px; position: absolute; right: -5px; bottom: -18px; border: none; cursor: pointer; }
.searchbox160 button:hover { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn_search_hover2.png) !important;}
</style>
<div align="center">
<div class="searchbox" align="center">
<a href="http://www.wowdb.com/"><div></div></a>
<input id="search-input" type="text" title="Search" maxlength="256" name="search_text" />
<button id="searchbx" />
</div>
</div>
<script type="text/javascript">
searchSize = 120;
searchNewWindow = false;
/*
******************************
Don't Change anything below
****************************** */
if (searchNewWindow) $(".searchbox").find("a").attr('target','_blank');
var temp = ( searchSize == 160 ) ? "searchbox160" : "searchbox120";
$(".searchbox").addClass(temp);
$("#searchbx").click( function(){ searchWin() });
$("#search-input").keypress(function(e){var key=(e.which)?e.which:e.keyCode;if(key==13){searchWin()}});
function searchWin () {
 var searchtxt = "http://www.wowdb.com/search.aspx?search_text=";
 searchtxt += $("#search-input").attr("value");
 if (searchNewWindow) { window.open(searchtxt) } else { document.location.href = searchtxt; }
}
</script>
Customizing
  • Please scroll up to the original post, the instructions are almost exactly the same, the difference is that everything in this post is names with a "wow" instead of a "war".
Edit (10/17/2008): Cleaned up the code, it's almost exactly the same as the WarDB code except for the site URL
Edit (10/18/2008): Fixed the opening two new windows problem
TopBottom

Mottie (MVP) 10/16/2008 6:59 AM EST : RE: WowDB Seach Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Avandiu,

I updated the original WarDB search box post to make it center... all I did was wrap the existing div that contains the input box with a "<div align=center></div>"

And Hellborn,

I converted it into a WoWDB search box as well 
TopBottom

Avandius (New Admin) 10/16/2008 9:18 AM EST : RE: WowDB Seach Box
Avandius
Posts: 337
Fingers of Fury!

Thank you Mottie.
TopBottom

cdude93 (New Admin) 10/17/2008 11:03 AM EST : RE: WowDB Seach Box

cdude93
Posts: 56
Posts With Wolves

wierd, when I search using the enter key, it pops up two new windows. Did I do something wrong with the code?
TopBottom

Mottie (MVP) 10/17/2008 11:35 AM EST : RE: WowDB Seach Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I'm planning on updating this code tonight... I've never had a problem with it opening two windows though - the script should only detect a single press and release of the keyboard key.

I updated both scripts above. There shouldn't be any change in functionality.. I just standardized it and cleaned it up because of my OCD LOL. BUT, now you should be able to change the URL and the images to work with any web site search... I'll work on those instructions soon.
TopBottom

Mottie (MVP) 10/18/2008 9:08 AM EST : RE: WowDB Seach Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Ok cdude93,

I found the problem with the code that made it open two new windows... I hope LOL.

Test it out for me please.
TopBottom

Mottie (MVP) 1/3/2011 10:30 AM EST : RE: RoM Seach Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

RoM Search Box

This code is for a Runes of Magic database search box for your site. Add the following code to a Free Form Text/HTML type widget while in HTML mode.



The Code
<style type="text/css">
.searchbox { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/rom-logo.gif) no-repeat; position: relative; width: 160px; height: 100px; }
.searchbox div { position: absolute; top: 0px; height: 0px; cursor: pointer; width: 120px; height: 70px; }
.searchbox input { background: transparent; border: #777777 1px solid; color: white; width: 125px; position: absolute; top: 53px; left: 5px; }
.searchbox button { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn-search.png) no-repeat; width: 31px; height: 31px; position: absolute; right: 5px; bottom: 20px; border: none; cursor: pointer; }
.searchbox button:hover { background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/btn-search-hover.png);}
</style>
<div align="center"><div class="searchbox" align="center">
<a href="http://www.runesdatabase.com/"><div></div></a>
<input id="search-input" class="tooltip" type="text" title="Search" maxlength="256" name="search_text" />
<button id="searchbx" />
</div></div>
<script type="text/javascript">
openNewSearchWindow = false;
siteLanguage = 'www'; // www = english, de = german, fr = french, etc.
/*
******************************
Don't Change anything below
****************************** */

if (openNewSearchWindow) { $(".searchbox").find("a").attr('target','_blank'); }
$("#searchbx").click( function(){ searchWin() });
$("#search-input").keypress(function(e){var key=(e.which)?e.which:e.keyCode;if(key==13){searchWin()}});
function searchWin () {
 var searchtxt = 'http://' + siteLanguage + '.runesdatabase.com/search?q=';
 searchtxt += $("#search-input").attr("value");
 if (openNewSearchWindow) { window.open(searchtxt); } else { document.location.href = searchtxt; }
}
</script>
Customizing
  • To open a search results in a new window, change the value of "openNewSearchWindow" in red to true. If false, the search results open in the same window.

  • You can change the search result site language to match your language. For english, leave it as 'www' (in blue). For other languages, copy the subdomain of the site (e.g. 'de' = german, 'fr' = french, etc).

  • If you have your own images you want to use, change the image urls (in orange). You will also most likely need to change the size and positioning of the images as well.

  • The only color in the css above is applied to the input area border (in blue). Adjust the color as desired.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%