Joomla 3 templates and rtl

Yair Lahav

Joomla 3 templating

Bootstap

Less

Templates and RTL

Core code changing

CSS handling

Less handling

• 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>

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>

<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>

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>

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

Variables @nice-blue: #5B83AD;

@light-blue: (@nice-blue + #111);

#header { color: @light-blue; }

#header { color: #6c94be; }

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;

}

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; }

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 }

}

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; }

}

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; }

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

Be part of official Joomla code

Online (inline) convertor