Demo Articles (12)
Snogari.com
En Snogari.com nos renovamos para ofrecerles una mejorada imagen, contenido mejor agrupado y amigable, además de incorporar nueva información que sabemos le será de utilidad. Esperamos nos visite frecuentemente.
What is Joomla?
Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available. Best of all, Joomla is an open source solution that is freely available to everyone.
What Joomla! can do?
Joomla is used all over the world to power Web sites of all shapes and sizes. For example:
- Corporate Web sites or portals
- Corporate intranets and extranets
- Online magazines, newspapers, and publications
- E-commerce and online reservations
- Government applications
- Small business Web sites
- Non-profit and organizational Web sites
- Community-based portals
- School and church Web sites
- Personal or family homepages
Site and Administrator
Your site actually has two separate sites. The site (also called the front end) is what visitors to your site will see. The administrator (also called the back end) is only used by people managing your site. You can access the administrator by clicking the "Site Administrator" link on the "This Site" menu or by adding /administrator to the end of you domain name.
Log in to the administrator using the username and password created during the installation of Joomla.
Learn More
There is much more to learn about how to use Joomla! to create the web site you envision. You can learn much more at the Joomla! documentation site and on the Joomla! forums.
Visit Joomla!The Style Settings panel in the Gantry based theme administration interface provides several options for configuring the main built in stylistic aspects of the template.
Assigning a Style
With Gantry, the ability to assign a certain style to an individual page has never been easier and/or more efficient. Just follow these simple steps:
- Go to Extensions → Template Manager → rt_ximenia → Assignments → *Menu Item*
- Select your preset from Show Presets, configure and save.
There are two methods of changing the Ximenia logo: via the logo picker and manual change.
The Logo Picker
- Enable Logo and set to Custom at Admin → Extensions → Templates Manager → rt_ximenia → Features.
- Set Logo Picker to either RokGallery or MediaManager.
- Select your logo, Insert and Save
Manual Change
- Enable Logo and set Type to Ximenia.
- Upload logo.png to the
/templates/rt_ximenia/images/logo/*style* directory - Clear your browser cache and refresh.
If you cannot see your new logo, ensure you have uploaded it to the right directory and the directory permissions are writeable. Enquire with your hosting provider.
Download Sources HereThe following is a guide that covers how to set up your new Ximenia template on your Joomla! site. Here you can find an overview of the files included in the Ximenia release and instructions on installing and activating the template in your Joomla! install.
Note: The Bundle Template is only necessary if the Gantry Library is not installed at /libraries/gantry directory.
Step 1 - Installation
- Install from Admin → Extensions → Extensions Manager
- Browse for rt_ximenia.zip and click Upload & Install
Step 2 - Template Default
- Make the template default at Admin → Extensions → Template Manager
- Select rt_ximenia
- Press Make Default
RocketLauncher Instructions
We always recommend installing a RocketLauncher first to trial and understand the template more effectively. It must be installed as new, and not over an existing Joomla install.
Step 1 - Upload
- Download the RocketLauncher
- Unzip the file
- Upload the created folder to your server
Note: You can upload all the files via FTP, or use cPanel or SSH to upload the zip and unzip directly onto the server. Enquire with your hosting provider.
Step 2 - Installation
- Go to www.yoursite.com/*folder name*
- Follow the Installation instructions
- Ensure you click Install Sample Data during installation
- Remove the installation folder in the Installation interface
Tutorials & Guides
Installation
An overview of template files and instructions for installing & configuring Ximenia template.
Read MoreLogo Editing
An overview for customizing your logo with your organization or company name and logo.
Read MoreGo to Extensions → Template Manager → rt_ximenia. Mouseover the labels to view a description of each parameter.
RokNavMenu is the core of all the powerful Ximenia menu system. Please ensure you are using the latest version of RokNavMenu, available here.
Fusion with MegaMenu
Fusion Menu is a menu theme of the RokNavMenu extension, the addon that drives all RocketTheme template menus. It is primarily a javascript enhanced CSS dropdown menu, that combines standard suckerfish type functionality with animations, transitions and other advanced effects powered by Mootools.
SplitMenu
A static menu system that displays 1st level items in the main horizontal menu and further children in the Sidebar.
All Menu Items can be edited from Admin → Menu → Menu Name → Menu Item.
Creating child menu items
Go to Admin → Menu → A Menu → A Menu Item → Select a Parent Item, and it will appear as a child of it.
Creating Beautiful Content With Simple Code
Typography is a fundamental part of a template, providing you with the tools to characterise your content and bring it to life. There is a vast array of typography available with Ionosphere template, as is with our previous releases, from list styles, notice blocks and a diverse number of other elements.
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.
<h1> Heading Styles
H1. Heading 1
H2. Heading 2
H3. Heading 3
H4. Heading 4
H5. Heading 5
H1. Page Title
H1. Content Title
<ul> List Styles
- This is an example of a standard list style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.
- This is an example of a standard list style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.
- This is an example of a standard list style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.
- This is an example of a standard list style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.
- This is an example of a standard list style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.
<p> DropCap Styles
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibu. Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat.
Use the following format: <p class="dropcap">...</p> (HTML) or [dropcap class="dropcap"]...[/dropcap] (ROKCANDY). You can use any letter, symbol or number.
Praesent rutrum sapien ac felis. Use this format: <p class="dropcap2">...</p> (HTML) or [dropcap class="dropcap2"] ... [/dropcap] (ROKCANDY)
Praesent rutrum sapien ac felis. Use this format: <p class="dropcap3">...</p> (HTML) or [dropcap class="dropcap3"] ... [/dropcap] (ROKCANDY)
Praesent rutrum sapien ac felis. Use this format: <p class="dropcap4">...</p> (HTML) or [dropcap class="dropcap4"] ... [/dropcap] (ROKCANDY)
Praesent rutrum sapien ac felis. Use this format: <p class="dropcap5">...</p> (HTML) or [dropcap class="dropcap5"] ... [/dropcap] (ROKCANDY)
<blockquote> Styles
To replicate, use the following formatting: <blockquote><p>....</p></blockquote> (HTML) or [blockquote class="default"]...[/blockquote] (ROKCANDY).
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
To replicate, use the following formatting: <blockquote class="alignleft"><p>....</p></blockquote> (HTML) or [blockquote class="alignleft"]...[/blockquote] (ROKCANDY).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor.
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
To replicate, use the following formatting: <blockquote class="alignright"><p>....</p></blockquote> (HTML) or [blockquote class="alignright"]...[/blockquote] (ROKCANDY).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor.
<pre> Code Styles
This is a sample <pre class="lines">...</pre> (HTML) or,
[pre2 class="{lines}"] ... [/pre2] (ROKCANDY) tag:
div.modulebox-black div.bx1 {
background: url(../images/box_bl.png) 0 100% repeat;
}
div.modulebox-black div.bx2 {
background: url(../images/box_tr.png) 100% 0 repeat;
}
This is a sample <pre>...</pre> (HTML) or,
[pre class="{lines}"] ... [/pre] (ROKCANDY) tag:
div.modulebox-black div.bx1 {
background: url(../images/box_bl.png) 0 100% repeat;
}
div.modulebox-black div.bx2 {
background: url(../images/box_tr.png) 100% 0 repeat;
}
<p> Notice Styles
This is a sample of the Approved style. To replicate, use the following syntax: <p class="approved">....</p> (HTML) or [notice class="approved"] ... [/notice] (ROKCANDY).
This is a sample of the Attention style. To replicate, use the following syntax: <p class="attention">....</p> (HTML) or [notice class="attention"] ... [/notice] (ROKCANDY).
This is a sample of the Notice style. To replicate, use the following syntax: <p class="notice">....</p> (HTML) or [notice class="notice"] ... [/notice] (ROKCANDY).
This is a sample of the Alert style. To replicate, use the following syntax: <p class="alert">....</p> (HTML) or [notice class="alert"] ... [/notice] (ROKCANDY).
<span> Text Icon
To replicate, the following format: <span class="text-icon iconname">...</span> (HTML) or [icon class="icon name"]...[/icon] (ROKCANDY). The class names are listed below, such as "text-icon email".
<em> Emphasis Styles
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="italic">...</em> (HTML) or [emphasis]...[/emphasis] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold">...</em> (HTML) or [emphasisbold]...[/emphasisbold] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold2">...</em> (HTML) or [emphasisbold2]...[/emphasisbold2] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight">...</em> (HTML) or [highlight class="default"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight white">...</em> (HTML) or [highlight class="white"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight black">...</em> (HTML) or [highlight class="black"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight green">...</em> (HTML) or [highlight class="green"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight yellow">...</em> (HTML) or [highlight class="yellow"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight blue">...</em> (HTML) or [highlight class="blue"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight red">...</em> (HTML) or [highlight class="red"]...[/highlight] (ROKCANDY)
Font Awesome Icons
Font Awesome is a pictographic language of web-related actions which delivers 220 icons. The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0 and you can find the full examples of usage at Font Awesome - http://fortawesome.github.com/Font-Awesome
To replicate, use the following format: <span class="icon-name"><span> or [span class="icon-name"]...[/span] (ROKCANDY). The icons name are listed below, such as "icon-signal".
Text using icon-asterisk
Text using icon-calendar
Text using icon-external-link
Text using icon-gift
Text using icon-group
Text using icon-signal
Text using icon-leaf
Text using icon-download-alt
<ul> List Styles (Icons)
To replicate, use the following format: <ul class="list-icon icon_name"><li>....</li><li>....</li>...</ul> (HTML) or [list class="list-icon icon_name"][li]....[/li][li....[/li][/list] (ROKCANDY). The icon names are listed below, such as "cart".
<ul> List Styles (CSS3)
These list styles are based on the latest CSS3 techniques and are designed to work in modern browsers (will not display properly in IE6-IE8).
To replicate, use the following format: <ul class="class name"><li>....</li><li>....</li>...</ul> (HTML) or [list class="class name"][li]....[/li][li....[/li][/list] (ROKCANDY). The class names are listed below, such as "checkmark red".
- checkmark
- checkmark
- circle-checkmark
- circle-checkmark
- square-checkmark
- square-checkmark
- checkmark green
- checkmark green
- checkmark yellow
- checkmark yellow
- checkmark red
- checkmark red
- checkmark blue
- checkmark blue
- checkmark white
- checkmark white
- triangle-small
- triangle-small
- triangle
- triangle
- triangle-large
- triangle-large
- triangle green
- triangle green
- triangle yellow
- triangle yellow
- triangle red
- triangle red
- triangle blue
- triangle blue
- triangle white
- triangle white
- circle-small
- circle-small
- circle
- circle
- circle-large
- circle-large
- circle green
- circle green
- circle yellow
- circle yellow
- circle red
- circle red
- circle blue
- circle blue
- circle white
- circle white
<span> Inset Styles
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Right TitleYou will need to use the following formatting: <span class="inset-right"> <span class="inset-right-title"> .... </span> ... some content ... </strong> (HTML) or [inset side="right" title="Inset Right Title"] ... some content ...[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Left TitleYou will need to use the following formatting: <span class="inset-left"> <span class="inset-left-title"> .... </span> ... some content ... </strong> (HTML) or [inset side="left" title="Inset Left Title"] ... some content ...[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.
Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
There are 10 stylistic module class suffixes, these add a unique style variation to the module: box1-4, title1-4, rt-largetitle and noblock; and 25 structural suffixes, these affect the layout and metrics of the module.
Más...
If no modules are published to a position, the entire area or row will not appear/collapse.
