Noticias

Noticias Marketing Focal

Preset Styles

Style Setting

 

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.

Style

Assigning a Style to a Specific Page

 

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:

  • (J1.5) Go to Extensions ? Template Manager ? rt_diametric_j15 → Menu Items → *Menu Item*
  • (J2.5) Go to Extensions ? Template Manager ? rt_diametric → Assignments → *Menu Item*

  • (J1.5) Select your preset from Presets ? Style Presets, configure and save.
  • (J2.5) Select your preset from Show Presets, configure and save.

Gantry Framework: Per Menu Item Controls

Template Features

Diametric, the April 2012 template release, is a beautifully layered template, with a distinct panel-based design, using the powerful ColorChooser system. The template has integrated styling for a range of popular RocketTheme extensions, such as RokSprocket, allowing for maximum visual and structural flexibility.

Diametric

 

 

Gorgeous 12 Preset Styles

Choose one of the included preset styles by specifying it in the template manager

 

Flexible 84 Module Positions

To get you started right, Diametric is utilized with plenty of available module positions

 

RokSprocket Enhance Your Content

A revolutionary Joomla 2.5 extension to replace a variety of content modules

 

RokExtensions RocketTheme Powered

There is compatibility styling for some major RocketTheme extensions Diametric

 

Interested? Want to Use Diametric for Your Website?


Download Diametric Now
 

 

 

Styles Variation

Multiple Preset StylesDiametric

Modules Layout

Versatile & Flexible LayoutDiametric

Module Variations

Fashion & Style the ModuleDiametric
 

 

Menu Options

Integrated Powerful Menu SystemDiametric

Typography

Make the Content SexierDiametric

Styled Extensions

RocketTheme Extensions StyledDiametric
 

 

RokSprocket Styled

Inclusive RokSprocket IntegrationDiametric

Logo Picker

Pick Your Logo From Template ManagerDiametric

Joomla! Stuff

Styled for Regular Joomla! StuffsDiametric
 
 

Gantry Framework Features

  • 960 Grid System
    CSS grid framework for constructing web content based on a width of 960 pixels
  • Per-menu-item Configuration
    Powerful feature in Gantry to control configuration on a per-menu-item basis
  • iPhone / Android Compatible
    iPhone, iPod Touch, iPad, and Android custom theme support
  • Grid RTL Support
    Built in RTL support which will automatically order the layout to support RTL.
Gantry AdminiPhone/Android Compatible
Diametric
 

