Resize browser to see the magic. And experience the ride with your wide screen, laptop, ipad, kindle, iphone or any handheld device.Mobile layout
- Details
- Category: Template guide
There are 2 layout types for mobile. The first one is Tablet Portrait layout and Tablet Lanscape layout ( the Landscape layout is the Normal Layout). The mobile layout uses percentage (%) as unit to define width of the layout. The full width of the layout is 100%, from that, you can define width for each element in the template.
Mobile Landscape layout
Front-end Appearance
To define width of the layout, please navigate to: [your_site]/templates/ja_elastica/core/etc/layouts/default.xml. The file default.xml is to define width range of each layout.
{codecitation}As defined here, the layout has maximum width = 719 px. And with the condition, the layout will use the layout-mobile.css file under the your_site/templates/elastica/css folder to be the style of the layout ( the Css file contains configuration for style of the layout including: width, font size, logo size, ... )
{codecitation} .main { width: 100%; } .column { float: none; width: 100% !important; } /* MASONRY PRESETS (240px*5 Grids) --------------------------------------------------------- */ /* Sizes---*/ .ja-masonry { width: 49%; } .grid-double, .grid-tripple { width: 100%; } {/codecitation}As defined in the code above, the width is re-defined. In mobile landscape layout, the ja-masonry (grid) is converted to percentage (%). One grid is now = 49% width in mobile landscape layout, and grid-double, grid-tripple are now = 100% width (full width). You can change the rate here.
Mobile Portrait layout
Front-end Appearance
To define width of the layout, please navigate to: your_site/templates/elastica/core/etc/layouts/default.xml. The file default.xml is to define width range of each layout.
{codecitation}As defined here, the layout has maximum width = 479 px. And with the condition, the layout will use the layout-mobile-port.css file under the your_site/templates/elastica/css folder to be the style of the layout.
{codecitation} /* MASONRY PRESETS (240px*5 Grids) --------------------------------------------------------- */ /* Sizes---*/ .ja-masonry, .grid-double, .grid-tripple, #ja-header .main, #ja-content, .item { float: none !important; width: 100% !important; } {/codecitation}As the code defined, in the mobile portrait layout, .ja-masonry, .grid-double, .grid-tripple are now = 100% width (full width) ---> content and modules have same size (all are = 100%).
Tablet layout
- Details
- Category: Template guide
There are 2 layout types for tablet. The first one is Tablet Portrait layout and Tablet Lanscape layout ( the Landscape layout is the Normal Layout).
The Portrait layout uses 3 grids. The content block has width of 3 grids in both homepage and detail page so all modules will be displayed under the content block.
Portrait layout
Front-end Appearance
To define width of the layout, please navigate to: [your_site]/templates/ja_elastica/core/etc/layouts/default.xml. The file default.xml is to define width range of each layout.
{codecitation}As defined here, the layout has minimum width = 720px and maximum = 985 px. And with the condition, the layout will use the layout-tablet.css file under the [your_site]/templates/ja_elastica/css folder to be the style of the template.
Normal layout
- Details
- Category: Template guide
The normal layout uses 4 grids. In Homepage, the content block width = 2 grids. In Detail page mode, the content block width = 3 grids.
How the modules are changed when layout is changed from Wide layout to Normal layout?
The modules in the grid 5 (in Wide layout) will be moved to available grids in Normal layout [grid 3 and 4 or under the content block (in Homepage) and grid 4 or under the content block (in detail page)] in the order from left to right. The moved modules will be located under the modules already in the grids.
To define width of the layout, please navigate to: your_site/templates/ja_t3_blank_featured/core/etc/layouts/default.xml. The file default.xml is to define width range of each layout.
{codecitation}As defined here, the layout has minimum width = 986 px and maximum = 1235 px. And with the condition, the layout will use the layout-normal.css file under the your_site/templates/ja_t3_blank_featured/css folder to be the style of the template.
Wide layout
- Details
- Category: Template guide
This layout is quite similar to the extra-wide layout, except the extra-column is removed.
To define width of the layout, please navigate to: [your_site]/templates/ja_elastica/core/etc/layouts/default.xml. The file default.xml is to define width range of each layout.
This file is to define layout with size
As defined here, the layout has minimum width = 1236 px and maximum < 1440 px. And with the condition, the layout will use the layout-wide.css file under the [your_site]/templates/ja_elastica/css folder to be the style of the template.
When the layout is put in width of 1236px to 1439, the template will get the style of the css file
Extra-wide layout
- Details
- Category: Template guide
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.
Note:
- 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)
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} 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.
{codecitation} {/codecitation}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}
Etiam pellentesque magna id lacus imperdiet ac vulputate enim semper. Donec tincidunt.