View Full Version: [S] Top Bar

RPG-Directory > Solved Support Topics > [S] Top Bar



Title: [S] Top Bar


Abhorsen Torrigan - May 29, 2006 10:21 AM (GMT)
Does anyone know how to create a top bar of seperate information, like the one here: [EM]??

With links, text etc?

Or like the one on this site?

Thanks.

ShinLi - May 29, 2006 10:30 AM (GMT)
Well, I can't help you with the creating part. Because if you want to create such things on forums you must have knowledge of coding. But I can point you into the right direction where you could get a code for getting a information box up at your forum.

On Invisionfree Skin Zone you can basically find every code for everything you need on your forum. (if you don't know where to find it, click on the IFSkinZone link in the copyright of this skin 'Celestia made by Nicola of the IFSkinZone'). There are different news boxes, and so different codes. Most codes at IFSZ have previews, so you can see how they would look on your forum.

Mostly you can add everything you like in these boxes, from links to telling who the staff members are, to scrolling text which tells the news etc. etc.

If you aren't a member of the IFSZ yet, you have to sign up there. After that you can search for the forum 'Modification Database'. In here are all different codes. And if you browse through them, I'm sure you will find a news box code which fits your board!

After you have a code, and have more questions, feel free to aks them here in this topic ^^

Abhorsen Torrigan - May 29, 2006 10:41 AM (GMT)
Thanks you ^_^ I'm already a member of the Skin Forum, so I'll mosey on over there.

Jess - May 29, 2006 10:18 PM (GMT)
If you want one like [EM], I've also coded out a few and moved things around a little to try and make it suitable for different forums. I did post the codes with screenshots over at RPG-M, but if you’re interested I’ve quoted it all below. :)

QUOTE
Modification Name: Information and Greeting Tables
Modification Description: A range of different table layouts for welcome notices, helpful links, and other useful things. A few different codes are below, with screenshots of what each looks like, as although they’re really all the same thing they look a little different. I am willing to edit coding to add in links if you need it, or to change colours (currently it’ll just be the same colour as your forum), as long as I have the time to do so when asked. Please note that I used a non-related skin when coding these, too, so I'm sorry if they look odd. :P
Preview: Test Board

Screenshot One: school based
This first one is probably most suitable for a Hogwarts or School-Based RPG, and is written as though for Hogwarts. This screenshot is here. The code is to go before the <% NAVIGATION %> code, and after the <% BOARD HEADER %>. A month/year notation might be helpful if added to the left or right columns (where ‘links’ and ‘staff members’ are at the minute), a switch user function, or notification of any awards and such, if you have them.
CODE
<table border="0" width="100%" cellspacing="0" cellpadding="6" style="border: 1px solid #505050; padding: 0px; border-top-width: 0px">
<tr>
<td width="100%" colspan="3" style="border: 1px solid #505050" valign="middle" class=maintitle height="29">
Welcome to Hogwarts
</td>
</tr>
<tr>
<td width="22%" valign="top" align="left" style="border: 0px solid #505050; border-right-width: 1px">

<b>Helpful Links</b>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>

</td>

<td width="58%" style="border: 0px solid #505050; border-right-width: 1px">

<!--webbot bot="HTMLMarkup" startspan -->
<marquee height="140" width="100%" onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="1" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=0);" align=center>

SCROLLING TEXT HERE

<br /><br />

SCROLLING TEXT HERE

<br /><br />

SCROLLING TEXT HERE

<br /><br />

SCROLLING TEXT HERE

</marquee>
<!--webbot bot="HTMLMarkup" endspan -->

</td>
<td width="20%" rowspan="2" valign="top" align="left" style="border: 0px solid #505050">

<b>Staff Members</b>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />

</td>
</tr>
</table>

<br /><br />

<table border="1" width="100%" cellspacing="0" cellpadding="6" style="border: 1px solid #505050; padding: 0px; border-top-width: 0px" height="79">
<tr>
<td width="100%" style="border: 1px solid #505050" colspan="4" valign="middle" class=maintitle height="29">
House Points
</td>
</tr>
<tr width="100%">
<td width="25%" style="border: 0px solid #505050; border-right-width: 1px" align="center">
<b><font color=darkred>

Gryffindor: 000

