Consolidated Search Code (Season Greetings to my fellow Creators)

[Glen Ace]

Hey Guys,

Here is a simple Season Greetings from me to all my fellow creators. I spent and enjoy sometime making this even on my busy schedule. I hope you enjoy using it in your network. BTW, you can read this initial post for this one in here.

Put this code inside your Text Box:

<div class="cn-form-wrapper"><form name="searchform" onsubmit="return dosearch();" id="cn-search-form"><span class="search-title">Search:</span><select name="sengines" class="cn-sengines"> <option value="/main/search/search?q=" selected="selected">All</option> <option value="/profiles/members?q=">Members</option> <option value="/profiles/blog/list?q=">Blog</option> <option value="/forum/topic/search?q=">Forum</option> <option
value="/video/video/search?q=">Video</option> <option value="/photo/photo/search?q=">Photos</option> </select><input name="searchterms" id="inputTextboxId"
value="Enter a Keyword" onfocus="watermark('inputTextboxId','Enter a Keyword');" onblur="watermark('inputTextboxId','Enter a Keyword');" type="text" /><input
name="SearchSubmit" value="" class="cn-form-submit" type="submit" /></form></div>

 

This code goes in your Custom Code (Analytics):

<script type="text/javascript">
function watermark(inputId,text){
var inputBox = document.getElementById(inputId);
if (inputBox.value.length > 0){
if (inputBox.value == text)
inputBox.value = '';
}
else
inputBox.value = text;
}
</script>

<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
</script>

 

This Code goes in your CSS/ Advance CSS:

<style>

/*Consolidated Search by Glen @ www.creatorsnook.com*/
#cn-search-form{
text-align:center;
width:800px;
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
margin: 5px 5px 4px;
min-height: 29px;
height:30px;
font-size: 20px;
padding:10px;
}

.search-title{
float:left;
padding-right: 5px;
}

.cn-sengines{
float:left;
background: none repeat scroll 0 0 #FFFFFF !important;
border: 1px solid #CCCCCC;
color: #403F41;
float: left;
font-size: 20px;
height: 29px;
margin: 0;
width: 200px;
}

#inputTextboxId{
float:left;
background: none repeat scroll 0 0 #FFFFFF !important;
border: 1px solid #CCCCCC;
color: #403F41;
float: left;
font-size: 20px;
height: 25px;
margin: 0;
width: 510px;
padding-left:5px;
}

.cn-form-submit{
background: url(http://creatorsnook.com/cn/img/search.gif) no-repeat scroll 0 0 #91BE0C;
border: 0px solid #4F4A4F;
border-radius: 0;
color: #FFFFFF!important;
float: left;
font-size:0;
height: 29px;
width: 33px;
margin: 0;
}

.cn-form-submit a, .cn-form-submit a:hover{
color:orange!important;
}

</style>

 

Note: If the box doesn't fit, simply adjust its width in the css to fit exactly in your network.

Please feel free to visit me in my network or even join if you like to.

Cheers!

- Glen

[Emmanuel Ace]

Sweet

[Ed]

Haven't checked this out properly yet but appreciate the share.

Thanks.

[Ed]

Have now checked this out properly and it's great. Thanks very much for sharing your hard work.

[Sandra Staats]

thank you very much

:)

[Rajaji]

Thanks for sharing. A great and attractive search box. 

[Dawn]

Glen, thx for the tip! Being new @ css, codes, etc, I appreciate every tip- I followed this one and this is what I came up with after adjusting the width and font in the advanced cc section. I don't use the new Design Studio...

I find it's eye-catching as a two-level search tool (imo) and would like to refine it, but I'm not that advanced yet in terms of what to do with code- esp. when it's for different column sizes. The layout I use is a 3-column; the middle one is max size 502 for anything, I think...

Any suggestions for improvement?:

Here's what I see after modifying codes:

This is the modified code in the "Advanced" section of the "Appearance" layout, under "Settings" :

/*Consolidated Search by Glen @ www.creatorsnook.com*/
#cn-search-form{
text-align:center;
width:490px;
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
margin: 5px 5px 4px;
min-height: 29px;
height:30px;
font-size: 15px;
padding:10px;
}

.search-title{
float:left;
padding-right: 5px;
}

.cn-sengines{
float:left;
background: none repeat scroll 0 0 #FFFFFF !important;
border: 1px solid #CCCCCC;
color: #403F41;
float: left;
font-size: 15px;
height: 29px;
margin: 0;
width: 160px;
}

#inputTextboxId{
float:left;
background: none repeat scroll 0 0 #FFFFFF !important;
border: 1px solid #CCCCCC;
color: #403F41;
float: left;
font-size: 15px;
height: 25px;
margin: 0;
width: 344px;
padding-left:5px;
}

.cn-form-submit{
background: url(http://creatorsnook.com/cn/img/search.gif) no-repeat scroll 0 0 #91BE0C;
border: 0px solid #4F4A4F;
border-radius: 0;
color: #FFFFFF!important;
float: left;
font-size:0;
height: 29px;
width: 33px;
margin: 0;
}

.cn-form-submit a, .cn-form-submit a:hover{
color:orange!important;
}

This is the Network:

ION Peguis

As I mentioned, I like the way it looks and thank you for sharing this tip   ; )         !

[Glenn Lynch]

It wont fit in my textbox yet a pretty cool idea is there a code to make it smaller?

[Glen Ace]

Hi Glenn, you can view the tutorial in my network here... just scroll to the discussions replies.

[Glenn Lynch]

Hey Glen, hehehe its weird writing a reply to someone with my same name. :)

Anyway

It says

Our apologies – this page was not found

What should I do?

[Glen Ace]

:) It's cool to have the same name... here's the link: http://ning.creatorsnook.com/forum/topics/consolidated-search-box

[Glenn Lynch]

Thanks I finally fixed it!

[Kwaku OwusuAfriyie]

This link is not working