What makes my Bull-Berry Bush Template so special?

This template is made to be easily customizable. If you want to make the accent colors your own open up one of the color style sheets. The color style sheets only contain the accent colors and the rest remains in basic_structure.css. Soon I will make a dynamic PHP script on my website the automatically makes you a template that looks like this but with what ever accent color you want. Happy Customizing!

The text in this template adapts very well and when you change the text size (CTRL + Scroll Wheel) the screen still looks fine. Almost all of the tags have been taken care as shown on the home page.

If this template is downloaded at least 300 times I will make it into a Wordpress template. Also if this template is downloaded 400 times I will add extra goodies like dynamic color changing and more.

This website template is released as an 'open source' design (under the Creative Commons Attribution 2.5 license), which means that you are free to download and use it for anything you want (including modifying and amending it). All I ask is that you leave the 'design by Alec Gorge' link in the footer of the template, but other than that...

This standards compliant template is written entirely in XHTML 1.1 and CSS, and can be validated using the links in the footer.

You can view my other 'open source' template designs here.

Bull-Berry Bush Template

This template was randomly named by putting two random words together with a hyphen. However, you probably don't care about that though so here is some examples.

Heading Higharchy

H1

H2

H3

unordered list

List Item 1
List Item 2
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- Sub List Item 4
List Item 3
List Item 4
List Item 5

ordered list

List Item 1
List Item 2
1. Sub List Item 1
2. Sub List Item 2
3. Sub List Item 3
4. Sub List Item 4
5. Sub List Item 5
List Item 3
List Item 4

definition list

Definition Title 1: Definition Definition 1
Definition Title 2: Definition Definition 2
Definition Title 3: Definition Definition 3
Definition Title 4: Definition Definition 4

special text

Italics

The quick brown fox jumps over the lazy brown dog.

Bold

The quick brown fox jumps over the lazy brown dog.

Underlined

The quick brown fox jumps over the lazy brown dog.

blockquote

"If you go flying back through time, and you see somebody else flying forward into the future, it's probably best to avoid eye contact."

--Jack Handey

Image with text

To make a border on mouse over add this javascript to the head of the page:


		<script type="Javascript">

		function imageborder(name)

		{

		name.style.margin='3px';

		name.style.border='4px gray double';

		}

		function noimageborder(name)

		{

		name.style.margin='7px';

		name.style.border='0px black solid';

		}

		</script>

The add this bit of javascript that degrades well in browser that have javascript turned of by not doing anything. You make the border appear in this image by writing this code:

<img src="lemur.jpg" 
		alt="Lemur" class="left" name="lemur1" onmouseover="imageborder(lemur1)" 
		onmouseout="noimageborder(lemur1)" />

Now if you want to do it to another image change the name attribute to whatever you want. Just put the value of the name attribute in between the parenthesis. So if you changed the name attribute above to Monkey this would be the resulting code:

<img src="lemur.jpg" alt="Lemur" class="left" name="Monkey" onmouseover="imageborder(Monkey)" 
		onmouseout="noimageborder(Monkey)" />

Also, if you want to align the picture left or right just make the class left for left and right for right.

aligned left

This is a picture aligned left so that the text flows around it.

Vivamus gravida purus porttitor velit. Maecenas cursus tellus lacinia odio. Sed vel arcu sit amet tellus interdum tincidunt. Vivamus volutpat viverra diam. Pellentesque tincidunt mauris. Maecenas consectetuer nibh quis felis. Integer auctor aliquet leo. Suspendisse malesuada turpis id diam. Nam tincidunt interdum augue. Nulla iaculis, pede dictum consequat sodales, felis mi mattis nulla, vitae ornare mi libero vel est. Vivamus gravida purus porttitor velit. Maecenas cursus tellus lacinia odio. Sed vel arcu sit amet tellus interdum tincidunt. Vivamus volutpat viverra diam. Pellentesque tincidunt mauris. Maecenas consectetuer nibh quis felis. Integer auctor aliquet leo. Suspendisse malesuada turpis id diam. Nam tincidunt interdum augue. Nulla iaculis, pede dictum consequat sodales, felis mi mattis nulla, vitae ornare mi libero vel est.

aligned right

Sample Form

^ Back to top

Side Nav

Extra Links

Customize