</font></b>
</td>
<td width="25%" style="border: 0px solid #505050; border-right-width: 1px" align="center">
<b><font color=darkgreen>

Slytherin: 000

</font></b>
</td>
<td width="25%" style="border: 0px solid #505050; border-right-width: 1px" align="center">
<b><font color=darkblue>

Ravenclaw: 000

</font></b>
</td>
<td width="25%" style="border: 0px solid #505050;" align="center">
<b><font color=FAD714>

Hufflepuff: 000

</font></b>
</td>
</tr>
</table>


Screenshot Two: normal forum
Very similar to the first layout, with the exception of this one having affiliates scrolling box rather than the House Points area. Here I would strongly recommend you think up ideas of what you’ll have in the sections where I have ‘links’ and ‘staff members’ before you put it up, along with a friendly welcome message. The table can be made shorter if necessary. :) (I am also aware my ‘affiliate buttons’ aren’t so good, but let’s ignore that. :P)
CODE
<table border="0" width="100%" cellspacing="0" cellpadding="6" style="border: 1px solid #505050; padding: 0px; border-top-width: 0px">
<tr>
<td width="100%" colspan="3" style="border: 1px solid #505050" valign="middle" class=maintitle height="29">
Welcome to "SITE NAME"
</td>
</tr>
<tr>
<td width="22%" valign="top" align="left" style="border: 0px solid #505050; border-right-width: 1px">

<b>Helpful Links</b>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>

</td>

<td width="58%" style="border: 0px solid #505050; border-right-width: 1px">

<!--webbot bot="HTMLMarkup" startspan -->
<marquee height="140" width="100%" onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="1" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=0);" align=center>

SCROLLING TEXT HERE

<br /><br />

SCROLLING TEXT HERE

<br /><br />

SCROLLING TEXT HERE

<br /><br />

SCROLLING TEXT HERE

</marquee>
<!--webbot bot="HTMLMarkup" endspan -->

</td>
 <td width="20%" rowspan="2" valign="top" align="left" style="border: 0px solid #505050">

<b>Staff Members</b>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />

</td>
</tr>
</table>

<br /><br />

<table border="1" width="100%" cellspacing="0" cellpadding="6" style="border: 1px solid #505050; padding: 0px; border-top-width: 0px" height="79">
<tr>
<td width="100%" style="border: 1px solid #505050" colspan="4" valign="middle" class=maintitle height="29">
Affiliates
</td>
</tr>
<tr width="100%">
<td style="border: 0px solid #505050" align="center">
<!--webbot bot="HTMLMarkup" startspan -->
<marquee width="100%" onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="3" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=0);" valign=center>

<A href="URL"><img src="http://img.photobucket.com/albums/v428/Jess-I-kar/affbutton.gif"></a>
&nbsp;&nbsp;&nbsp;
<A href="URL"><img src="http://img.photobucket.com/albums/v428/Jess-I-kar/affbutton.gif"></a>
&nbsp;&nbsp;&nbsp;
<A href="URL"><img src="http://img.photobucket.com/albums/v428/Jess-I-kar/affbutton.gif"></a>
&nbsp;&nbsp;&nbsp;
<A href="URL"><img src="http://img.photobucket.com/albums/v428/Jess-I-kar/affbutton.gif"></a>

</marquee>
<!--webbot bot="HTMLMarkup" endspan -->
</td>
</tr>
</table>


Screenshot Three: normal board
Again very similar to the last, only this time the affiliates’ box has been added as an addition to the first table rather than being moved down lower. :) If you wanted, I could also add the ‘House Points’ box back in here for you, meaning you’d have the House Points and affiliate “boxes”.
CODE
<table border="0" width="100%" cellspacing="0" cellpadding="6" style="border: 1px solid #505050; padding: 0px; border-top-width: 0px">
<tr>
<td width="100%" colspan="3" style="border: 1px solid #505050" valign="middle" class=maintitle height="29">
Welcome to "SITE NAME"
</td>
</tr>
<tr>
<td width="22%" valign="top" align="left" style="border: 0px solid #505050; border-right-width: 1px">

<b>Helpful Links</b>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>
<br />
-<a href="ENTER URL HERE">Link</a>

</td>

<td width="58%" style="border: 0px solid #505050; border-right-width: 1px">

