About Joomla!

Typography

Heading Styles

This is an Heading 1

This is an Heading 2

This is an Heading 3

This is an Heading 4

Pre Code Styles

Below is a sample of <pre> or <div class="code">

#zt-body {
 width: 180px;
 float: right;
 color: #EEEEEE;
}

Highlight Styles

This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class="highlight1">Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class="highlight2">Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class="highlight3">Your highlight phrase goes here!</span>.

Icons Styles

Use <p class="zt-info">Your info message goes here!</p>.

Use <p class="zt-help">Your info message goes here!</p>.

Use <p class="zt-comment">Your info message goes here!</p>.

Use <p class="zt-accept">Your info message goes here!</p>.

Use <p class="zt-add">Your info message goes here!</p>.

Use <p class="zt-tip">Your info message goes here!</p>.

Use <p class="zt-warning">Your info message goes here!</p>.

Use <p class="zt-error">Your info message goes here!</p>.

Use <p class="zt-email">Your info message goes here!</p>.

Use <p class="zt-phone">Your info message goes here!</p>.

Use <p class="zt-mobile">Your info message goes here!</p>.

Use <p class="zt-time">Your info message goes here!</p>.

Use <p class="zt-world">Your info message goes here!</p>.

Use <p class="zt-book">Your info message goes here!</p>.

Use <p class="zt-stock">Your info message goes here!</p>.

Use <p class="zt-cart">Your info message goes here!</p>.

Use <p class="zt-date">Your info message goes here!</p>.

Use <p class="zt-key">Your info message goes here!</p>.

Use <p class="zt-yes">Your info message goes here!</p>.

Use <p class="zt-no">Your info message goes here!</p>.

Use <p class="zt-male">Your info message goes here!</p>.

Use <p class="zt-female">Your info message goes here!</p>.

Use <p class="zt-tag-blue">Your info message goes here!</p>.

Use <p class="zt-tag-green">Your info message goes here!</p>.

Use <p class="zt-tag-orange">Your info message goes here!</p>.

Use <p class="zt-tag-pink">Your info message goes here!</p>.

Use <p class="zt-tag-purple">Your info message goes here!</p>.

Use <p class="zt-tag-red">Your info message goes here!</p>.

Use <p class="zt-tag-yellow">Your info message goes here!</p>.

Use <p class="zt-green">Your info message goes here!</p>.

Use <p class="zt-yellow">Your info message goes here!</p>.

Use <p class="zt-red">Your info message goes here!</p>.

Order List Styles

Use <ol><li>...</li></ol>.
  1. Suspendisse hendrerit ante vel quam.
  2. Vestibulum nisl. Integer urna.
  3. Aenean hendrerit. Maecenas condimentum.
  4. Sed odio sem, placerat faucibus.
Use <dl><dt>...</dt></dl>.
Suspendisse hendrerit ante vel quam.
Vestibulum nisl. Integer urna.
Aenean hendrerit. Maecenas condimentum.
Sed odio sem, placerat faucibus.

Bullet Styles

  • This is a sample Circle list.
  • Condimentum quis.
  • Congue Quisque augue elit dolor.
  • Nunc cursus sem et sapien eget.
  • This is a sample Check list.
  • Dolor Curabitur Nam Nulla augue id.
  • Lorem et nunc congue pede auctor
  • Nunc cursus sem et pretium.
  • This is a sample Star list
  • Dolor Curabitur Nam Nulla augue id iaculis.
  • Lorem et nunc congue pede auctor
  • Nunc cursus sem et pretium.
  • This is a sample Arrow list.
  • Dolor Curabitur Nam Nulla augue id iaculis.
  • Lorem et nunc congue pede auctor
  • Nunc cursus sem et pretium.
  • This is a sample Square list
  • Dolor Curabitur Nam Nulla augue id iaculis.
  • Lorem et nunc congue pede auctor
  • Nunc cursus sem et pretium.
  • This is a sample Plus list.
  • Dolor Curabitur Nam Nulla augue id iaculis.
  • Lorem et nunc congue pede auctor
  • Nunc cursus sem et pretium.

