WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

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

Guest


Guest
Advanced Search on navbar!
For phpBB3 and Invision


The following very simple tutorial for forumotion phpBB3 and Invision boards will replace the Search pop-up on the navbar with what you see when you click "Advanced Search" in the current pop-up. If you have a PunBB or phpBB2 board, you can alter the Advanced Search page to work in the pop-up without additional CSS.

Step one is to add the following to the Site Description:
Code:
<script>$(function(){$('#search_menu').load('/search #main-content form');});</script>

This simple script will load the search form from the Advanced Search page into the pop-up.

You can actually stop here and the pop-up will work with all four forumotion board types, but it will be ugly. So, here's some basic CSS to make the new pop-up look more presentable on phpBB3 boards:
Code:
#search_menu {width:500px !important;}
#search_menu dt {width:35%; text-align:right;}
#search_menu dd {margin-left: 35%; text-align:left;}
#search_menu select {max-width:95%;}
#search_menu form[name="jumpbox"] {display:none;}

If you have an Invision board, use this CSS instead:
Code:
#search_menu {width:500px !important;}
#search_menu .ipbform2 dl dt {width:35%; text-align:right;}
#search_menu .ipbform2 dl dd {margin-left: 35%; text-align:left;}
#search_menu select {max-width:95%;}

If you change the width, make sure to keep the !important tag. Without it, the width will always be 350px.

That's it! Happy coding!

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.



Last edited by dion on Tue Dec 21, 2010 12:34 am; edited 1 time in total

Matti


Registered Member
Registered Member
Hi, dion
Thanks for this tutorial I test it on BB3 and i love it xD

ankillien


Administrator
Administrator
Thats out of the box Wink load method is pretty cool.

Tutorial Accepted

Jophy


Registered Member
Registered Member
Cool tutorial, Thanks for your contribution Wink

http://www.socialtechforum.com/

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

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