Loading...
 
Skip to main content
Page actions
Print

GiakCss

FranceCore.net Skin

Firts skin with Tikiwiki for http://www.francecore.netQuestion 😊

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 )

  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.

Explanation

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;}
Page last modified on Monday 24 January 2005 14:09:20 UTC
History Files 1
Similar Slideshow