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

You can find at the bottom of the page an attach file contains all you need to work (based on tikineat.css CSS skin )

1. Divide CSS files in multiple file, each one for a part of a feature, module, page, block, as you want (I do by Feature)
2. 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.

To begin a skin under Tikiwiki, we've to understand one or two things.

1. 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
2. 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;}