Hello internet, I’m Bernard Sfez a Tiki specialist and in this video tutorial we’ll see together how you can bootstrap Tiki using the wiki syntax or Smarty template. I received a lot of good feedback about the design and demo screens in the Tiki I use in my video tutorial and so I will share with you how it was done.

But before that the future !
It's been a few weeks now the Tiki community started to work on Tiki 21 our next LTS that we include many features including a complete revamp of the mail system integration using Cypth, revamping the file gallery and many other enhancement like two-factor authentification, vueJS integration and more. You can follow the progress at dev.tiki.org/tiki21 and doc.tiki.org/tiki21. Links will be in the description of this Tiki Express tutorial. It is coming fast Tiki 21 release process will start end of January 2020.

Talking about commit and code big thanks to Fabio for babysitting our git integration. I believe that soon I will release a tutorial to out setting and managing Tiki using an IDE. For those who didn't jump yet I suggest to start with the tutorial we did together and to read the documentation at dev.tiki.org/Using-Git-with-Tiki again link will be in the description.

Back to this tutorial thanks to our developers specialised in design and CSS and specially Gary "arigato" ;-) since Tiki19 we integrated bootstrap for in Tiki and also we integrate the new version of Fontawesome. With those two you can create quickly awesome design and there are several way to do it. The ways I will show you now are the ways I use the most other tikiers may prefer building their page using the HTML plug-in, the layout plug-in, complete custom code or one of the other available option including some I have no idea about. If you are using a different way, please had your stone under the comments of this video.

Another note, this is a 10-minute tutorial so I will skip explanations about Bootstrap, CSS and Fontawesome.
I'll stick to simple code to show you how it works but I won't optimise bootstrap classes with collection of styles for all devices. You can find documentation about those in the description of this Tiki Express Tutorial.

When I bootstrap a Tiki I usually start by sketching and planning things on the page of paper so I can divide the work I have to do in the different area it is needed. It is just something to start with and change very often but it help me. I usually create a new theme per new Tiki to store my own CSS, icons,
favicons, templates etc. I’ll also use the setting from the control panel Look and Feel I'll use the modules and the rest should happen inside the wiki pages and the Smarty templates I store in my theme.
Let's see all that right now...

The basic about theme, CSS modules, Look and Feel panel

Tiki use themes to store together the design elements that will create the display for pages and contents. Tiki comes by default with several themes and each themes folders contained subfolders to organise and keep in a single folder the different elements related to your theme. Here we can see a new theme I created for this demo with an SCSS folder, a CSS folder, images and a templates folder we will talk about later when saving our smarty template. As you progress in your way to customise your Tiki those folders and the files the contents will be edited constantly. Let’s go on. When I bootstrap a Tiki I usually start by configuring the settings from the admin control panel Look and Feel I set up the layout of the Tiki to use a bootstrap menu, a brand icon, I remove the fixed width, etc. From this control panel you can also use the customization tab and add stuff like CSS styless or JavaScript code without the need to access your server files. Next, let's set up the modules you'll need like a top menu. I stick to a clean bootstrap design using generally the website icon and a top menu with a single level. My top menu is usually my user menu, menu ID 43 in that case. And I moved out the admin menu, the menu ID 42 at the bottom. Note that you better set to "no" the navbar toggle button else with the bootstrap toogle you will have two toggles one inside the other. You can also add styles to your modules set different modules for different areas or languages.

Fast forward. Here after a quick work how our Tiki look now.

We'll review the different ways I'll give to bootstrap a Tiki.

I mainly use three ways depending the case and depending the case I mix them. Sometimes I used wiki syntax relying on plug-ins like divs, buttons, icons or remarksbox. Sometimes I use a wiki page as template. Sometimes I use a Smarty template embedded in a wiki page. It is up to you to choose the right way depending of your skills and knowledge. Just with the editing permission on a wiki page you can start right away to bootstrapping.

How I do using the wiki syntax and wiki plug-in.

The wiki syntax is very powerful and you can check my tutorial about it if you need more information. This added to a few wiki plug-ins and you can build already very decent pages. And it is important to mention that unlike most of the other web application Tiki plug-ins are integrated and part of the package and supported by the community. It means that you don't need extra step to use them and they are updated if necessary with the Tiki release. I use mostly the div plug-in to bootstrap Tiki allowing me to set classes and ID’s. Of course you need to know and to refer to the bootstrap documentation to create a grid, or place elements. I'll use a few copy paste to show how I can create a bootstrap grid with a few elements in it.

We'll create a custom 404 page as example.

Let's do customized 404 page for example I set divs for row and col. Add some text styles... if you know how work bootstrap and CSS you got it already. I add a picture from Tiki galleries, something pretty trivial to show things can be mixed.
Save... Tada !

