Extra-wide layout

All layout

There are 2 width size modes of the content block: in Homepage (considered as list page mode) and in detail page mode. In the Homepage, the width of the content block = 2 grids while in the detail page mode, the width of content block is 3 grids. The above image shows you the layout of homepage of our template --> content block = 2 grid.

To configure for the width of content in homepage and content page (detail page mode), navigate to: [your_site] / templates / ja_elastica / css / layout.css The code for this configuration is located in the line from 86->93, you can change the width here.


  • If there are too many modules, some modules will be auto moved to display under the content block so that your layout will always be nice.
  • The settings is the same is for 3 layout types (extra-wide, wide and normal)
{codecitation} /* Main Content */ #ja-content { width: 720px; /* 3 grids */ } .ja-frontpage #ja-content { width: 480px; /* Frontpage Content 2 grids */ } {/codecitation}

The width of the layout is not defined as the way shown in the section above. The width of the layout = 5 grids + extra-column, so we need to know where the extra-column is defined and how it works.

Step 1: you need to note some important information in the file: [your_site] / templates / ja_elastica / blocks / extra-col.php. This file is to define width of the extra column, select css file to display when satisfying defined condition.

{codecitation} <?php // Add css for this extra-wide layout $this->addCSS ('css/layout-extra-wide.css', 'only screen and (min-width:1440px)'); {/codecitation}

This code is to add css file (css/layout-extra-wide.css) for the extra-wide layout.


This code is to define width and style of the extra-column.

Step 2: define the width of the extra-wide layout. Navigate to: [your_site] / templates / ja_elastica / core / etc / layout-extra-wide.css

{codecitation} .main { max-width: 1440px !important; width: 1440px !important; } #ja-main { width: 1200px ; float: left; } {/codecitation}

Step 3: you need to define the extra-col block it in the: [your_site] / templates / ja_elastica / core / etc / layouts / default.xml file ( the line 26 as default).

{codecitation} position-7, position-5 extra-col {/codecitation}


Conheça o meu site de robótica, matemática e impressão 3D:


Did you guys try out this responsive Joomla 2.5 web design?

_ about 3 hours ago

Main Menu


Dr. Pedro

Dr Pedro

Esse é o médico que cuida de mim, aquele que conseguiu me tirar das internações constantes! Clique na figura e vá até sua página lá você encontra como entrar em contato com ele.


Template features

1. Responsive
Pellentesque auctor leo fringilla pulvinar.
2. Grid System
Pellentesque auctor leo fringilla pulvinar.
3. Multiple Block style
Pellentesque auctor leo fringilla pulvinar.
JA Elastica is our first responsive web design!

_ JoomlArt


Badge hot

Vitae vitae urna eros curabitur ipsum et eget lorem sem nibh. Dui nunc pharetra tincidunt urna nibh.

Badge new

Pellentesque sed aliquet mauris iaculis pretium dapibus porttitor. tincidunt sem quam Morbi nulla elit a tortor vitae.

Hot video

Sample video

Quis eros Aliquam et diam ac a dolor nec nunc accumsan. Vitae velit tortor nunc dolor turpis.

Red module

 Sapien condimentum tellus ac In a eget molestie lacus et porttitor.


Our Gallery


My love song

Audio Etiam pellentesque magna id lacus imperdiet ac vulputate enim semper. Donec tincidunt.

Blue module

 Sapien condimentum tellus ac In a eget molestie lacus et porttitor facilisi.

Violet module

 Sapien condimentum tellus ac In a eget molestie lacus et porttitor.

Who's Online

Temos 208 visitantes e Nenhum membro online

Dark module

 Sapien condimentum tellus ac In a eget molestie lacus et porttitor.

Green module

Joomla Tutorial

How to Apply a Module Class Suffix in Joomla 2.5?

  1. Login to backend.
  2. Go to the Module Manager.
  3. Select the Module you want to edit.
  4. Type the Module Class Suffix into the parameters to the right.
  5. Save the Setting.
Loading ...