[eluser]Blaze Boy[/eluser]
Themes
the first thing you must know about themes is they are normal view files so you could load thems inside view and vice-versa.
themes are located in a directory called 'themes' every theme is a folder like "default","glassy","sand"...etc
why should i use themes
the normal idea is to separate my views folder into some folders with theme names and then call the proper view file with the load->view function.
$theme_name = "default";
Quote:$this->load->view($theme_name.'themefile');
this will make you every time initialize the theme name variable ...
the enhanced idea is to make the theme name as a config item and call it whenever you want.
this is a very bad idea ... what if you want to separated themes from views, or you have a common view files for multiple themes, what if you want every theme to add an automatic doctype,javascript,style sheets,blocks inside blocks?, here we come with themes
Configuration of themes
themes has a config items inside
Code:
system/application/config/theme.php
Code:
Variable description default value
themes_directory the path to themes directory, the defualt themes directory located in the site root besides the system directory, if you want to change the location to make ex. your views folder as the themes folder you have to change it to APPPATH.'views'; themes
default_theme the default theme directory name, simply the name of the directory the contain the default view files inside the themes directory default
doctype the default doctype, we specified it here to standardize the way themes display xhtml1-trans
charset the default charset UTF-8
site_name your site name Site Name
page_title the defualt page title (to write it besides the site name if you didn't put it)
page_title_prefix the separator between page name and site name » [»]
page_title_suffix the end of title , you can change it to dot if you want
meta an empty array that has the meta lines of the theme
css_files css file paths to include in theme head
js_files javascript paths to include in thene head or foot
js_at_foot a boolean variable that specify if javascript will be added to theme head or foot, we normally add it to head but Yahoo suggested that we add it to foot for faster page loading and loading the more important content first. FALSE
the previous config items are the shared items between all themes , you theme can use the helpers to grap these data , just like the wordpress tags if you are familiar with , for example if you want to grap the title tag
Code:
<?=theme_title()?>
produces: <title> Site name » page title </title>
you can read the themes helper for more information
Note:the themes helper is not auto loaded , remember to load it before using the tags
How to load a theme file
there is 2 way of loading the themes files, one specified for controllers,
we extended the loader class with a function called theme just like the view function.
Code:
$this->load->theme('filename', array(), FALSE );
the first paramter is the file name, the second is an array of key value variables, the third is if you want to return the output or not. this function behaviour is exactly like the the view loader the difference is it loads the view files from the themes folder and the default theme folder.
the second way is a function and it's in the theme helper, it is specified to deprecate the loader->theme() with a short syntax and to return the output by default.
Code:
theme_load('filename',array(),TRUE);
Creating theme files
create a main frame file the has the main page view in the default directory,
Code:
<?= theme_doctype(); ?>
<html >
<head>
<?= theme_head(); ?>
</head>
<body>
//page content here
<?=theme_foot()?>
</body>
</html>
this will generate the page
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Site Name</title>
</head>
<body>
</body>
</html>
theme will autimatically get the javascript files and the style sheets in teh right place, when you add them using the theme_add() function,
you can use the theme_add() function to add css and javascript files, and meta,link,script blocks also are acceptable, when you use it it'll test the input to determine the type (CSS,JS,Meta) and add it the the proper array in config (without dupplication) , when the theme_head() function is called it'll grap the array and generate the code of charset,title,meta,css,js,block ... etc
you can use the theme_add() function to add an array or nested arrays or strings, the file names could be relative to the site or to the theme (default)
you can call another theme block from the theme file with the function
Code:
theme_load('blockname')
;, simple isn't it.
