Intro
This topic should explain everything about the Revora Network Bar, the horizontal drop-down menu that you see on almost every page of the Revora Creative Network, its divisions and projects.
Purpose
The purpose of the network bar is to unite the various sites and projects of Revora beyond the forum. Because we use a lot of different domains and subdomains, it's not always obvious that a project is actually a part of Revora. The network bar solves that problem by allowing every single site on this network to be accessed from every other site. Furthermore, it allows people from the outside to quickly get an overview over the whole network and find the projects and sites they might be interested in without having to know our organisational structure. It also encourages users to have a look around and discover projects they might otherwise never notice
Please note that this is a hosting requirement. If you are a hostee and you do not add the network bar, your hosting here can be terminated! This doesn't apply to people who were given webspace but don't use it (i.e. don't have a site at all).
Basic
Adding the Network Bar
To add the network bar to your site, locate the <body> tag and add the following code directly below:
<script type="text/javascript" src="http://bar.revora.net/bar.js" async="true"></script>
If you do not use a content management system or PHP to include shared markup parts, you will have to add the bar to every HTML document (page) of your site. Do not use <frame> tags to include a header unless you really know what you're doing, or it will cut off the drop downs and mess up the navigation.
Internet Explorer is known to have a problem with the bar if you do not have a DOCTYPE declaration on the first line of your page. So make sure your site's code looks something like this:
Line 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Line 2: <html>
Line 3: <head>
...
Line 6: </head>
Line 7: <body>
Line 8: <script type="text/javascript" src="http://bar.revora.net/bar.js" async="true"></script>
...
If you have any problems with this or don't have any clue what I was just talking about, post here and we will take a look at it for you. No, this is not intended for the capable but lazy ones who think they can't be bothered to do it themselves.
Getting your site added to the Network Bar
For your site to be linked in the network bar, you first need to add the network bar to every page of your site. Once that is done, you can post your request to be added here. We will then verify that the bar works as intended and add your site to the right category afterwards.
If you do not plan to create a site but only use your forums for your project, you can still post here, saying so. We will then add a link to your project's subforum instead.
Advanced
This section is more technical and directed at the people who know their way around creating websites, especially CSS.Skinning the Network Bar
The network bar supports custom stylesheets. The default stylesheet that is used can be found at http://bar.revora.net/rnb_default.css. You can use it as a base for creating your own stylesheets; I've tried to explain the different elements in the comments in that file. Apart from the default, there are more "official" stylesheets located at http://bar.revora.net/styles/. You're free to use those as well (I might add more if I feel bored).
If you want to create your own, keep in mind that some portions of the bar might be edited and updated from time to time and we can't make sure that 'unofficial' styles don't break on that occasion, so you'll have to look after maintaining it yourself. Alternatively you can send me your style and we might add it to the officially supported styles.
To tell the bar to use a specific stylesheet, you need to define the styleLink variable before including the bar. Example:
<script type="text/javascript">
// <![CDATA[
var styleLink = 'http://bar.revora.net/styles/rnb_frontpage.css';
// ]]>
</script>
<script type="text/javascript" src="http://bar.revora.net/bar.js" async="true"></script>
Along with the new stylesheet you may wish to use your own icons on the bar. The bar also supports an imageLink variable that tells it to use a different path for images. The standard set should work with both. Just make sure the icons resemble the game or company logos so that people are still able to recognise them as such. Example:
<script type="text/javascript">
//<![CDATA[
var imageLink = 'http://example.com/rnb_uberawesome/images/';
//]]>
</script>
<script type="text/javascript" src="http://bar.revora.net/bar.js" async="true"></script>
The names for the images are given, you can find them at http://bar.revora.net/images/sections/ and http://bar.revora.net/images/extra/.
Edited by Phil, 23 September 2010 - 04:53 PM.
