Loading...
 
Skip to main content

History: Bootstrap - Smarty Templates

Preview of version: 2

Templates

Templates are .tpl files written in Smarty and HTML and here you find the definitions of the default divs and elements and here the Ids and classes (css selectors) are named.
This page(s) refer aswell to the structure of the templates directories, as to the content of the .tpl files.
We will have to modify a whole lot of Tiki's ~800 .tpl files to make it fit for Bootstrap.

Main Layout

The Main Layout from Tiki 12 onwards is defined in
/templates/layouts/layoutname/layout_view.tpl
Formerly it was defined in /templates/tiki.tpl.
For the floating column design (left (#col2) and right (#col3) module zones), we need still the file /styles/lite/lite.css.

When you look at http://bootstrapped.fabricius.me/HomePage you will see a right column. The right column is actually the standart #col3, which is defined in layout_view.tpl

Copy to clipboard
templates/layouts/classic/layout_view.tpl or templates/layouts/bootstrap/layout_view.tpl or templates/layouts/whatsoevercustomlayout/layout_view.tpl

To make #col2 and #col3 responsive, meaning giving them defined relative width, you have to change the following in layout_view.tpl by adding a responsive column class (from twitter bootstrap.css) to aswell the #col2 as the #col3:

line 108:

{CODE()}
Copy to clipboard
example: {DIV(float=left class=col-sm-3)}{DIV} {DIV(float=left class=col-sm-3)}{DIV} {DIV(float=left class="col-sm-6 clearfix")}{DIV} or {DIV(float=left class=col-sm-2)}{DIV} {DIV(float=left class=col-sm-4)}{DIV} {DIV(float=left class=col-sm-2)}{DIV} {DIV(float=left class="col-sm-4 clearfix")}{DIV}

This is just a rough example ... must recheck and we must a) find out and define a system (best practice 😉 ) b) maybe code a few wikiplugins for the elements and maybe for inline editing

Mind: With three columns we could have more than 12 grid - 12 for the content and arbitrary for the left/right columns, dfined in layout_view.tpl


Specific Layout - Elements, Features, Sections

As said above, we will have a good bit of work, to figure out the Id numbers and classes of the Bootstrap css selectors and to replace the original Tiki selectors with the new bootstrap ones.

For all existing selectors that will be replaced, we need a table or an array (maybe similar to our language.php), to be able to convert existing old style themes (and mybe making some of them more or less responsive).

History

Advanced
Information Version
Mon 21 of Apr, 2014 10:19 GMT-0000 Gary Cunningham-Lee 7
View
Mon 21 of Apr, 2014 10:16 GMT-0000 Gary Cunningham-Lee Updated and simplified. 6
View
Tue 05 of Nov, 2013 02:17 GMT-0000 Torsten Fabricius ML asked to rename for the purpose of SEO optimisation 5
View
Thu 31 of Oct, 2013 21:58 GMT-0000 Torsten Fabricius templates should be enough for today 4
View
Thu 31 of Oct, 2013 21:25 GMT-0000 Torsten Fabricius work in progress 3
View
Thu 31 of Oct, 2013 21:08 GMT-0000 Torsten Fabricius halfway ... am at specific layout now 2
View
Tue 29 of Oct, 2013 02:26 GMT-0000 Torsten Fabricius start templates page 1
View