StrangeBanana

How to use the graphic design created by StrangeBanana Style Generator

This is the detailed explanation on how to make use of the graphic design created by StrangeBanana. If you know a lot about HTML and CSS you will probably be able to figure out what to do just by looking at the HTML and CSS code on the generator page. If not, you will need to read this page. If you have no experience with HTML and CSS you will probably not be able to use the design.

In overview

The stylesheet in the HTML-head is what does most of the work. If you want to use the design on more than one page, you should move the stylesheet to an external file, and link to it from the individual HTML-pages. The HTML-pages should contain four main areas: A logo-area, a breadcrumb trail (for showing the position in the website), a menu consisting of individual menuitems, and a content area. Each of these elements are a <DIV> element with an id ("logo", "trail", "menu", and "content") except for the menuitems which are links with a class ("menuitem").

In details

Below is a more detailed explanation of what to do.

First, you need to get a design, and copy the stylesheet which was created by StrangeBanana:

  1. Go to the StrangeBanana Generator page and refresh it until you get a design you like
  2. Save the page on your computer by selecting File | Save or something like that in your browser
  3. Open the saved page in a text editor like Notepad or any other text editor you prefer
  4. Locate the tags <style> and </style> in the file. Select everything between these tags (excluding the actual tags) and copy it (this is the actual stylesheet (also known as css) generated by StrangeBanana).
  5. Create a new blank textfile and paste the copied text into it
  6. Save the new file as "stylesheet.css" and put it in the same folder as your HTML-file
  7. Put this line somewhere between the <head> and </head> tags of every one of your HTML-pages: <link href="stylesheet.css" type="text/css" rel="stylesheet">

Now your webpages know they should use the stylesheet created by StrangeBanana. However, to make your logo, menu and menuitems, and other parts of the page follow the design specified in the stylesheet, you need to create a few extra tags and maybe clean up your HTML a bit.

  1. Remove any tables which are used for lay-out of the page (e.g. <table>-tags, <td>-tags etc.)
  2. Put the logo/name of your website at the top of the page, and enclose it in these tags: <div id="logo"> and </div>
  3. If you have a breadcrumbtrail on your page, place it below the logo, and enclose it in these tags: <div id="trail"> and </div>. If you do not have or want a breadcrumb trail on your page, simply leave out this step.
  4. Enclose your menu in these tags: <div id="menu"> and </div>
  5. For each link in your menu, add this attribute in the link tag: class="menuitem"
  6. For the main content of your page, enclose it in these tags: <div id="content"> and </div>
  7. Remove all previous graphical formatting from your webpages like <font>-tags, color-attributes, tables used for lay-out etc.

If the above is hard to understand, you should take a lot at the HTML of the StrangeBanana Generator page, and notice how the DIV-tags (with class attributes) enclose smaller or larger parts of the page content. For another example you can look at any other page in the StrangeBanana website.

When finished, your HTML code should have a structure something like this: 

<head>
<link href="stylesheet.css" type="text/css" rel="stylesheet"> 
</head>
<body> <div id="logo">The name of your website</div>
<div id="trail">
<a href="home.aspx">Home</a> &gt;     
<a href="something.html">Something else</a> &gt; 
<a href="here.html">Here</a> 
</div>
<div id="menu">
    <a class="menuitem" href="about.html">These are links in
the menu</a> 
    <a class="menuitem" href="contact.html">Contact us</a> 
    <a class="menuitem" href="products.html">Products</a> 
  </div>
  <div id="content">
    Here goes the main content..
  </div>

If you are creating new webpages from scratch you can use the above code as a template.

If there are some elements you don't want on your website (for example if you don't need a breadcrumb trail or a menu), you can simply leave out these elements in the HTML code. In that case you should also delete the corresponding rules in the stylesheet, although the page will still work if you don't.

The HTML version used for the page is XHTML 1.0. If you want, you can change it to HTML 4.01 or any other version of HTML.

Link to this site

If you want to, you can link from your site to this site, to tell that you used StrangeBanana:

StrangeBananaStrangeBanana helped create this site

In that case, download the image and place it with your HTML-files - usually that can be done by right-clicking the image and selecting "Save image as..", and copy this code (containing the link) into your webpage's code: 

<a href="http://www.strangebanana.com" 
title="StrangeBanana creates random graphic webpage designs">
<img src="logomini.png" alt="StrangeBanana" 
style="vertical-align: middle"/>
StrangeBanana</a> helped create this site