How to bootstrap a Tiki


Hello internet, I’m Bernard Sfez a Tiki
specialist and in this video tutorial we’ll see together how you can bootstrappe
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 specialized 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 optimize
bootstrap classes with collection of styles for all devices. You can find
documentation about those in the description of this Tiki Express
Tutorial. Now in this Tiki Express Tutorial will review together;
The basic about theme, CSS modules, Look and Feel panel. We’ll review the different
ways I’ll give to bootstrap a Tiki. How I do using the wiki syntax and wiki
plug-in. We’ll create a custom 404 page as example. How to use a wiki page
as template how to integrate this template using the plug-in list. How to use
a Smarty template. And same how to integrate it in a wiki page. 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… 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 organize 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 customize
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. 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. 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. lLt’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. 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.
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 user 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. 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 ! 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.Yyou 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.

Comments 1

Leave a Reply

Your email address will not be published. Required fields are marked *