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 2:04 am; edited 1 time in total

Matti

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

http://csshelp.forumotion.net/

ankillien

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

Tutorial Accepted

Jophy

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

http://www.socialtechforum.com/

FoNikos21


Registered Member
Registered Member
Great tutorial, thank you!

I only have a question...



How can I change the color of the highlightes text?

Nera

avatar
Technician
Technician
Post your forum URL please.


_________________

FoNikos21


Registered Member
Registered Member
It's harryworld.org!

FoNikos21


Registered Member
Registered Member
So...? Question

Nera

avatar
Technician
Technician
I can't see the search thingy as a guest on your forum. Try this. Add it to the top of your CSS and change the red to what ever you want.

Code:
.ipbform2 div.maintitle h3 {
    color: red !important;
}


_________________

FoNikos21


Registered Member
Registered Member
Thank you very very much!

CodeMaster

avatar
Registered Member
Registered Member
very nice tutorial

http://codehosting.co.cc

Thor

avatar
Registered Member
Registered Member
nice tutorial seems good thanks to good i will try it Very Happy

tommycoo

avatar
Registered Member
Registered Member
can u make to for punbb please Smile

Sponsored content


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