History of ThemeTutorial
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".
---
!!!-The css
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.
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. ~~#FF0000:__text__~~
3. ~~#0000FF:__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===__
~~#FF0000:__===some chickens have lips===__~~
---
^please note the lack of a space in the third case as compared to the second case.
'~~#FF0000:.foo .box~~' vs '~~#FF0000:.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="~~#FF0000:foo box~~"
and not:
class="~~#FF0000: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 }
as you can see, you have an immense amount of power if you wish to use these features.
---
!!!-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...
---
!!!-the templates
more to come...
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 css
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.
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. ~~#FF0000:__text__~~
3. ~~#0000FF:__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===__
~~#FF0000:__===some chickens have lips===__~~
---
^please note the lack of a space in the third case as compared to the second case.
'~~#FF0000:.foo .box~~' vs '~~#FF0000:.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="~~#FF0000:foo box~~"
and not:
class="~~#FF0000: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 }
as you can see, you have an immense amount of power if you wish to use these features.
---
!!!-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...
---
!!!-the templates
more to come...