zappa 1.5

Register

User 1-1

This is 1 of 4 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this position to mimic 4 module positions using only 1
Read more...

User 1-2

This is 1 of 4 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this position to mimic 4 module positions using only 1
Read more...

User 1-3

This is 1 of 4 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this position to mimic 4 module positions using only 1
Read more...

User 1-4

This is 1 of 4 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this position to mimic 4 module positions using only 1
Read more...

Did You Know?

Did you know Zappa can be setup as one, or two columns? Whatever look you are trying to achieve Zappa is flexible enough to do it.

test poll

This Joomla! installation was ....
 

Client Login



Normal module

This is a normal module and it shows how a module will look if no suffix is set to the module at all.

Add Icon styles

You can add additional suffixes to make the modules use an icon before the text, view the examples below to see how this works.

h3login

This module has the suffix set to "-sfx h3login" which is what adds the icon before the title.

h3navi

This module has the suffix set to "-sfx h3navi" which is what adds the icon before the title.

h3polls

This module has the suffix set to "-sfx h3polls" which is what adds the icon before the title.

h3online

This module has the suffix set to "-sfx h3online" which is what adds the icon before the title

h3contact

This module has the suffix set to "-sfx h3contact" which is what adds the icon before the title

yellowalert

redalert

greenalert

Add Backgrounds

Web 2.0 is all about color, so what joy would zappa be without loads of color options to play with. Zappa comes included with a total of 30 module suffix styles that can be mixed and matched to your liking.

16 of these are header backgrounds as you see below - It is also possible to add a preset background colors and images to the module header or even combine it with one of the above icon style headers suffixes.

h3-glossy-green

h3-glossy-silver

h3-glossy-beige

h3-glossy-blue

h3-glossy-pink

h3-glossy-orange

h3-candi-green

h3-candi-orange

h3-candi-red

-sfx h3-candi-blue-2

h3-candi-purple

h3-candi-blue-1

h3-candi-pink

h3-candi-beige

h3-beige-grad

Add Module BG's

You can also alter the backgrounds of the modules content using a suffix. You can combine this with any suffix shown above.

litebg

This module has the suffix of "-sfx litebg" to alter the background

brownbg

This module has the suffix of "-sfx brownbg" to alter the background

dark-bluebg

This module has the suffix of "-sfx dark-bluebg" to alter the background

orangebg

This module has the suffix of "-sfx orangebg" to alter the background

lite-bluebg

This module has the suffix of "-sfx lite-bluebg" to alter the background

greenbg

This module has the suffix of "-sfx greenbg" to alter the background

redbg

This module has the suffix of "-sfx redbg" to alter the background

User5 Intelli 1-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User5 Intelli 2-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User5 Intelli 3-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User6 Intelli 1-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User6 Intelli 2-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User6 Intelli 3-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User7 Intelli 1-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User7 Intelli 3-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User8 Intelli 1-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User8 Intelli 2-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User8 Intelli 3-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User9 Intelli 1-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User9 Intelli 2-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

User9 Intelli 1-3

This is 1 of 3 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this module position to mimic 3 module positions using only 1

About Snapshot

This page is a "snapshot" view of ALL of the elements of this template, displayed on one page. All module suffixes and styles, module positions and style/typography guide.

Web 2.0 is all about color, so what joy would zappa be without loads of color options to play with. Zappa comes included with a total of 30 module suffix styles that can be mixed and matched to your liking.

Template Snapshot PDF Print E-mail
Written by John Doe   
Wednesday, 20 February 2008 10:16

The below styles are to be used as a guide for how to structure your content in order to best utilize the built in typography features we have added to this template. Also, by using the typography guidelines, you will ensure that your content is added semantically and keeps a consistent theme throughout.

This is for a sample note. To style use < p class="color-green" > Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.

This is for a sample note. To style use < p class="color-blue" > Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.

This is for a sample note. To style use < p class="color-orange" > Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.

This is for a sample note. To style use < p class="color-pink" > Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.

This is for a sample note. To style use < p class="color-grey" > Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.

this is a paragraph with the class "error" applied as follows: < p class="error" >

this is a paragraph with the class "tips" applied as follows: < p class="tips" >

this is a paragraph with the class "info" applied as follows: < p class="info" >

p.color-green {
	display: block;
	padding: 8px 10px 8px 10px;
	margin: 15px 0;
	border-top: 3px solid #98cb00;
	border-bottom: 3px solid #98cb00;
	background: #ffffff;
	color: #010101;
}
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 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 the class "li-style1"
  • Morbi commodo, ipsum sed
  • Lorem ipsum dolor sit amet
  • Phasellus turpis ante
  • Orci magna rhoncus neque

 This is a list with the class "li-style2"
  • Morbi commodo, ipsum sed
  • Lorem ipsum dolor sit amet
  • Phasellus turpis ante
  • Orci magna rhoncus neque
This is a list with the class "li-style3"
  • Morbi commodo, ipsum sed
  • Lorem ipsum dolor sit amet
  • Phasellus turpis ante
  • Orci magna rhoncus neque
 This is a list with the class "li-style4"
  • Morbi commodo, ipsum sed
  • Lorem ipsum dolor sit amet
  • Phasellus turpis ante
  • Orci magna rhoncus neque

This is Heading One (h1)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Two (h2)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Three (h3)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Four (h4)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Five (h5)

This is a normal paragraph - Aliquam aliquet,e st a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volupat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem.

This is Heading Six (h6)

This is a highlight phrase.

This is a sample textarea
Text inside text area
This is a sample button
This is a input box
Last Updated ( Wednesday, 01 October 2008 13:58 )
 
Home Template Snapshot

User 2-1

This is 1 of 4 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this position to mimic 4 module positions using only 1
Read more...

User 2-2

User 2-3

This is 1 of 4 modules published in this module position, these modules are intelligent, meaning they calculate the number of modules in this position to mimic 4 module positions using only 1
Read more...

User 2-4