History of ThemeTutorial
Version 15
ThemeTutorial
TikiPro Theming Tutorial
This page is supposed to provide some information on how to create a theme for TikiPro.
there are some detailed informations on how the CssSchema is set up and how to use it without getting frustrated, cos "so many things change every time i change only one class".
within <themename> rename the original css file to <themename>.css
hence we go from
/themes/styles/blank/blank.css
to
/themes/styles/<themename>/<themename>.css
i will assume that you have copied /blank/ as a starting point
(if not, please copy all the contents of /blank/ (appart from blank.css) to your new theme folder to take full advantage of this tutorial
@import url("include.css");
do this for as many css files as you wish but note:
i have tested the above with the following browsers:
now we are ready to start with the css files.
This, however has absolutely nothing to do with the flexibility and power of the css file over the design of TikiPro. in fact, it's much easier and quicker to create a site that has an overall feel throughout. moreover, it's easy to customise particular sections exactly the way you need them if you so desire.
a certain level of css knowlegde however is required to do this.
however, if you believe that there is something to be learnt from this brief tutorial, carry on reading... first of all it's important that you have a look at CssSchema, which has a basic layout of the site in terms of classes used on all output pages.
2. <div class="module box">text</div>
3. <div class="admin box">text</div>
if you define the following:
.box { font-weight: bold; }
it will result in the following:
1. text
2. text
3. text
the text in all three cases will be bold, however, if you define it like this:
.box { font-weight: bold; }
.module { color: red; }
.admin { color: blue; }
it will result in the following:
1. text
2. text
3. text
this allows you to create a general style, look, feel using very few classes such as .box above (all the above are bold) but then go on and customise and finetune particular sections or groups of items simply.
consider the following 2 pages:
<div class="wiki">
<h1 class="title">pile of foo</h1>
<div class="content">this is more foo</div>
</div>
<div class="articles">
<h1 class="title">pile of foo</h1>
<div class="content">this is more foo</div>
</div>
the above only differ in the first line - either wiki or articles. as above it's easy to aply general definitions to title, and content. however it's also possible to influence, say, the content section of articles without changing settings in the wiki by defining the following:
.articles .content { background: silver; }
<div class="box">zero plus two equals one</div>
<div class="foo">
<div class="box">i can sing</div>
<div class="foo box">some chickens have lips</div>
</div>
if you wish to apply a definition to all boxes you use
.box { text-decoration: underline; }
zero plus two equals one
i can sing
some chickens have lips
if you wish to apply settings only to the boxes within the foo section
.box { text-decoration: underline; }
.foo .box { font-weight: bold; }
zero plus two equals one
i can sing
some chickens have lips
if you wish to apply settings only to the box that has foo associated with it
.box { text-decoration: underline; }
.foo .box { font-weight: bold; }
.foo.box { color: red; }
the result of all three definitions would be
zero plus two equals one
i can sing
some chickens have lips
obviously you can apply a setting to only the top box by setting definitions something like this
.box { color: blue; }
.foo .box { color: black }
zero plus two equals one
i can sing
some chickens have lips
as you can see, you have an immense amount of power if you wish to use these features.
there are some detailed informations on how the CssSchema is set up and how to use it without getting frustrated, cos "so many things change every time i change only one class".
the theme
[+]getting started
all themes that are available on your site are located in /themes/styles/here you will find one theme called blank. this is a theme which contains all the most important classes and ids listed without any definitions.
to create a new theme follow these steps
copy the theme 'blank' (or whichever theme you would like to modify) and rename the folder to your new themename.within <themename> rename the original css file to <themename>.css
hence we go from
/themes/styles/blank/blank.css
to
/themes/styles/<themename>/<themename>.css
i will assume that you have copied /blank/ as a starting point
(if not, please copy all the contents of /blank/ (appart from blank.css) to your new theme folder to take full advantage of this tutorial
taken from /themes/styles/blank/readme.css
if you wish to create a theme from scratch here is a list of all css files present in /blank/ to aid you:- blank.css
- main css file with all globally used classes and more
- customisation.css
- contains a list of classes that can be utilised to further customise the site
- debugwithoutline.css
- contains a set of classes and definitions that allow you to visualise all structures used on your site
- showdiv.css
- if included will visualise all divs used on the site including their classes and ids
- (works well with debugwithoutline.css)
- showstructure.css
- like showdiv.css but it will show you all classes and structures appart from divs
- (works well with showdiv.css and/or debugwithoutline.css
- showsitelayout.css
- visualises the layout of the main tiki ids used by surrounding them with coloured lines
- showpagelayout.css
- draws coloured borders on one side of certain elements
- to allow you to view the classes used without messing with your layout
including css files in your main css file
to include one of these files in your theme for debugging purposes, you can insert a line at the top of your css file@import url("include.css");
do this for as many css files as you wish but note:
- @import only works when it's before any class definitions
- showstructure.css | showdiv.css don't work with MSIE
- use opera or mozilla to utilise these files
- debugwithoutline.css only works with opera
i have tested the above with the following browsers:
- MSIE 6.02 (nothing works regarding structures)
- Mozilla Firefox 0.8 (everything works appart from debugwithoutline.css)
- Opera 7.5 (everything works)
now we are ready to start with the css files.
the css
[+]introduction
if you are coming from TikiWiki, you will notice that the css is much smaller compared to that of TikiWiki and there are very much fewer classes used.This, however has absolutely nothing to do with the flexibility and power of the css file over the design of TikiPro. in fact, it's much easier and quicker to create a site that has an overall feel throughout. moreover, it's easy to customise particular sections exactly the way you need them if you so desire.
a certain level of css knowlegde however is required to do this.
if you feel that you 'know' css you can use the 'blank' theme as a starting point for your new theme. please consult the readme in the 'blank' folder for further information.
please note:
there is a file called base.css which is called regardless of theme selected. this css contains some definitions which make theming easier and keeps the site operational should there be a problem with the selected theme.
if this should interefere with your work, please, either
please note:
there is a file called base.css which is called regardless of theme selected. this css contains some definitions which make theming easier and keeps the site operational should there be a problem with the selected theme.
if this should interefere with your work, please, either
- delete the file (not recommended)
- copy header.tpl (found in /kernel/templates/) to your theme directory and remove the line saying: @import url({$gTikiLoc.THEMES_PKG_URL}base.css);
however, if you believe that there is something to be learnt from this brief tutorial, carry on reading... first of all it's important that you have a look at CssSchema, which has a basic layout of the site in terms of classes used on all output pages.
a simple example
1. <div class="box">text</div>2. <div class="module box">text</div>
3. <div class="admin box">text</div>
if you define the following:
.box { font-weight: bold; }
it will result in the following:
1. text
2. text
3. text
the text in all three cases will be bold, however, if you define it like this:
.box { font-weight: bold; }
.module { color: red; }
.admin { color: blue; }
it will result in the following:
1. text
2. text
3. text
this allows you to create a general style, look, feel using very few classes such as .box above (all the above are bold) but then go on and customise and finetune particular sections or groups of items simply.
slightly more interesting
furthermore, it's easy to modify classes that are defined within other classes using the correct selectors.consider the following 2 pages:
<div class="wiki">
<h1 class="title">pile of foo</h1>
<div class="content">this is more foo</div>
</div>
<div class="articles">
<h1 class="title">pile of foo</h1>
<div class="content">this is more foo</div>
</div>
the above only differ in the first line - either wiki or articles. as above it's easy to aply general definitions to title, and content. however it's also possible to influence, say, the content section of articles without changing settings in the wiki by defining the following:
.articles .content { background: silver; }
the nitty gritty
consider the following page<div class="box">zero plus two equals one</div>
<div class="foo">
<div class="box">i can sing</div>
<div class="foo box">some chickens have lips</div>
</div>
if you wish to apply a definition to all boxes you use
.box { text-decoration: underline; }
zero plus two equals one
i can sing
some chickens have lips
if you wish to apply settings only to the boxes within the foo section
.box { text-decoration: underline; }
.foo .box { font-weight: bold; }
zero plus two equals one
i can sing
some chickens have lips
if you wish to apply settings only to the box that has foo associated with it
.box { text-decoration: underline; }
.foo .box { font-weight: bold; }
.foo.box { color: red; }
the result of all three definitions would be
zero plus two equals one
i can sing
some chickens have lips
please note the lack of a space in the third case as compared to the second case.
'.foo .box' vs '.foo.box'
'.foo .box' vs '.foo.box'
note for MSIE: MSIE only renders .foo.box {...} if this is the actual order in which they are mentioned. i.e. .foo.box {...}
only renders if the class is called:
class="foo box"
and not:
class="box foo"
only renders if the class is called:
class="foo box"
and not:
class="box foo"
obviously you can apply a setting to only the top box by setting definitions something like this
.box { color: blue; }
.foo .box { color: black }
zero plus two equals one
i can sing
some chickens have lips
as you can see, you have an immense amount of power if you wish to use these features.
building the theme
[+]Well the first thing you'll probably want to start with is font style and background.
font-family: sans-serif;
font-size: normal;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
body {
background-color: gray;
background-image: url("images/background.jpg");
}
Take a look at CssSchema and see how you want to layout your site. Lets say you wanted #tikitop to always be 120px high with a silver background, you'd set accordingly.
height: 120px;
}
Next, you'd like to set a border around #tikimain.
}
more to come...
- {
font-family: sans-serif;
font-size: normal;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
body {
background-color: gray;
background-image: url("images/background.jpg");
}
Take a look at CssSchema and see how you want to layout your site. Lets say you wanted #tikitop to always be 120px high with a silver background, you'd set accordingly.
- tikitop {
height: 120px;
}
Next, you'd like to set a border around #tikimain.
- tikimain {
}
more to come...
slideshows
[+]slideshows are a feature of the wiki and allow you to display the wiki page in a particular way without any excess information such as columns or banner.
the slideshow pages are set up in a similar way as the wiki page and use the same classes. you can pick a theme that will be used when displaying wiki pages as a slideshow.
if you would like to use your own theme as the style for slideshows but would like something like 'larger text', you can create slideshow.css in your theme directory and add all your definitions in there. this file will be loaded in addition to your regular css and you can thus override any settings made above.
also, there is a folder called slideshows. this contains some sample slideshow.css files, which you can copy (and rename) to your theme dir, saving you some time.
so, the easiest method to enlarge your slideshow text, is to create a file called 'slideshow.css' in your theme directory and then copy and paste the content of 'slideshows/enlargetext.css' to that file and save - voila!
just to illustrate, here is the content of enlargetext.css:
h1,.title {
font-size: 2.4em;
line-height: 120%;
}
.content {
font-size: 1.3em;
line-height: 120%;
}
the slideshow pages are set up in a similar way as the wiki page and use the same classes. you can pick a theme that will be used when displaying wiki pages as a slideshow.
if you would like to use your own theme as the style for slideshows but would like something like 'larger text', you can create slideshow.css in your theme directory and add all your definitions in there. this file will be loaded in addition to your regular css and you can thus override any settings made above.
also, there is a folder called slideshows. this contains some sample slideshow.css files, which you can copy (and rename) to your theme dir, saving you some time.
so, the easiest method to enlarge your slideshow text, is to create a file called 'slideshow.css' in your theme directory and then copy and paste the content of 'slideshows/enlargetext.css' to that file and save - voila!
just to illustrate, here is the content of enlargetext.css:
h1,.title {
font-size: 2.4em;
line-height: 120%;
}
.content {
font-size: 1.3em;
line-height: 120%;
}
the icons
[+]in TikiPro it is possible to use your own set of icons to give the site the ultimate in customisation and theming flexibility.
more to come...
Note: only available from version clyde onwards.
more to come...
the templates
[+]more to come...