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

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

Matti
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

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

Tutorial Accepted

Jophy

Jophy
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...

Advanced Search on the navbar! (phpBB3 and Invision) Scaled.php?server=607&filename=56209761

How can I change the color of the highlightes text?

Nera

Nera
Technician
Technician
Post your forum URL please.

FoNikos21


Registered Member
Registered Member
It's harryworld.org!

FoNikos21


Registered Member
Registered Member
So...? Question

Nera

Nera
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

CodeMaster
Registered Member
Registered Member
very nice tutorial

http://codehosting.co.cc

Thor

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

tommycoo

tommycoo
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