How to add a search box in the menu bar
Wednesday, December 01, 2010 | 
Posted by
ArtisTutor
1. .Log in to your dashboard--> layout- -> Edit HTML
2. .Click on "Expand Widget Templates"
3. Click "Ctrl+F" and find the following cod:
4. After upper code insert:
5. Find: /* end Menu */. Directly above it, add the following and adjust it according to where you want your form or box located on the page. Note, that if there are text elements involved, you can add more code to this as well with instructions on the font, size, color, etc.
Change the red values with your own to align the search box.
6. Save the template .
2. .Click on "Expand Widget Templates"
3. Click "Ctrl+F" and find the following cod:
<b:section class='art-nav' id='navsection' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList99' locked='true' title='Top Menu' type='LinkList'>
<b:includable id='main'>
4. After upper code insert:
<div class='art-Menu-Search'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") {this.value = "Cautare...";}' onfocus='if (this.value == "Cautare...") {this.value = "";}' size='20' style='background: #9bd2f8; border: 2px solid #9bd2f8' type='text' value='Cautare...'/>
<input id='search-btn' src='http://img641.imageshack.us/img641/3779/oldzoomoriginal.png' type='image' value=''/>
</form></div>
5. Find: /* end Menu */. Directly above it, add the following and adjust it according to where you want your form or box located on the page. Note, that if there are text elements involved, you can add more code to this as well with instructions on the font, size, color, etc.
div.art-Menu-Search
{
position:absolute;
z-index:0;
top: 1px;
left: 540px;
}
Change the red values with your own to align the search box.
6. Save the template .
Other Tutorials For You To See:
Making Top Menu Links open in new window in Artisteer blogs
05/05/2011 - 5 Comment
How to display 3 level subitem menus in Artisteer blogs
15/03/2011 - 5 Comment
How to add CSS vertical menu to your Art template
03/01/2011 - 1 Comment
Beautifull CSS menu and how to add it in Artisteer made template
10/12/2010 - 4 Comment
Add a beautiful CSS-jQuery mega menu on your blog (REQ)
29/11/2011 - 23 Comment
Nice vertical fixed navigation menu using jQuery and CSS
20/09/2011 - 14 Comment
Get Latest Updates For Free!
Subscribe via Email
2 comments
Hello!!
I REALLY love the look of the seach box in the menu bar like you have it here on this site, but this tutorial isn't working for me to accomplish it. Since it was written two years ago that may be why since Artisteer has had lots of updates since then.
Anyways the first code provided to find in this tutorial is no where in my coding (I have widgets expanded) ): Is there a code you can tell me instead of this one that would work? Any feed back would be very much appreciated! (:
~Haley
If you are using the version 3.1 to create template the code will look like this:
If you still can't find the code just search (CTRL +F) the words Top Menu and you will find it.
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.