Template Typography

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 Diametric 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. Component Page 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.


  • To use this style create a list in the following format: <ul class="dots"><li>....</li><li>....</li>...</ul> (HTML).
  • To use this style create a list in the following format:
    • ....
    • [li....[/li]
    (ROKCANDY)
    .
 
 

<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

...

(ROKCANDY). You can use any letter, symbol or number.

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap2">...</p> (HTML) or

...

(ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap3">...</p> (HTML) or

...

(ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap4">...</p> (HTML) or

...

(ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap5">...</p> (HTML) or

...

(ROKCANDY)

<blockquote> Styles

To replicate, use the following formatting: <blockquote><p>....</p></blockquote> (HTML) or

...

(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

...

(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

...

(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

...

(ROKCANDY).

This is a sample of the Attention style. To replicate, use the following syntax: <p class="attention">....</p> (HTML) or

...

(ROKCANDY).

This is a sample of the Notice style. To replicate, use the following syntax: <p class="notice">....</p> (HTML) or

...

(ROKCANDY).

This is a sample of the Alert style. To replicate, use the following syntax: <p class="alert">....</p> (HTML) or

...

(ROKCANDY).

 
 

<span> Text Icon Styles

To replicate, the following format: <span class="text-icon iconname">...</span> (HTML) or ... (ROKCANDY). The class names are listed below, such as "text-icon email".



Text with a phone icon

Text with a quote icon

Text with a cart icon

Text with a rss icon

Text with a tags icon

Text with a write icon

Text with an info icon

Text with a sound icon

Text with a rightarrow icon

Text with a leftarrow icon

Text with a circlearrow icon

Text with a downarrow icon

Text with an uparrow icon

Text with a person icon

Text with a calendar icon

Text with a doc icon
Text with a bulb icon



Text with a youtube icon

Text with a skype icon





Text with a video icon

Text with a dropbox icon

Text with a vimeo icon

Text with a paypal icon

<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 ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold">...</em> (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold2">...</em> (HTML) or ... (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight">...</em> (HTML) or ... (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 ... (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 ... (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 ... (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 ... (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 ... (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 ... (ROKCANDY)

 
 

<ul> List Styles (Icons)

To replicate, use the following format: <ul class="list-icon icon_name"><li>....</li><li>....</li>...</ul> (HTML) or

  • ....
  • [li....[/li]
(ROKCANDY). The icon names are listed below, such as "cart".


  • A list item using the list-icon phone class.
  • A list item using the list-icon phone class.

  • A list item using the list-icon quote class.
  • A list item using the list-icon quote class.


  • A list item using the list-icon youtube class.
  • A list item using the list-icon youtube class.


  • A list item using the list-icon cart class.
  • A list item using the list-icon cart class.
  • A list item using the list-icon tags class.
  • A list item using the list-icon tags class.

  • A list item using the list-icon write class.
  • A list item using the list-icon write class.

  • A list item using the list-icon info class.
  • A list item using the list-icon info class.

  • A list item using the list-icon sound class.
  • A list item using the list-icon sound class.

  • A list item using the list-icon rightarrow class.
  • A list item using the list-icon rightarrow class.

  • A list item using the list-icon skype class.
  • A list item using the list-icon skype class.

  • A list item using the list-icon rss class.
  • A list item using the list-icon rss class.
  • A list item using the list-icon leftarrow class.
  • A list item using the list-icon leftarrow class.

  • A list item using the list-icon circlearrow class.
  • A list item using the list-icon circlearrow class.

  • A list item using the list-icon dropbox class.
  • A list item using the list-icon dropbox class.

  • A list item using the list-icon vimeo class.
  • A list item using the list-icon vimeo class.

  • A list item using the list-icon downarrow class.
  • A list item using the list-icon downarrow class.

  • A list item using the list-icon video class.
  • A list item using the list-icon video class.

  • A list item using the list-icon uparrow class.
  • A list item using the list-icon uparrow class.

  • A list item using the list-icon person class.
  • A list item using the list-icon person class.

  • A list item using the list-icon calendar class.
  • A list item using the list-icon calendar class.

  • A list item using the list-icon bulb class.
  • A list item using the list-icon bulb class.

  • A list item using the list-icon paypal class.
  • A list item using the list-icon paypal class.

  • A list item using the list-icon doc class.
  • A list item using the list-icon doc class.
 
 

<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

  • ....
  • [li....[/li]
(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 Right Title ... some content ... (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 Left Title ... some content ... (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.

 

Tu app funcionalidad adicional

There are 15 stylistic module class suffixes, these add a unique style variation to the module: box1-7, title1-4, and title5 icon1~4; and 26 structural suffixes, these affect the layout and metrics of the module.

Module Suffix "title"

 

There are 4 variations to change the module title: title1-4.

title1

 

An example module using the title1 module class suffix.

 

title2

 

An example module using the title2 module class suffix.

 
 

title3

An example module using the title3 module class suffix.

 

title4

An example module using the title4 module class suffix.

 
 
 

 

Module Suffix "title5 icon(#)"

 

There are 4 icon variations to compound with title5 suffix: icon1-4.

 

title5 icon1

An example module using the title5 icon1 module class suffix.

 
 

title5 icon2

An example module using the title5 icon2 module class suffix.

 
 
 

title5 icon3

An example module using the title5 icon3 module class suffix.

 
 

title5 icon4

An example module using the title5 icon4 module class suffix.

 
 
 

 

Module Suffix "box"

 

There are 7 variations to change the module background: box1-7.

box1

An example module using the box1 module class suffix.

 

box2

An example module using the box2 module class suffix.

 

box3

An example module using the box3 module class suffix.

 
 

box4

An example module using the box4 module class suffix.

 

box5

An example module using the box5 module class suffix.

 
 

Tutorials and Guides

Installation

An overview of template files and instructions for installing and activating the template.

Read More

Logo Editing

An overview for customizing your logo with your organization or company name and logo.

Read More
 

 

Go to Extensions ? Template Manager ? (J1.5) rt_diametric_j15 or (J2.5) rt_diametric. Mouseover the labels to view a description of each template parameter.