HTML Templates for Age of Legends

HomeAdventure LogWikiNPC TrackerForumMapsComments


Html templates for aol

EDIT: The following are all HTML based templates which I developed/borrowed before custom campaign-wide CSS was made available at the Portal. That said, if you are interested in customizing your site, you may wish to also check out the CSS Thread over at the forums.

Hello there. I’ve received a few inquires about how I’ve set up the custom HTML navigation menus for this site so I thought I’d create a page in which to display the HTML templates that I am using. But first, couple of caveats. First I’d like to point out that my own HTML skills are fairly rudimentary. I’ve benefited tremendously from the coding groundwork laid by other members of OP community. Much of what is featured here has been borrowed, stolen, and adapted from other sites (you can find credits to these individuals in my Acknowledgments. page). Second, I am using Textile 3 as my markup parser. I do not know if these templates will work with Textile 4, which is the default markup parser for your page (you can edit your markup parser in the “Edit Settings” section of your campaign site). Third, I used a graphics program known as GIMP to create the custom graphics for each of the templates below. While I am more than happy to share the HTML templates I am using, I would like to reserve the graphics I created for my own site. Hence, in order to make use of these templates you will need to have access to a graphics program such as Photoshop, GIMP, MS Paint etc. If you don’t already have such a program, I would highly recommend looking into GIMP which is a powerful graphics program similar to Photoshop. However unlike Photoshop, GIMP is absolutely FREE! You can download GIMP here.


Navigation menu template

Here is the template for the custom navigation menu just under my campaign banner. What I did here was create a new navigation menu graphic using GIMP. I then sliced this image into individual sections, one for each of the menu tabs (this was done before the new “items” tab was developed, hence the missing tab). Then I aligned these images together using HTML, linked these images to their corresponding pages, and raised the whole set of images above the standard navigation menu. OK, so below you will find the code I used to do all this. Basically it involved positioning the whole series of images, and then simply stacking the images one after the other. Note that I have removed the code for my own graphics so you will need to create your own graphics, upload them to the internet (e.g. to a image hosting site such as Photobucket or Imageshack), and insert the URL’s for these images into the HTML template below. Likewise, you will need to insert URL’s to each of the pages listed on your navigation menu in the corresponding sections of the template below (just copy and paste these URL’s in between the ”” where the template tells you to do so. Also, since your banner is probably a different size than my own, you will probably have to adjust the height and/or length of the tags as well (this info is listed under the first div tag that says “position:relative;top:-85px…”. I suggest copying and pasting this code into a test page before trying it out on an existing page.

<div style="position:relative;top:-85px;left:50%;margin-left:-365px;">
<a href="insert URL to your Home Page here"><img src="insert URL to your new Home Page tab image here" alt="Home"></a><a href="insert URL to your Adventure Logs page here"><img src="insert URL to your new Adventure Logs tab image here" alt="Adventure Log"></a><a href="insert URL to your Main Wiki page here"><img src="insert URL to your new Wiki page tab image here" alt="Wiki"></a><a href="insert URL to your Characters page here"><img src="insert URL to your new Characters tab image here" alt="NPC Tracker"></a><a href="insert URL to your Forums page here"><img src="insert URL to your new Forums tab image here" alt="Forum"></a><a href="insert URL to your Maps page here"><img src="insert URL to your new Maps tab image here" alt="Maps"></a><a href="insert URL to your Comments page here"><img src="insert URL to your new Comments tab image here" alt="Comments"></a></div>


Custom background borders

As you might already be aware, Micah and Ryan have recently updated the Portal to allow us to add background images to our sites (you can read about it here). Currently I believe there are nine different images to choose from but they may continue to add more. However, if you would like you can also add your own background images to your site by making use of a handy little property known as the “z-index”. Before continuing though, I should point out that the following HTML template really works best with seamless tiled images or patterns; if you stick a regular image URL in this template you’ll end up with a repeating image.

With that said, the z-index is a CSS property that allows you to overlap elements within HTML. By adjusting the numeric value of the z-index you can determine whether that element displays in front of or in back of another element (the default value is 0; higher values display in front of other elements whereas lower values display behind those elements). So by setting the z-index of your image to a lower value than that of the HTML code used to create the windows at your site, you can cause the image to display beneath those windows. In the code below I have set the z-index to -100, however theoretically it should still work at -1 (I chose a lower number just to be on the safe side). I’ll pass over an explanation of the rest of the code. Without further ado, here is the HTML template I am using (minus the image, which I would like to reserve for my site). To use it, insert the URL to the image you wish to use in between the ’’ of the code below. Then copy and paste this string of code into every page of your wiki.
<div style="width:100%;height:100%;background-image:url('insert background image URL here');position:fixed;top:0px;left:0px;z-index:-100;background-repeat:repeat;background-attachment:fixed"></div>



Navigation side bar

Here is the HTML Template that I am using for the Navigation Side Bar floating to the left of the screen (I borrowed and adapted this code from Rase Cidraen who initially introduced it in this thread). I have of course removed the URLs for the custom navigation graphics (which I would like to reserve for my own site), the actual wiki links themselves, and the names of those links, so you will need to insert URLs for these where the template tells you to do so. A word of advice. I would suggest using a single word (e.g. Geography, History etc) for your links. Also, when coming up with your own navigation graphics for these links, I would suggest using a font that is somewhat compact. Otherwise you run the risk of the graphics of the Navigation Bar being too long and running into your wiki. If you want to adjust the height of the Navigation Bar you can do so by adjusting the “top” px within the first div tag. If you need to adjust the width of the Navigation Bar, you can do so by adjusting the “left” px within the second div tag. Once you’ve got it to where you want it, just copy and paste the code for the Navigation Bar into every page of your wiki.
<div style="position:fixed;width:10px;top:50px">
<div style="position:relative;left:-140px;">

    <p><a href="insert wiki page URL here"><img src="insert navigation graphic URL here" alt="insert the name of the link here"></a><br />
    <p><a href="insert wiki page URL here"><img src="insert navigation graphic URL here" alt="insert the name of the link here"></a><br />
    <p><a href="insert wiki page URL here"><img src="insert navigation graphic URL here" alt="insert the name of the link here"></a><br />
    <p><a href="insert wiki page URL here"><img src="insert navigation graphic URL here" alt="insert the name of the link here"></a><br />
    <p><a href="insert wiki page URL here"><img src="insert navigation graphic URL here" alt="insert the name of the link here"></a><br />
    <p><a href="insert wiki page URL here"><img src="insert navigation graphic URL here" alt="insert the name of the link here"></a><br />
    <p><a href="insert wiki page URL here"><img src="insert navigation graphic URL here" alt="insert the name of the link here"></a><br />
    <p><a href="insert wiki page URL here"><img src="insert navigation graphic URL here" alt="insert the name of the link here">
</div>
</div>




Back

Home

HTML Templates for Age of Legends

Age of Legends arsheesh