joomla 3 templates and rtl
DESCRIPTION
1. A short introduction to Joomla 3 - templates: bootstrap and less. 2. A simple way to easily convert a template to RTLTRANSCRIPT
![Page 1: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/1.jpg)
Yair Lahav
![Page 2: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/2.jpg)
Joomla 3 templating
Bootstap
Less
Templates and RTL
Core code changing
CSS handling
Less handling
![Page 3: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/3.jpg)
• 12-column grid
• width of 940 pixels
• row / span*
• span1 = 60px
• span12 = 940px
• Space between columns are 20px
Example:
<div class="row">
<div class="span4">…</div>
<div class="span8">…</div>
</div>
![Page 4: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/4.jpg)
Fluid Grid System uses %for column widths instead of pixels
<div class="row-fluid">
<div class="span4">…</div>
<div class="span8">
…
</div>
</div>
Offsetting Columns <div class="row">
<div class="span4">…</div>
<div class="span4 offset4">
…
</div>
</div>
![Page 5: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/5.jpg)
<div class="row">
<div class="span6">
Level 1 of column
<div class="row">
<div class="span3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
![Page 6: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/6.jpg)
Nesting with a fluid grid: Sum of nested rows should be 12 Not the parent column
<div class="row-fluid"> <div class="span6"> Level 1 of column <div class="row-fluid"> <div class="span6">Level 2</div> <div class="span6">Level 2</div> </div> </div> </div>
![Page 7: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/7.jpg)
Label Layout width Column width Gutter width
Smartphones 480 pixels and lower
Fluid columns, no fixed widths
Portrait tablet PCs 767 pixels and lower
Fluid columns, no fixed widths
Landscape tablet PCs
768 pixels and higher
42 pixels 20 pixels
Default 980 pixels and higher
60 pixels 20 pixels
Wide-screen monitor
1200 pixels and higher
70 pixels 30 pixels
![Page 8: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/8.jpg)
Variables @nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
#header { color: @light-blue; }
#header { color: #6c94be; }
![Page 9: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/9.jpg)
Mixins .bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
![Page 10: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/10.jpg)
Parametric Mixins .border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } #header { .border-radius(4px); } .button { .border-radius(6px); } #header-2 { .border-radius; }
#header { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .button { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } #header -2{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
![Page 11: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/11.jpg)
Nested rules
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
&:hover { text-decoration: none }
}
![Page 12: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/12.jpg)
Nested Media Queries
.one {
@media (width: 400px) {
font-size: 1.2em;
@media print and color {
color: blue;
}
}
}
@media (width: 400px) {
.one { font-size: 1.2em; }
}
@media ( width: 400px) and print and color {
.one { color: blue; }
}
![Page 13: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/13.jpg)
Core code changing <root>/libraries/joomla/document/ document.php
public function addStyleSheet($url, $type = 'text/css', $media = null, $attribs = array()) { if ($this->direction == 'rtl') { $file = new SplFileInfo($url); $rtlFileName = $file->getPath() . '/rtl/' . $file->getBasename(); if (JFile::exists (JPATH_ROOT . str_replace(JURI::Base(true), '', $rtlFileName))) { $url = $rtlFileName; } } $this->_styleSheets[$url]['mime'] = $type; $this->_styleSheets[$url]['media'] = $media; $this->_styleSheets[$url]['attribs'] = $attribs; return $this; }
![Page 14: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/14.jpg)
Zipped CSS or LESS files
Goto http://www.ahmadh.com/cssmirror/
You will get a new zip file
Create ‘rtl’ directory under the original
Extract the filesa from the new archive
Translate to Hebrew menus etc.
Insert your content
![Page 15: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/15.jpg)
![Page 16: Joomla 3 templates and rtl](https://reader033.vdocuments.mx/reader033/viewer/2022051818/54b7560e4a795917738b4651/html5/thumbnails/16.jpg)
Be part of official Joomla code
Online (inline) convertor