Content Box Styles

This is a sample clip note. Use <p class="box-info">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-warning">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-stickynote">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-download">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-faq">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-flag">Your clip note goes here!</p> to form a clip note!

This is a sample block number.
Use <div class="zt-box1">Your content goes here!</div>!
This is a sample block number.
Use <div class="zt-box2">Your content goes here!</div>!
This is a sample block number.
Use <div class="zt-box2">Your content goes here!</div>!
This is a sample block number.
Use <div class="zt-box4">Your content goes here!</div>!
This is a sample block number.
Use <div class="zt-box5">Your content goes here!</div>!
This is a sample block number.
Use <div class="zt-box6">Your content goes here!</div>!
This is a sample block number.
Use <div class="zt-box7">Your content goes here!</div>!
This is a sample block number.
Use <div class="zt-box8">Your content goes here!</div>!
This is a sample block number.
Use <div class="zt-box9">Your content goes here!</div>!

Bubble Styles

Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble1]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble2]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble3]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble4]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble5]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble6]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble7]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble8]

Blocknumber Styles

01 Mauris turpis quam, sodales vel aliquet sed, sodales vitae felis. Donec et nulla felis. Sed semper, massa non molestie vehicula, ipsum diam mattis dolor, ac accumsan nisl tellus vitae augue. Sed non venenatis turpis!

02 Mauris turpis quam, sodales vel aliquet sed, sodales vitae felis. Donec et nulla felis. Sed semper, massa non molestie vehicula, ipsum diam mattis dolor, ac accumsan nisl tellus vitae augue. Sed non venenatis turpis!

03 Mauris turpis quam, sodales vel aliquet sed, sodales vitae felis. Donec et nulla felis. Sed semper, massa non molestie vehicula, ipsum diam mattis dolor, ac accumsan nisl tellus vitae augue. Sed non venenatis turpis!

04 Mauris turpis quam, sodales vel aliquet sed, sodales vitae felis. Donec et nulla felis. Sed semper, massa non molestie vehicula, ipsum diam mattis dolor, ac accumsan nisl tellus vitae augue. Sed non venenatis turpis!

Blockquote Styles

Lorem ipsum dolor sit amet consectetuer interdum pulvinar orci Nunc elit.

Praesent augue libero, dignissim accumsan sagittis vitae, adipiscing non erat. Vivamus congue diam vel justo ultricies nec vestibulum lacus varius. Nullam tellus urna, scelerisque in laoreet quis, viverra lacinia neque.

Curabitur pretium, nunc dignissim dapibus ultricies, tortor diam tempus erat, ut gravida sem enim vitae nunc. Fusce libero justo, sodales sed vulputate sodales, euismod in lacus. Suspendisse eget magna a ante laoreet placerat ac id purus. In gravida, nibh a luctus faucibus, nunc neque pellentesque ipsum, ac cursus elit neque sit amet urna.

Lorem ipsum dolor sit amet consectetuer interdum pulvinar orci Nunc elit.

Praesent augue libero, dignissim accumsan sagittis vitae, adipiscing non erat. Vivamus congue diam vel justo ultricies nec vestibulum lacus varius. Nullam tellus urna, scelerisque in laoreet quis, viverra lacinia neque.

Curabitur pretium, nunc dignissim dapibus ultricies, tortor diam tempus erat, ut gravida sem enim vitae nunc. Fusce libero justo, sodales sed vulputate sodales, euismod in lacus. Suspendisse eget magna a ante laoreet placerat ac id purus. In gravida, nibh a luctus faucibus, nunc neque pellentesque ipsum, ac cursus elit neque sit amet urna.

Dropcap Styles

Example: <p class="dropcap">This is the text with dropcap symbol </p>.

