We know this page is so busy it makes your head spin but take a moment to grasp what you are looking at. We have turned on nearly all available Joomla and typography styles as well as module styles available in this template, meaning you can apply your own effects to get your site looking just the way you want it
This page is broken down into 3 areas to help you navigate
Default Joomla Styles
The styles below are the default Joomla Styles that are reused throughout Joomla and 3rd party components to achieve a consistent look and feel throughout your website.
This is a Joomla! Component Heading
The style above shows how all component headings are styled, this is easy to edit in the css, just search in the css for the style .componentheading and replace the color with any color you like.
This is a Joomla! Content Heading
The style above shows how all Content Page Headings are styled. The color will change depending on the theme color that is chosen on multi color templates.
Default Joomla Table Style:
The below table is the default way that tables generated by Joomla or 3rd party components and / or modules will look. Examples of this are on the weblinks page, or newsfeeds page within the default Joomla demo content.
| Section Table Header | Author | Hits |
| Change is inevitable, except from a vending machine. | Administrator | 8 |
| Error, no keyboard. Press F1 to continue. | Administrator | 6 |
| Why do psychics have to ask you for your name? | Administrator | 6 |
| Why is abbreviation such a long word? | Administrator | 8 |
| Plan to be spontaneous, tomorrow. | Administrator | 10 |
Read more links
Below you will see a read more link which is able to scale with the contents, this is using the default Joomla class and can be applied to any button using the "readon" class.
Article Separators
Below this paragraph, you will see a line that seperates it from the content below it. This is called an "article seperator" in Joomla and is used throughout Joomla to seperate content in pages and articles. You can add this in your content by using the same "xhtml" output as the css is already there, as follows:
Typography and Style Guide
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. This style guide will give assist you in keeping the consistancy with your website by using commonly used tags to display the content.
This is a Heading 1
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
This is a Heading 2
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
This is a Heading 3
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
This is a Heading 4
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
This is a Heading 5
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
This is a Heading 6
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
Drop Cap
This is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA edenite bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words.
Code
#top h1 a {
width: 250px;
height: 80px;
display: block;
}
This paragraph is enclosed within a PRE tag.
Lists Styling
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
Simple Unordered List
- Unordered List Item 1
- Unordered List Item 2
- Unordered List Item 3
- Unordered List Item 4
- Unordered List Item 5
Simple Ordered List
- Ordered List Item 1
- Ordered List Item 2
- Ordered List Item 3
- Ordered List Item 4
- Ordered List Item 5
Fancy Ordered List
-
Ordered List Item 1
-
Ordered List Item 2
-
Ordered List Item 3
-
Ordered List Item 4
-
Ordered List Item 5
More Custom List Styles
This is a list with the class .li-round1:
|
This is a list with the class .li-round2:
|
This is a list with the class .li-arrow:
|
This is a list with the class .li-star:
|
Vertical Definition List
Definition list with no class set:
- Definition Term 1
- Definition Description 1
- Definition Term 2
- Definition Description 2
- Definition Term 3
- Definition Description 3
- Definition Term 4
- Definition Description 4
- Definition Term 5
- Definition Description 5
Definition list with .listVertical class set:
- Definition Term 1
- Definition Description 1
- Definition Term 2
- Definition Description 2
- Definition Term 3
- Definition Description 3
- Definition Term 4
- Definition Description 4
- Definition Term 5
- Definition Description 5
Definition list with .listVertical & .zebra classes set:
- Definition Term 1
- Definition Description 1
- Definition Term 2
- Definition Description 2
- Definition Term 3
- Definition Description 3
- Definition Term 4
- Definition Description 4
- Definition Term 5
- Definition Description 5
Horizontal Definition List
- Definition Term 1
- Definition Description 1
- Definition Term 2
- Definition Description 2
- Definition Term 3
- Definition Description 3
- Definition Term 4
- Definition Description 4
- Definition Term 5
- Definition Description 5
Tables
| Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 | Table Header 5 |
|---|---|---|---|---|
| Table Data | Table Data | Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data | Table Data | Table Data |
| Row Header1 | Table Data | Table Data | Table Data | Table Data | Table Data |
|---|---|---|---|---|---|
| Row Header2 | Table Data | Table Data | Table Data | Table Data | Table Data |
| Row Header3 | Table Data | Table Data | Table Data | Table Data | Table Data |
| Row Header4 | Table Data | Table Data | Table Data | Table Data | Table Data |
| Table Header 1 | Table Header 2 | Table Header 3 | Table Header 4 | Table Header 5 | |
|---|---|---|---|---|---|
| Row Header1 | Table Data | Table Data | Table Data | Table Data | Table Data |
| Row Header2 | Table Data | Table Data | Table Data | Table Data | Table Data |
| Row Header3 | Table Data | Table Data | Table Data | Table Data | Table Data |
| Row Header4 | Table Data | Table Data | Table Data | Table Data | Table Data |
Alerts
The below styles are added by using the following xhtml syntax
your text
Style name being one of the options below
This is a paragraph with the class="color-green" set using the above format
This is a paragraph with the class="color-blue" set using the above format
This is a paragraph with the class="color-orane" set using the above format
This is a paragraph with the class="color-pink" set using the above format
This is a paragraph with the class="color-grey" set using the above format
This is a paragraph with the class="error" set using the above format
This is a paragraph with the class="info" set using the above format
This is a paragraph with the class="tips" set using the above format
This is a highlight phrase.
Quotes
Blockquote:
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 blockqoute that has a class of .rounded. It will use the jQuery rounded corners plugin that is built into Morph. Make sure its enabled under the Progressive Enhancements section of Configurator.
Inline Quotes:
We conceptualize, research, design, develop and deploy solutions that set new standards
in user experience.
Pullquotes:
Qui option notare congue delenit consequat. Mirum iis processus iis ad augue. Nunc imperdiet diam dignissim parum est. Illum saepius facilisis demonstraverunt quam duis. Facer liber elit blandit in nisl. Adipiscing Investigationes et legere laoreet nobis.
We conceptualize, research, design, develop and deploy solutions that set new standards in user experience.
In est molestie nobis ut dolor. Nulla cum parum sed doming eum. Mazim consequat praesent duis soluta exerci. Iriure lius litterarum eu consuetudium congue. Me aliquam laoreet legunt imperdiet sollemnes. Liber legunt notare consequat velit et.
Accumsan nam elit te nunc sollemnes. Clari eu notare nibh qui exerci. Te eodem imperdiet mutationem mutationem elit. Et et non qui me ut. In ipsum sit dignissim ad nulla. Facer legere suscipit magna te et.
We conceptualize, research, design, develop and deploy solutions that set new standards in user experience.
Consequat wisi qui doming suscipit eorum. Humanitatis elit ut te ullamcorper at. Dynamicus qui vero veniam magna notare. Congue vulputate te lectores legentis processus. Vero est per decima sed facit. Legentis minim nibh me praesent dynamicus.
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
This is a highlight phrase.
Image Alignment
We have created an easy way for you to get your images lined up nicely within the content with the correct margin and padding depending on whether it is on the left or right side of the content. The only thing you have to do is add align"=right"or left to the image and the template and css will do the rest of the spacing for you.
Images floated left
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
Images floated right
Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets. Credibly visualize integrated experiences through vertical best practices. Enthusiastically generate empowered technology and holistic total linkage. Assertively redefine resource-leveling solutions via accurate potentialities. Quickly parallel task quality products rather than timely e-markets.
Mod FX Module Styles
If you are feeling a little overwhelmed with the module suffix styles and how they work, or how you can apply them, then you have to check out our Mod FX Builder, which will help you mix and match the modules to get the perfect style for you.