<!--webbot bot="HTMLMarkup" startspan -->
<marquee height="140" width="100%" onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="1" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=0);" align=center>

SCROLLING TEXT HERE

<br /><br />

SCROLLING TEXT HERE

<br /><br />

SCROLLING TEXT HERE

<br /><br />

SCROLLING TEXT HERE

</marquee>
<!--webbot bot="HTMLMarkup" endspan -->

</td>
 <td width="20%" rowspan="2" valign="top" align="left" style="border: 0px solid #505050">

<b>Staff Members</b>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />
-<a href="ENTER URL TO PROFILE HERE">Name</a>
<br />

</td>
</tr>
</table>
<table border="1" width="100%" cellspacing="0" cellpadding="6" style="border: 1px solid #505050; padding: 0px; border-top-width: 0px" height="50">
<tr width="100%">
<td style="border: 0px solid #505050" align="center">
<!--webbot bot="HTMLMarkup" startspan -->
<marquee width="100%" onmouseover="this.stop()" onmouseout="this.start()" direction="left" scrollamount="3" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=0);" valign=center>

<A href="URL"><img src="http://img.photobucket.com/albums/v428/Jess-I-kar/affbutton.gif"></a>
&nbsp;&nbsp;&nbsp;
<A href="URL"><img src="http://img.photobucket.com/albums/v428/Jess-I-kar/affbutton.gif"></a>
&nbsp;&nbsp;&nbsp;
<A href="URL"><img src="http://img.photobucket.com/albums/v428/Jess-I-kar/affbutton.gif"></a>
&nbsp;&nbsp;&nbsp;
<A href="URL"><img src="http://img.photobucket.com/albums/v428/Jess-I-kar/affbutton.gif"></a>

</marquee>
<!--webbot bot="HTMLMarkup" endspan -->
</td>
</tr>
</table>


If you want to suggest any other layouts, feel free and I'll see what I can do -- or you can modify these codes yourself to come up with something suitable for you. As I've mentioned before, I'm willing to go through and add in links and such for you if need be, and don't mind changing colours around for you. (Please note that at the minute the colour of your forum will be the colour of the table, and the sections that say "Welcome to Hogwarts", "House Points", "Affiliates", etc. are just your maintitles. :)

If you do use any of these and need anything changing, let me know -- I love messing around with HTML and such anyways. It's like a very strange hobby. :wub:

miss_c_bong - May 30, 2006 03:55 AM (GMT)
wow, Jess! that's so sweet of you to post all that code. I especially like the slow scroll of the news. some sites have the scroll and it just flips on by so quickly, you hardly have a chance to read it.

Hmm, I may be borrowing the code for one of my sites.

:P:

Jess - May 30, 2006 06:49 AM (GMT)
Haha, thanks. :) I'm glad you like it! ^_^

Abhorsen Torrigan - May 30, 2006 09:19 AM (GMT)
Thank you so much! That's so nice of you to take the time to do that...:)

Wulf - May 30, 2006 09:25 AM (GMT)
You can sometimes have problems with the scroll box (marquee) stopping like that, It will sometimes start to jump around when your mouse is hovering over it. I prefer it when it slows down to a close stop. I think it looks more professional. (not slating you jess, its just something i prefer :) )

This is what is on Jess':

QUOTE
<marquee height="140" width="100%" onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="1" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=0);" align=center>


The bits in blue are what is different in my modification.

This should slow it down enough so you can read it easily:

QUOTE

<marquee height="140" width="100%" onmouseover=this.scrollAmount=1 onmouseout=this.scrollAmount=2 direction="up" scrollamount="2" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=0);" align=center>


The number in red is the speed on the scrolling when the mouse is over it.
The numbers in green is the speed of the scrolling when the mouse isnt hovering over it. You must change both of them to shange the speed.

Let me know if you dont understand anything :)

Jess - June 1, 2006 03:29 PM (GMT)
Thanks Wulf! (And no offence taken at all; we all have our preferences.) I'm going to assume this has been solved. ^_^

ShinLi - June 15, 2006 01:42 PM (GMT)
Your topic has been solved and moved to the 'Solved Support Topics' forum! Still have a question, or something isn't clear yet? PM an admin, gmod or cmod, and it will be moved back to the Support Center.




Hosted for free by InvisionFree