This is special drop cap symbol styling for magazine / newspaper text paragraph. Vestibulum elementum consectetur nunc sed auctor. Phasellus sed nulla enim, vitae dignissim augue. Cras nunc ligula, vestibulum ac ornare et, tempus interdum odio. Morbi quam dui, hendrerit vitae ornare quis, tempor ut arcu. Donec sed quam non magna fringilla iaculis non ac arcu. Nunc vel eros sed massa fringilla accumsan nec nec orci. Integer quis lacinia sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Praesent adipiscing diam sed quam scelerisque scelerisque. Nullam tristique, tortor id laoreet dignissim, arcu velit porttitor sem, scelerisque tincidunt mauris metus vel mi. Praesent quis nunc tortor, dapibus tincidunt eros. Vestibulum eleifend, neque adipiscing molestie posuere, nisi odio faucibus ipsum, a pretium eros ante fringilla dui. Aliquam rhoncus nunc sed est porttitor eget varius erat suscipit. Donec dignissim convallis urna, et volutpat libero fringilla non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum rutrum posuere. Aenean semper porttitor felis quis suscipit. Vivamus et dolor et dolor sodales lacinia.

Legend Styles

Legend style

[legend1] Use Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.

Legend style

[legend2 zt-dotted] Use Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.

Legend style

[legend3 zt-rounded] Use Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.

Legend style

[legend4 zt-dotted zt-rounded] Use Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.

Table Styles

Example: <table class="plainrows"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table headerColumn header 1Column header 2Column header 3Column header 4Column header 5
Table footerFooter data
Row header 1Lorem ipsumDolor sit ametConsectetuer adipiscingAliquam quis urnaSed felis
Row header 2Nullam nec odioVivamus turpis metusFeugiat sit ametClass aptentAd litora torquent
Row header 3Pulvinar sedTincidunt sit ametMassaDolor sit ametConsectetuer adipiscing
Row header 4Vivamus turpis metusFeugiat sit ametClass aptentAd litora torquentNullam nec odio
Row header 5MassaDolor sit ametTincidunt sit ametPulvinar sedConsectetuer adipiscing

Example: <table class="colorstripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table headerColumn header 1Column header 2Column header 3Column header 4Column header 5
Table footerFooter data
Row header 1Lorem ipsumDolor sit ametConsectetuer adipiscingAliquam quis urnaSed felis
Row header 2Nullam nec odioVivamus turpis metusFeugiat sit ametClass aptentAd litora torquent
Row header 3Pulvinar sedTincidunt sit ametMassaDolor sit ametConsectetuer adipiscing
Row header 4Vivamus turpis metusFeugiat sit ametClass aptentAd litora torquentNullam nec odio
Row header 5MassaDolor sit ametTincidunt sit ametPulvinar sedConsectetuer adipiscing

Example: <table class="greystripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table headerColumn header 1Column header 2Column header 3Column header 4Column header 5
Table footerFooter data
Row header 1Lorem ipsumDolor sit ametConsectetuer adipiscingAliquam quis urnaSed felis
Row header 2Nullam nec odioVivamus turpis metusFeugiat sit ametClass aptentAd litora torquent
Row header 3Pulvinar sedTincidunt sit ametMassaDolor sit ametConsectetuer adipiscing
Row header 4Vivamus turpis metusFeugiat sit ametClass aptentAd litora torquentNullam nec odio
Row header 5MassaDolor sit ametTincidunt sit ametPulvinar sedConsectetuer adipiscing
 

Joomla! License Guidelines

This Web site is powered by Joomla! The software and default templates on which it runs are Copyright 2005-2008 Open Source Matters. The sample content distributed with Joomla! is licensed under the Joomla! Electronic Documentation License. All data entered into this Web site and templates added after installation, are copyrighted by their respective copyright owners.

If you want to distribute, copy, or modify Joomla!, you are welcome to do so under the terms of the GNU General Public License. If you are unfamiliar with this license, you might want to read 'How To Apply These Terms To Your Program' and the 'GNU General Public License FAQ'.

The Joomla! licence has always been GPL.

 

Content Layouts

