U bevindt zich hier: Home » Demo Content » Demo Articles

Demo Articles

Typography Examples

This tutorial page features all the typography available with the template. If you would like to read more detailed information on inserting the included typography into your content, check out the Typography Tutorial.

This is a ComponentHeading

This is a Contentheading

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

This is a H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur pharetra leo sed nisl. Nunc vel nisi. Aliquam nulla. Etiam at est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus.

This is a H2 Header

This is a H3 Header

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla.

This is a H4 Header

Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus. Donec nunc magna, posuere eget, aliquam in, vulputate in, lacus. Sed venenatis. Donec nec dolor vitae mauris dapibus ullamcorper. Etiam iaculis mollis tortor.

This is a H5 Header

Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat sodales sed. Aenean hendrerit fringilla sem, et tincidunt libero ornare at. Sed venenatis pretium mauris sed vehicula.

Blockquote Example

This is a blockquote, you will want to use the following formatting: <blockquote><p>....</p></blockquote>. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

DropCap Styles

PPraesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

You will need to use the following formatting: <p class="dropcap"><span class="dropcap">P</span></p>

Number Examples

1You will need to use the following formatting: <p class="dropcap"><span class="dropcap">1</span></p>

2You will need to use the following formatting: <p class="dropcap"><span class="dropcap">2</span></p>

3You will need to use the following formatting: <p class="dropcap"><span class="dropcap">3</span></p>

List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Emphasis Styles

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="color">...</em>

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold">...</em>

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold2">...</em>

Inset Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Inset Right TitleYou will need to use the following formatting: <span class="inset-right"><span class="inset-right-title">....</span> ... some content ... </strong>Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Inset Left TitleYou will need to use the following formatting: <span class="inset-left"><span class="inset-left-title">....</span> ... some content ... </span>Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Important Emphasis Styles

Sample Title This is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important"><span class="important-title">Sample Title</span>...some content...</div>

Notice Styles

This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the following html: <div class="alert"><div class="typo-icon">....</div></div>

This is a sample of the 'approved' style. Use this style to denote very important information to your users. To use this use the following html: <div class="approved"><div class="typo-icon">....</div></div>

This is a sample of the 'attention' style. Use this style to denote very important information to your users. To use this use the following html: <div class="attention"><div class="typo-icon">....</div></div>

This is a sample of the 'camera' style. Use this style to denote very important information to your users. To use this use the following html: <div class="camera"><div class="typo-icon">....</div></div>

This is a sample of the 'cart' style. Use this style to denote very important information to your users. To use this use the following html: <div class="cart"><div class="typo-icon">....</div></div>

This is a sample of the 'doc' style. Use this style to denote very important information to your users. To use this use the following html: <div class="doc"><div class="typo-icon">....</div></div>

This is a sample of the 'download' style. Use this style to denote very important information to your users. To use this use the following html: <div class="download"><div class="typo-icon">....</div></div>

This is a sample of the 'media' style. Use this style to denote very important information to your users. To use this use the following html: <div class="media"><div class="typo-icon">....</div></div>

This is a sample of the 'note' style. Use this style to denote very important information to your users. To use this use the following html: <div class="note"><div class="typo-icon">....</div></div>

This is a sample of the 'notice' style. Use this style to denote very important information to your users. To use this use the following html: <div class="notice"><div class="typo-icon">....</div></div>

This is a sample of the 'quote' style. Use this style to denote very important information to your users. To use this use the following html: <div class="quote"><div class="quote-l"><div class="quote-r">....</div></div></div>

Pre Example

This is a sample <pre>...</pre> tag:

div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}

div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

Tutorials and Guides

Written Tutorials

Video Tutorials

Template Configuration

To configure the template, go to Extensions → Template Manager → rt_grunge_j15. There you will find a list of all the template parameters. You can control many aspects of the template here. If you mouseover the labels/names of each parameter, a description will appear via tooltip to outline what each parameter does.

IE6 PNG Fix

The template has an integrated PNG fix for IE6 that allows transparent PNG32 images to show, as intended, in the IE6 browser. All you need to do is add class="png" to the element such as the change in the following example:-

<img src="images/sample1.png" alt="sample" />

Change to

<img src="images/sample1.png" alt="sample" class="png" />

Installation Instructions

This guide covers the basics of installing a template.

Video Tutorial Currently Available! Launch the Joomla Template Installation Video Tutorial now!

Downloading the necessary files

To install the template, you will need one of the following files:

Grunge Template (Standalone) rt_grunge_j15.tgz - This is the standalone template file that you use to install into Joomla.
Grunge Template (Bundle) rt_grunge_j15-bundle.tar.gz - This is the bundle package, containing the template and Gantry library files, that you use to install into Joomla.

Only use the Bundle package on a clean install, or on an install that does NOT have the Gantry library already installed - /components/com_gantry. Use the standalone package if the Gantry library is already present.

There are other files that you may wish to download that accompany the release, but are not required for the template to work.

Grunge Source PNG(s) rt_grunge_j15-sources.zip - This contains all the Adobe® Fireworks PNG source files for the template, and if applicable, the logo font.

Step 1 - Using the Joomla installer

Login into the Joomla administrator (http://yoursite.com/administrator)
Go to Extensions → Install/Uninstall
Select the browse button and find rt_grunge_j15.tgz or rt_grunge_j15-bundle.tar.gz
Click Upload & Install

The template is now installed.

Step 2 - Making Grunge Default

Login into the Joomla administrator (http://yoursite.com/administrator)
Go to Extensions → Template Manager
Find rt_grunge_j15
Select the radio icon to its left
Click Default in the top right button menu

The template is now default and will appear as your site theme.

Pagina 17 van 18

Start
Vorige
9
10
11
12
13
14
15
16
17
18
Volgende
Einde

Demo Articles

Demo Articles

Typography Examples

This is a H1 Header

This is a H2 Header

This is a H3 Header

This is a H4 Header

This is a H5 Header

Blockquote Example

DropCap Styles

List

Emphasis Styles

Inset Styles

Important Emphasis Styles

Notice Styles

Pre Example

Tutorials and Guides

Written Tutorials

Video Tutorials

Template Configuration

IE6 PNG Fix

Installation Instructions

Downloading the necessary files

Step 1 - Using the Joomla installer

Step 2 - Making Grunge Default

Zoeken

Dag bezoeker!

Menu

Alles over rozen

Veelgestelde vragen

Openingstijden

Adres Stadskwekerij

Van der Zalm Tuinen