Search

Filtro
  • Professionals

    Joomla! 1.6 continues development of the Joomla Framework and CMS as a powerful and flexible way to bring your vision of the web to reality. With the administrator now fully MVC, the ability to control its look and the management of extensions is now complete.

  • Beginners

    If this is your first Joomla site or your first web site, you have come to the right place. Joomla will help you get your website up and running quickly and easily.

    Start off using your site by logging in using the administrator account you created when you installed Joomla!.

  • Getting Help

    There are lots of places you can get help with Joomla!. In many places in your site administrator you will see the help icon. Click on this for more information about the options and functions of items on your screen. Other places to get help are:

  • Getting Started

    It's easy to get started creating your website. Knowing some of the basics will help.

    What is a Content Management System?

    A content management system is software that allows you to create and manage webpages easily by separating the creation of your content from the mechanics required to present it on the web.

  • Joomla!

    Congratulations! You have a Joomla! site! Joomla! makes your site easy to build a website just the way you want it and keep it simple to update and maintain.

    Joomla! is a flexible and powerful platform, whether you are building a small site for yourself or a huge site with hundreds of thousands of visitors. Joomla is open source, which means you can make it work just the way you want it to.

  • The Joomla! Project

    The Joomla! Project consists of all of the people who make and support the Joomla! Web Platform and Content Management System.

    Our mission is to provide a flexible platform for digital publishing and collaboration.

    The core values are:

    • Freedom
    • Equality
    • Trust
    • Community
    • Collaboration
    • Usability

    In our vision, we see:

    • People publishing and collaborating in their communities and around the world
    • Software that is free, secure, and high-quality
    • A community that is enjoyable and rewarding to participate in
    • People around the world using their preferred languages
    • A project that acts autonomously
    • A project that is socially responsible
    • A project dedicated to maintaining the trust of its users

    There are millions of users around the world and thousands of people who contribute to the Joomla! Project. They work in three main groups: the Production Working Group, responsible for everything that goes into software and documentation; the Community Working Group, responsible for creating a nurturing the community; and Open Source Matters, the non profit organization responsible for managing legal, financial and organizational issues.

    Joomla! is a free and open source project, which uses the GNU General Public License version 2 or later.

  • Template Typography

    Typography is a fundamental part of a template, providing you with the tools to characterize your content and bring it to life. Expose integrated and nicely blended with Bootstrap's Typography to enhance your typography experience.

    If you are using the TinyMCE editor for HTML typography, go to Extensions → Plugin Manager → TinyMCE 2.0 → Set Code Clean-up on Save to Never.

    Heading Style

    h1. Heading 1

    h2. Heading 2

    h3. Heading 3

    h4. Heading 4

    h5. Heading 5
    h6. Heading 6

    Default List Style

    Unordered List

    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
      • Vestibulum laoreet porttitor sem
    • Faucibus porta lacus fringilla vel

    Ordered List

    1. Lorem ipsum dolor sit amet
    2. Consectetur adipiscing elit
    3. Integer molestie lorem at massa
    4. Facilisis in pretium nisl aliquet

    Typographic components Page header and hero unit for segmenting content

    Expose provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

    Markup

    Wrap your content in a div like so:

    1. <div class="hero-unit">
    2. <h1>Heading</h1>
    3. <p>Tagline</p>
    4. <p>
    5. <a class="btn btn-primary btn-large">
    6. Learn more
    7. </a>
    8. </p>
    9. </div>

    Hello, world!

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Learn more

    Blockquotes

    1. <blockquote>
    2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
    3. <small>Someone famous</small>
    4. </blockquote>

    Default blockquotes are styled as such:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

    Someone famous in Body of work

    To float your blockquote to the right, add class="pull-right":

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

    Someone famous in Body of work

    Code Inline and block code snippets

    This is a sample <pre>...</pre> tag:
    
    div.ex-block div.bx1 {
      background: url(../images/box_bl.png) 0 100% repeat;
    }
    
    div.ex-block div.bx2 {
      background: url(../images/box_tr.png) 100% 0 repeat;
    }
    
    This is a sample <pre class="prettyprint">...</pre> tag:
    
    div.ex-block div.bx1 {
      background: url(../images/box_bl.png) 0 100% repeat;
    }
    
    div.ex-block div.bx2 {
      background: url(../images/box_tr.png) 100% 0 repeat;
    }
    

    Inline labels Label and annotate text

    Labels Markup
    Default <span class="label">Default</span>
    Success <span class="label label-success">Success</span>
    Warning <span class="label label-warning">Warning</span>
    Important <span class="label label-important">Important</span>
    Info <span class="label label-info">Info</span>

    Alerts Styles for success, warning, and error messages

    This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert">....</div>
    This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-error">....</div>
    This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-success">....</div>
    This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-info">....</div>

    Nav, tabs, and pills Highly customizable list-style navigation

    Stacked tabs

    1. <ul class="nav nav-tabs nav-stacked">
    2. ...
    3. </ul>

    Stacked pills

    1. <ul class="nav nav-pills nav-stacked">
    2. ...
    3. </ul>

    Example nav list

    Take a list of links and add class="nav nav-list":

    1. <ul class="nav nav-list">
    2. <li class="nav-header">
    3. List header
    4. </li>
    5. <li class="active">
    6. <a href="#">Home</a>
    7. </li>
    8. <li>
    9. <a href="#">Library</a>
    10. </li>
    11. ...
    12. </ul>

    Example with icons

    Same example, but with <i> tags for icons.

    1. <ul class="nav nav-list">
    2. ...
    3. <li>
    4. <a href="#">
    5. <i class="icon-book"></i>
    6. Library
    7. </a>
    8. </li>
    9. ...
    10. </ul>

    Icons Text style

    • icon-glass
    • icon-music
    • icon-search
    • icon-envelope
    • icon-heart
    • icon-star
    • icon-star-empty
    • icon-user
    • icon-film
    • icon-th-large
    • icon-th
    • icon-th-list
    • icon-ok
    • icon-remove
    • icon-zoom-in
    • icon-zoom-out
    • icon-off
    • icon-signal
    • icon-cog
    • icon-trash
    • icon-home
    • icon-file
    • icon-time
    • icon-road
    • icon-download-alt
    • icon-download
    • icon-upload
    • icon-inbox
    • icon-play-circle
    • icon-repeat
    • icon-refresh
    • icon-list-alt
    • icon-lock
    • icon-flag
    • icon-headphones
    • icon-volume-off
    • icon-volume-down
    • icon-volume-up
    • icon-qrcode
    • icon-barcode
    • icon-tag
    • icon-tags
    • icon-book
    • icon-bookmark
    • icon-print
    • icon-camera
    • icon-font
    • icon-bold
    • icon-italic
    • icon-text-height
    • icon-text-width
    • icon-align-left
    • icon-align-center
    • icon-align-right
    • icon-align-justify
    • icon-list
    • icon-indent-left
    • icon-indent-right
    • icon-facetime-video
    • icon-picture
    • icon-pencil
    • icon-map-marker
    • icon-adjust
    • icon-tint
    • icon-edit
    • icon-share
    • icon-check
    • icon-move
    • icon-step-backward
    • icon-fast-backward
    • icon-backward
    • icon-play
    • icon-pause
    • icon-stop
    • icon-forward
    • icon-fast-forward
    • icon-step-forward
    • icon-eject
    • icon-chevron-left
    • icon-chevron-right
    • icon-plus-sign
    • icon-minus-sign
    • icon-remove-sign
    • icon-ok-sign
    • icon-question-sign
    • icon-info-sign
    • icon-screenshot
    • icon-remove-circle
    • icon-ok-circle
    • icon-ban-circle
    • icon-arrow-left
    • icon-arrow-right
    • icon-arrow-up
    • icon-arrow-down
    • icon-share-alt
    • icon-resize-full
    • icon-resize-small
    • icon-plus
    • icon-minus
    • icon-asterisk
    • icon-exclamation-sign
    • icon-gift
    • icon-leaf
    • icon-fire
    • icon-eye-open
    • icon-eye-close
    • icon-warning-sign
    • icon-plane
    • icon-calendar
    • icon-random
    • icon-comment
    • icon-magnet
    • icon-chevron-up
    • icon-chevron-down
    • icon-retweet
    • icon-shopping-cart
    • icon-folder-close
    • icon-folder-open
    • icon-resize-vertical
    • icon-resize-horizontal

    Buttons

    Button Class Description
    .btn Standard gray button with gradient
    .btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
    .btn-info Used as an alternate to the default styles
    .btn-success Indicates a successful or positive action
    .btn-warning Indicates caution should be taken with this action
    .btn-danger Indicates a dangerous or potentially negative action
    .btn-inverse Alternate dark gray button, not tied to a semantic action or use

    Multiple sizes

    Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

    Button with icons

    Refresh Checkout Delete

    Comment Settings More Info

    Tables For, you guessed it, tabular data

    1. Default table styles

    Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

    <table class="table">
      …
    </table>
    # First Name Last Name Language
    1 Mark Otto CSS
    2 Jacob Thornton Javascript
    3 Stu Dent HTML

    2. Striped table

    Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

    Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

    <table class="table table-striped">
      …
    </table>
    # First Name Last Name Language
    1 Mark Otto CSS
    2 Jacob Thornton Javascript
    3 Stu Dent HTML

    3. Bordered table

    Add borders around the entire table and rounded corners for aesthetic purposes.

    <table class="table table-bordered">
      …
    </table>
    # First Name Last Name Language
    1 Mark Otto CSS
    2 Jacob Thornton Javascript
    3 Stu Dent
    3 Brosef Stalin HTML

    4. Condensed table

    Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

    <table class="table table-condensed">
      …
    </table>
    # First Name Last Name Language
    1 Mark Otto CSS
    2 Jacob Thornton Javascript
    3 Stu Dent HTML

    5. Combine them all!

    Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

    <table class="table table-striped table-bordered table-condensed">
      ...
    </table>
    # First Name Last Name Language
    1 Mark Otto CSS
    2 Jacob Thornton Javascript
    3 Stu Dent HTML
    4 Brosef Stalin HTML
  • Using Joomla!

    With Joomla! You can create anything from a simple personal website to a complex ecommerce or social site with millions of visitors.

    This section of the sample data provides you with a brief introduction to Joomla! concepts and reference material to help you understand how Joomla! works.

    When you no longer need the sample data, you can can simply unpublish the sample data category found within each extension in the site administrator or you may completely delete each item and all of the categories.

  • 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.

    In Joomla! 1.5, you''ll notice:

    • Substantially improved usability, manageability, and scalability far beyond the original Mambo foundations
    • Expanded accessibility to support internationalisation, double-byte characters and right-to-left support for Arabic, Farsi, and Hebrew languages among others
    • Extended integration of external applications through Web services
    • Enhanced content delivery, template and presentation capabilities to support accessibility standards and content delivery to any destination
    • A more sustainable and flexible framework for Component and Extension developers
    • Backward compatibility with previous releases of Components, Templates, Modules, and other Extensions