Joomla! provides plenty of flexibility when displaying your Web content. Whether you are using Joomla! for a blog site, news or a Web site for a company, you'll find one or more content styles to showcase your information. You can also change the style of content dynamically depending on your preferences. Joomla! calls how a page is laid out a layout. Use the guide below to understand which layouts are available and how you might use them.

Content

Joomla! makes it extremely easy to add and display content. All content is placed where your mainbody tag in your template is located. There are three main types of layouts available in Joomla! and all of them can be customised via parameters. The display and parameters are set in the Menu Item used to display the content your working on. You create these layouts by creating a Menu Item and choosing how you want the content to display.

Blog Layout

Blog layout will show a listing of all Articles of the selected blog type (Section or Category) in the mainbody position of your template. It will give you the standard title, and Intro of each Article in that particular Category and/or Section. You can customise this layout via the use of the Preferences and Parameters, (See Article Parameters) this is done from the Menu not the Section Manager!

Blog Archive Layout

A Blog Archive layout will give you a similar output of Articles as the normal Blog Display but will add, at the top, two drop down lists for month and year plus a search button to allow Users to search for all Archived Articles from a specific month and year.

List Layout

Table layout will simply give you a tabular list of all the titles in that particular Section or Category. No Intro text will be displayed just the titles. You can set how many titles will be displayed in this table by Parameters. The table layout will also provide a filter Section so that Users can reorder, filter, and set how many titles are listed on a single page (up to 50)

Wrapper

Wrappers allow you to place stand alone applications and Third Party Web sites inside your Joomla! site. The content within a Wrapper appears within the primary content area defined by the "mainbody" tag and allows you to display their content as a part of your own site. A Wrapper will place an IFRAME into the content Section of your Web site and wrap your standard template navigation around it so it appears in the same way an Article would.

Content Parameters

The parameters for each layout type can be found on the right hand side of the editor boxes in the Menu Item configuration screen. The parameters available depend largely on what kind of layout you are configuring.

 
 

The Joomla! Community

Got a question? With more than 210,000 members, the Joomla! Discussion Forums at forum.joomla.org are a great resource for both new and experienced users. Ask your toughest questions the community is waiting to see what you'll do with your Joomla! site.

Do you want to show off your new Joomla! Web site? Visit the Site Showcase section of our forum.

Do you want to contribute?

If you think working with Joomla is fun, wait until you start working on it. We're passionate about helping Joomla users become contributors. There are many ways you can help Joomla's development:

  • Submit news about Joomla. We syndicate Joomla-related news on JoomlaConnectTM. If you have Joomla news that you would like to share with the community, find out how to get connected here.
  • Report bugs and request features in our trackers. Please read Reporting Bugs, for details on how we like our bug reports served up
  • Submit patches for new and/or fixed behaviour. Please read Submitting Patches, for details on how to submit a patch.
  • Join the developer forums and share your ideas for how to improve Joomla. We're always open to suggestions, although we're likely to be sceptical of large-scale suggestions without some code to back it up.
  • Join any of the Joomla Working Groups and bring your personal expertise to the Joomla community. 

These are just a few ways you can contribute. See Contribute to Joomla for many more ways.

 

What's New in 1.5?

As with previous releases, Joomla! provides a unified and easy-to-use framework for delivering content for Web sites of all kinds. To support the changing nature of the Internet and emerging Web technologies, Joomla! required substantial restructuring of its core functionality and we also used this effort to simplify many challenges within the current user interface. Joomla! 1.5 has many new features.

Read more...

 
 

More Articles...

Page 1 of 2

Polls

Joomla! is used for?
 

Who's Online

We have 1 guest online

Advertisement

Featured Links:
Joomla!
Joomla! The most popular and widely used Open Source CMS Project in the world.
JoomlaCode
JoomlaCode, development and distribution made easy.
Joomla! Extensions
Joomla! Components, Modules, Plugins and Languages by the bucket load.
Joomla! Shop
For all your Joomla! merchandise.
Ads by Joomla!
1.7 Available