My pro; It goes fast and can be adjusted easily by editing your pages you keep history of the changes.
The cons; You need to do it for each page if you build complex pages the code review is not very easy and you will end eventually with missing closing divs or missing quotes, my speciality by the way. Also this method is CPU consuming. Tiki check wiki plug-ins in the page and there is a kind of limit of the number of plug-ins you can add on the same page. After you insert between 30 to 50 plug-ins on a page your code will be visible instead of what it should do. There is a setting for the maximum plug-ins passing passes Tiki will do and you can set a bigger number in the admin editing plug-in preference but if you reach the limit stop and move to one of the other metal I will describe. It is not good to overload your server and Tiki.

How to use a wiki page as template.

Ok let's move up a level.
You can use a wiki page, a wiki template to store HTML code to use a plugin to call it on your pages. While it was added to Tiki to be used in conjunction with the functionality of a plug-in I found a nice trick to use a wiki template on a page with an empty plug-in list so you can design the page completely. And using it I can more easily design pages with multiple sections like we see in so many bootstrap templated website.

How to integrate this page using the pluginList

I set a plugin list without any programmable filter or control block. Only the name of the page I'll use as template "mytemplate_tpl". I create the page using this method I can create my page outside Tiki in an editor. ...Or eventually I can use the syntax highlighter, "codemirror" integrated already in Tiki. You can activate it from the control panel editing and plugins features then toggle it on your wiki page and select the language you want to use. I pasted the code from a bootstrap example.
I save...re tada !
My pro; For this method are principally that it keeps everything editable quickly from any place as long as I have internet access without requiring shell or server files access. This also allow me to give access to the design for part of the Tiki to a super user or customer.
The big con; is the same that I just mentioned. There are case code will be accessible to a use without enough knowledge that may break it. But also using this method it is harder to manipulate data or variables something you can do using Smarty templates as we are going to see.

How to use a Smarty template.

Ok we move another level up. Smarty templates are used in Tiki so you can also use them this option is for programmers and require server access but it is much powerful than the two other methods. This time we'll use files templates stored in our theme sub templates folder. Programming them is more natural for developers and using Smarty template you can add condition and create, manipulate variables, to perform calculations from tracker data for example. I won't explain a lot here, if you are programmer you understand already most of these. Here I created a sample that display and filter data from a tracker and grab the value of an "amount" field to calculate some results. Note that to embed a wiki plug-in in a Smarty template you need the "wikiplugin" tag and the "literal" tag. Using this you can add a tracker in a tracker using the result of first tracker that has a relation with the second tracker. Here a table to display
data. a foreach to list all the element of a tracker as a table row (tr) I add a condition to display a green check icon if the value of the transaction status field equal "Completed". To create the calculation I first reset my variable to zero. Inside the foreach I add my value to my existing total so it is done for each pass.
I saved by editing refresh the page. Tada !

And same how to integrate it in a wiki page.

I have designed my bootstrap table my condition applied, calculation. Here two codes are obvious it is mainly the requirement to use the Smarty template.
The pro; is that you can manipulate that and condition. It is a lot easier and you can almost do whatever you want.
Again you should know what you are doing if you got there and you'll find documentation at doc.tiki.org/Smarty-templates. You will get help using the Tiki dev lists and the Tiki forum. A quick warning to use it that way and when developing you will need to be aware of permissions to use a page as Smarty template the Smarty options in the control panel and it is better to keep your Unified Index up to date all the time.

So show us your skills and your Tiki !
If you use these informations to improve a create a nice Tiki please add a link in the channel comments. Same if you have question with a remark. Due to a number of questions and insistence from some tikiers those last two ones. Tiki is not my own product it is my livelihood I am a member of the Tiki community and I have limited free time to help and do those tutorials. Those tutorials by the way are not monetized and they are released free of advertising and free for everyone to reuse under CCC license. When I can help, I always do with great pleasure but if you want things to go faster or you want me to do the work for you, you can hire me and I'll be glad to support your project. Saying that I'm sure now that Sir John Roberts team and Avishai got their answers about how to bootstrap a Tiki website. Guys run for it and share your nice bootstrapped Tiki when you're done.
My next video tutorial will be about the plug-in customSearch so if you don't want to miss my next tutorial be sure you subscribe to my channel.

Thanks again for watching this Tiki Express Tutorial and may the power of Bootstrap and Tiki be with you.

https://dev.tiki.org/Tiki21
https://doc.tiki.org/Tiki21
https://dev.tiki.org/Using-Git-with-Tiki
https://getBootstrap.com
https://fontawesome.com
https://hackerthemes.com/Bootstrap-cheatsheet
https://www.w3schools.com/Bootstrap/Bootstrap_ref_all_classes.asp
https://doc.tiki.org/PluginCustomSearch
https://www.Smarty.net
https://tiki.org/Smarty
https://doc.tiki.org/Smarty-Templates
https://themes.tiki.org/Template-Tricks
https://dev.tiki.org/Dev-Mailing-List
https://tiki.org/forums