Innovative Menu and BB Code 3.5.x

Innovative Menu and BB Code

By:

This mod allows your choice of:

• Several new navbar css base menus with many different styles.
• Simply a new menu if you wish to keep your current navbar.
• Custom Download BB Code
• Custom Multiple Download Formats BB Code
• You think it up, create it and go!

THERE ARE 17, I REPEAT 17 HIGH QUALITY DIFFERENT STYLED MENUS TO CHOOSE FROM!!!!

Example Image as a Navbar or similar...


Example Image as a BB Code...


I found this while browsing: http://www.cssplay.co.uk/ as I was tinkering as usual . It was rather simple to add as Menu/Navbar/BB Code for VBulletin and did not take much time to make it work in vB via the {param} tags etc!

Credit for the Code goes to Stu Nicholls, the creator of the code!

Time to install: 1-2 mins

Instructions:

• Download the .txt install file if you wish to have a backup for future reference or install via details below!

You can replace your Navbar w/ this CSS Menu script featured on:

Site Name: CSS Play
Site Address: http://www.cssplay.co.uk/
Terms and Conditions:

These menus can be used subject to the following terms and conditions.

1. You may use these menus in your 'paid projects' for client websites.
2. You may use these menus as part of an application interface.
3. You may use these menus on personal and commercial websites.
4. You may NOT place these menus on another site for others to download.
5. You may NOT redistrubute or resell these menus.
6. Users agree not to remove or edit the credit notice within the stylesheet, or claim that these menus are their own.

Which have all been met, I'm simply providing the link to CSS Play regarding the Horizontal Menus, you can use any of the menus on this page to achieve the desired affect or "modification" to your board either by hard coding or using BB Code via one of the following options!

Menus --> http://www.cssplay.co.uk/menus/pro_horizontal.html

Install instructions for Navbar or Download Bar BB Code included in the download install.txt

1. For Hard Coding as Navbar or other:

1a. Download the desired menu
1b. Unzip the menu (Using Pro Menu #1 as an example --> http://www.cssplay.co.uk/menus/zip/pro_one.zip)
1c. Right-Click and open the index.html file in notepad++ (or other html editor.. Notepad & Linux = ugghhh) or plain old notepad should suffice.

In the open file Find: (It's different for each one so be careful not to get ahead of yourself )

<style type="text/css">
/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_one */

.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

</style>

Copy and paste in a blank open notepad or wordpad

Now in the same file Find:

<ul class="menu1">
<li><a href="#nogo"><b>Home</b></a></li>
<li class="current"><a href="#nogo"><b>Privacy Policy</b></a></li>
<li><a href="#nogo"><b>Products</b></a></li>
<li><a href="#nogo"><b>Where to find us</b></a></li>
<li><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>

Copy and paste this right below the above code you copied, remove the space and that will be the code used. The first part you copied tells the menu how to look, the second part as you can tell is your links .

In the bottom part of the code Replace the #nogo with the internal site URL or the URL to another site, Replace the Text between each <b>Replace this text</b> w/ the name of the link i.e. what it stands for or what it will link to .

If you wish to customize the link text colors in the top part simply replace the html color code with a new one...

Example Snippet -->

.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa;

You want to change the color via the color:#aaa part... You can google "html color chart" or "html color code" and find one, the # code can be simply #FFF or #FF0099 up to six digits, find one w/ the colors shown and change the color code of the CSS.

1d. Now for navbar replacement simply login to your admincp, go to styles manager and open up your navbar template. Find the code for your navbar by searching for parts of the link descriptions via your status bar in your browser on another tab or browser window so you can refresh as you test or finalize. Replace the code with the code below!

Now simply save & reload the template and then refresh your open tab or window of your forum to see the affect. Remember that sometimes you can insert the code in between the code that represents the other parts of your forums and slip the code in there .

If you wish to keep you current Navbar i.e. you have a plain one and no custom template but want one of these menus as eye candy or as an actual useful interface then you could simply insert it above in the Header template or simply in forum_display template or well surf your templates and tinker!


2. For Soft Coding as a BB Code Download Bar or other:
2a. I used this, but tricked it in a sense to just take a file name via the {param} tags and then it filled in the rest and made the custom map in a .zip file ready for download!

Example Snippet -->

<li><a href="http://www.tournamentgamingworld.com/test/vbtest/{param}.exe"><b><font color="#FFFF00">.exe</font></b></a></li>

(Remember what I said above, dependant upon which menu you choose to use as a DL bar, each menus code is different so be careful not to get ahead of yourself )

AdminCP --> Custom BB Codes --> Add New BB Code

Title: dlb
Tag: dlb
Replacement:

<style type="text/css">

/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_two */

.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu2 li {float:left;}
.menu2 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu2 li.current a {color:#fff; background:url(button3.gif);}
.menu2 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu2 li a:hover {color:#fff; background:#000 url(button4.gif);}
.menu2 li a:hover b {background:url(button4.gif) no-repeat right top;}
.menu2 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu2 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

</style>

<ul class="menu2">
<li class="current"><a href="#nogo"><b>TGW Map Downloader</b></a></li>
<li><a href="http://www.tournamentgamingworld.com/forum/forumdisplay.php?f=12345"><b>Maps</b></a></li>
<li><a href="http://www.tournamentgamingworld.com/forum/index.php"><b>Forums</b></a></li>
<li><a href="#nogo"><b>File Name: <font color="#FFFF00">{param}</font></b></a></li>
<li class="current"><a href="#nogo"><b>Download Links <font color="#FFFF00"> > </font></b></a></li>
<li><a href="http://www.tournamentgamingworld.com/test/testvb/{param}.exe"><b><font color="#FFFF00">.exe</font></b></a></li>
<li><a href="http://www.tournamentgamingworld.com/test/testvb/{param}.zip"><b><font color="#FFFF00">.zip</font></b></a></li>
<li><a href="http://www.tournamentgamingworld.com/test/testvb/{param}.rar"><b><font color="#FFFF00">.rar</font></b></a></li>
</ul>

Use {option} = NO

*The files have to be in your forums ROOT folder, this will make it NOT visible in AdminCP as that is another folder i.e. admincp folder BUT it will display FINE in the forums via FireFox and Internet Explorer! IF you place them within a folder and then put in in your forum root remember to redo the links in the code to reflect the location of the images in the new folder!

Now use the tags [dlb]File Name Here![/dlb]

*Experienced Users can take the code and manipulate it in other ways to achieve the desired result!

See below for Screenshots!

Enjoy!

TheLastSuperman
http://www.innovationbyinstinct.com