FranceCore.net Skin
Firts skin with Tikiwiki for http://www.francecore.net
CSS
- 168 Ko (172 226 octets)
- 149 files (pictures include)
- 30 files for 47Ko without pictures
- 4 folders
Templates (.tpl)
- 475 Ko (487 309 octets)
- 93 files
- 3 folders
The idea
You can find at the bottom of the page an attach file contains all you need to work (based on tikineat.css CSS skin )
- Divide CSS files in multiple file, each one for a part of a feature, module, page, block, as you want (I do by Feature)
- Set a few basic colors in a config file, and passing variables in all css, with a little script doing gradiant more lighty or darky.
Explanation
To begin a skin under Tikiwiki, we've to understand one or two things.
- All templates in /ROOT/templates/*.tpl can be surclass by yours TPL in /ROOT/templates/styles/francecore/*.tpl => so, you can design html structures, ergonomics, navigation and more
- In the Tikiwiki System Admin, you can choose your own CSS, hence influence the TPL's.
So, 2 places for your files :
- /ROOT/templates/styles/francecore/ <- TPL files
- /ROOT/styles/francecore.css <- your Root CSS with a folder at the same place to arranged pictures, Css, php and others stuff...
CSS in /root/styles/
Click the + to see the code. (sorry for some frenchy words)
A root CSS called in folder styles, then, we include a php config and all files stored in a folder francecore
- francecore.css
[+]- Appel dynamique du ROOT CSS
- @import "francecore/css_config.php.php";
- francecore/css_config.php (need francecore/css_color.php to work)
[+]-
<?
header('Content-type: text/css'); /* Declare CSS content type for a true render CSS like */
require('../../lib/smarty/libs/Smarty.class.php'); /* Smarty Class Required : if SMARTY isn't installed in LIB system, point on smarty's CLASS in TIKIWIKI */
/*As we work on local and online Server, 2 config possible */
$css_local_http_host = 'tiki.dev'; /* Your local Host you use usually (here a virtual one) */
$css_local_absoluteDir = '/var/www/v2/_testing/tiki19/'; /* Absolute Dir pointing on your local server WWW folder */
$css_online_absoluteDir = '/var/hedata/francecore/www/'; /* The same, but online Absolute Dir */
$css_foldername = 'tikineat_evolve'; /* Name of your CSS folder (same as CSS name often) */
class Smarty_css extends Smarty { /* Theoricaly, nothing to do inside the Class. !Beware at your Smarty's Folder! */
var $css_local_http_host;
var $css_local_absoluteDir;
var $css_foldername;
var $css_online_absoluteDir;
function Smarty_css($css_local_http_host, $css_local_absoluteDir, $css_foldername, $css_online_absoluteDir)
{
// Class Constructor. These automatically get set with each new instance.
$this->Smarty();
$this->css_local_http_host = $css_local_http_host;
$this->css_local_absoluteDir = $css_local_absoluteDir;
$this->css_online_absoluteDir = $css_online_absoluteDir;
$this->css_foldername = $css_foldername;
if ( $_SERVER["HTTP_HOST"] == $css_local_http_host){
$this->template_dir = $css_local_absoluteDir.'styles/'.$css_foldername.'/';
$this->compile_dir = $css_local_absoluteDir.'templates_c/';
$this->config_dir = $css_local_absoluteDir.'styles/'.$css_foldername.'/';
$this->cache_dir = $css_local_absoluteDir.'styles/'.$css_foldername.'/cache/';
}else{
$this->template_dir = $css_online_absoluteDir.'styles/'.$css_foldername.'/';
$this->compile_dir = $css_online_absoluteDir.'templates_c/';
$this->config_dir = $css_online_absoluteDir.'styles/'.$css_foldername.'/';
$this->cache_dir = $css_online_absoluteDir.'styles/'.$css_foldername.'/cache/';
}
$this->caching = true;
$this->assign('app_name','CSS');
}
}
include_once("css_color.php"); /* Don't touch this file : no config inside */
$Smarty_css = new Smarty_css($css_local_http_host, $css_local_absoluteDir, $css_foldername, $css_online_absoluteDir); /* Nothing to change here */
$Smarty_css->left_delimiter = '(- '; /* Changing the delimiter Smarty syntax*/
$Smarty_css->right_delimiter = ' -)';
/*
Here, you define your principal colors.
3 and 2 neutrals are sufficient.
** ! When you define a color, in CSS files, you can specify MORE clearly (lighter color) or MORE dark (darkness) ! **
- No number limit colors, specify them in ARRAY
- All colors are centralized in a this file. Easy to change all.
- 7 gradiant levels can be used
- Abstract gradiant by choosing a level
- 3 choice :
* light (1 to 7)
* dark (1 to 7)
* medium (the default color)
Exemple :
body{
background:(- $col.dark.dark3 -)
}
Here, you choose the DARK color and 3 levels darkness (try to see, technical is in css_color.php)
If you want little more clearly, lighter, you can write this in CSS :
body{
background:(- $col.dark.light1 -)
}
body{
background:(- $col.dark.medium -)
}
*/
$seed = array( /* Change name and hexadecimal values */
'grey' => $pref['color_grey'] = "#B5B5B5", // grey, neutral color
'blue' => $pref['blue'] = "#336699", // blue
'red' => $pref['red'] = "#993335", // red, complementary color for blue
'dark' => $pref['dark'] = "#2E4C6B" // darkness blue
);
$col = new color; /* Nothing to change here */
$Smarty_css->assign('col',$col->colset($seed)); /* Nothing to change here */
/*
List here al your CSS files.
** ! CSS rendering will amalgamate ALL files in ONE ! **
So, you can have as far as you want CSS file :)
- files will be more little
- More maintainable, more human readable
Exemple :
$Smarty_css->display('general.css');
$Smarty_css->display('login.css');
$Smarty_css->display('wiki.css');
$Smarty_css->display('agenda.css');
...
*/
$Smarty_css->display('general.css');
$Smarty_css->display('calendar.css');
$Smarty_css->display('categorie.css');
$Smarty_css->display('chat.css');
$Smarty_css->display('cms.css');
$Smarty_css->display('comment.css');
$Smarty_css->display('directory.css');
$Smarty_css->display('faq.css');
$Smarty_css->display('forum.css');
$Smarty_css->display('general_css.css');
$Smarty_css->display('image_gallery.css');
$Smarty_css->display('layout.css');
$Smarty_css->display('link.css');
$Smarty_css->display('menu_user.css');
$Smarty_css->display('message.css');
$Smarty_css->display('poll.css');
$Smarty_css->display('quizze.css');
$Smarty_css->display('shoutbox.css');
$Smarty_css->display('table.css');
$Smarty_css->display('tracker.css');
$Smarty_css->display('weblog.css');
$Smarty_css->display('wiki.css');
?>
- francecore/css_color.php
[+]-
<?
class color { /* Do not touch this Class */
function color() { }
function dech($x) { return substr('00'.dechex($x),-2,2); }
function coljoin($ar) { return '#'. $this->dech($ar['r']). $this->dech($ar['g']). $this->dech($ar['b']); }
function colsplit($col) {
$col = str_replace('#','',$col);
$co['r'] = hexdec(substr($col,0,2));
$co['g'] = hexdec(substr($col,2,2));
$co['b'] = hexdec(substr($col,4,2));
return $co;
}
function colvalue($col,$factor=1) {
$co = $this->colsplit($col);
foreach ($co as $a=>$c) {
$to = $c * $factor;
if ($factor > 1) {
$out[$a] = ($to > 255) ? '255' : $to;
} else {
$out[$a] = $to;
}
}
return $this->coljoin($out);
}
function colsaturate($col,$factor=1) {
$co = $this->colsplit($col);
$av = floor(($co['r'] + $co['v'] + $co['b']) / 3);
foreach ($co as $a=>$c) {
$out[$a] = $av + (($av - $c) / $factor);
}
return $this->coljoin($out);
}
function colset($cols,$pad=20) {
foreach ($cols as $k=>$col) {
$back[$k]['light6'] = "#FFFFFF";
$back[$k]['light5'] = $this->colvalue($col,'1.7');
$back[$k]['light4'] = $this->colvalue($col,'1.6');
$back[$k]['light3'] = $this->colvalue($col,'1.5');
$back[$k]['light2'] = $this->colvalue($col,'1.4');
$back[$k]['light1'] = $this->colvalue($col,'1.2');
$back[$k]['medium'] = $this->colvalue($col);
$back[$k]['dark1'] = $this->colvalue($col,'.8');
$back[$k]['dark2'] = $this->colvalue($col,'.6');
$back[$k]['dark3'] = $this->colvalue($col,'.5');
$back[$k]['dark4'] = $this->colvalue($col,'.4');
$back[$k]['dark5'] = $this->colvalue($col,'.3');
$back[$k]['dark6'] = "#000000";
}
return $back;
}
}
?>
- francecore/general.css (finally, the css, look at COLOR, BEWARE ! it's only an exemple )
[+]-
body {background :(- $col.dark.medium -);
color : white;
margin: 0px;
padding: 0px;
font:12px Geneva,Verdana,Arial,Helvetica,Sans-serif;}