user 7 position (no suffix)

This is an example of a linked list in the user 7 module position

user 8 position (_reverse)

This is an example of a standard list in the user 8 module position

  • here is a list item
  • and here is another list item
  • here is another list item

user 9 position (default)

This module is an example of how some text would style in the user 9 position with some links in the text as well.

Home Theme Style

this is the user 6 position, which has been placed here for image galleries or similar type modules, and looks best with module titles turned off.

inset module position

This is the inset module position showing you links and how it will style in Power Kite.

Theme Style PDF Print E-mail
Written by Lumo   
Tuesday, 08 July 2008 13:20

Theme Joomla Power Kite has a large selection of built in module and content styles. The content styles (Typography and style guide) below are for you to use with your content for your site - for example if you use tables in your site, then you can use the built in template content style for tables shown below so that the tables fit in to the theme of Power Kite.

The various module styles (module suffixes and positions) can be seen around the content styles on this page and are controlled by adding the relative suffix as displayed on this page to your module. All the Theme Joomla Template styles on this page are controled via pure CSS and XHTML, giving your site a good layout with minimal load time.

Content Styles

This is for a sample color note style. To style use < p class="style_one" > in your paragraph tag, and the paragraph will style as shown here

This is for a sample color note style. To style use < p class="style_two" > in your paragraph tag, and the paragraph will style as shown here

This is for a sample color note style. To style use < p class="style_three" > in your paragraph tag, and the paragraph will style as shown here

This is for a sample color note style. To style use < p class="style_four" > in your paragraph tag, and the paragraph will style as shown here.

This is for a sample color note style. To style use < p class="style_five" > in your paragraph tag, and the paragraph will style as shown here.

here is some code, to show how a <pre> tag will style. {background-repeat: repeat-x; background-color: #3A3A3A; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; height: 100%; color: #E0E0E0; }

Section Table Header
This is the Section Table Entry 1
This is the Section Table Entry 2
This is the Section Table Entry 1
This is the Section Table Entry 2
This is the Section Table Entry 1

This is a blockqoute - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

This is a list with links
This is a list without links
  • Morbi commodo, ipsum sed
  • Lorem ipsum dolor sit amet
  • Phasellus turpis ante
  • Orci magna rhoncus neque

This is Heading One (h1)

And this is a paragraph with a link in it, demonstrate how a paragraph will style in the main text area.

This is Heading Two (h2)

And this is a paragraph with a link in it, demonstrate how a paragraph will style in the main text area.

This is Heading Three (h3)

And this is a paragraph with a link in it, demonstrate how a paragraph will style in the main text area.

This is Heading Four (h4)

And this is a paragraph with a link in it, demonstrate how a paragraph will style in the main text area.

This is Heading Five (h5)

And this is a paragraph with a link in it, demonstrate how a paragraph will style in the main text area.

This is Heading Six (h6)

This is a highlight phrase.
Last Updated ( Tuesday, 22 July 2008 10:22 )
 

inset panel (right modules)

This is the inset panel, all modules placed in the right module position will go here.

This inset panel can also be aligned left or right of the main content area by changing the alignment setting in the template parameters.

right module (_simple)

This is a right module with no styling around it, with the suffix of _simple. This module also shows how links will look by default in the module area, plus below is a sample of how a linked list will look by default.

right module (_menu)

this is a paragraph with the class "notice" applied to it, giving it the style you see in this block.

this is a paragraph with the class "error" applied to it, giving it the style you see in this block.

outset panel (left modules)

This is the outset panel, all modules placed in the left module position will go here.

This outset panel can also be aligned left or right of the main content area by changing the alignment setting in the template parameters.

left module (_menu)

left module (_simple)

This is a left module with no styling around it, with the suffix of _simple. This module also shows how links will look by default in the module area, plus below is a sample of how a linked list will look by default.

This is the user 5 position, which has been styled for banner type modules (basic image modules) but can also be used for text modules, like here on this page.

advert 3 position (_simple)

This module is an example of how some text would style in the advert 3 position with some links in the text as well.