Joomla 3 templates and rtl
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Joomla 3 templates and rtl

  • 492 views
Uploaded on

1. A short introduction to Joomla 3 - templates: bootstrap and less. ...

1. A short introduction to Joomla 3 - templates: bootstrap and less.
2. A simple way to easily convert a template to RTL

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
492
On Slideshare
470
From Embeds
22
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
0
Likes
1

Embeds 22

http://www.joomla.org.il 22

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Yair Lahav
  • 2.  Joomla 3 templating    Bootstap Less Templates and RTL    Core code changing CSS handling Less handling
  • 3. • • • • • • 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>
  • 4.  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>
  • 5. <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>
  • 6.  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>
  • 7. 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
  • 8.  Variables @nice-blue: #5B83AD; @light-blue: (@nice-blue + #111); #header { color: @light-blue; } #header { color: #6c94be; }
  • 9.  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; }
  • 10.  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; }
  • 11.  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 } }
  • 12.  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; } }
  • 13.  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; }
  • 14.        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
  • 15.   Be part of official Joomla code Online (inline) convertor