}else{ ?>

Metro UI template

Build Windows 8 style websites, with ease

Tutorials


Getting started

General config

In the file config/general.php you can define the general settings. Look at the comments for each setting to see what they do. For general layout things, open the file config/layout.php

Main navigation (top bar buttons)

The top bar buttons are defined in config/main-nav.php. As you can see, you can just easily add/remove buttons by adding this code:


<a id="group0">
	<img src="img/yourimage.php" alt="image description"/>
	The text
</a>

Change the number of the a rel argument (group0) to the number of the group you want the tiles to scroll to when the button is clicked. (0 is the first group, then comes 1 etc...)

Tiles

Tiles are the main component in the template. They will be mostly seen on your homepage, but can also used in a sidebar on a subpage or in panel.

In this part, only the usage of tiles on the homepage will be explained. See the sidebar or panels section to see how to use them in those elements.

The config file

To define our tiles, we use the file config/tiles.php. A file config/tiles-mob.php also exists, which is to define tiles for the mobile site version. We will use the normal file.

In the file you downloaded, there will be probably some tiles pre-defined. It's the most handy to "comment" them so they won't have any influence. Then we can start with adding our own tiles.

Adding tiles

Tiles are added by just one line. We can setup the most basic tile (a tile with a text title and description and optionally) by adding this code to the tiles.php file in the config folder.

$tile[]= array("type"=>"simple")

As you can see, the only argument that is required is the "type" argument. There are various types of tiles, which will be explained later. If you load your site now, the tile should be visible in the first tilegroup

But there are also optional arguments, which we will use to adapt the tile to our needs.

Typically, a tile has these arguments, but they can differ (see next part of the tutorial)

$tile[] = array("type"=>"simple","group"=>0,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"#999","url"=>"","labelText"=>"","labelColor"=>"#333","labelPosition"=>"top","classes"=>"");

To explain the arguments one by one:

  • group: the tilegroup of the tile (the first tilegroup is tilegroup 0 ! )
  • x: the horizontal position of the tile in tile (ex 0,1,2...)
  • y: the vertical position of the tile in tile (ex 0,1,2...)
  • width: the width of the tile in tiles (ex 1,2,3...)
  • height: the height of the tile in tiles (ex 1,2,3...)
  • background: the background color of the tiles, can be HEX or RGB code. (ex #DDD or #F60)
  • url: the page that the tile should link to. If you want to open a subpage of which the source is in the pages folder, you can just type its filename (ex: typography.php). If you want a normal url, you can just type that url (ex: http://google.com). If you want to open the url in a new tab, add the prefix "newtab" (ex: newtab:http://google.com). If you want to force the link-generator to not change the link that you gave for whatever reason, add the prefix "gotolink:" or "external:" (ex gotolink:pages/typography.php or external:pages/typography.php).
  • labelText: if you want a label (that little thingy on some tiles on the bottom or top with a small text in it), fill in the text here. If you don't want one, just leave it blank.
  • labelColor: the color of the label (ex: #333);
  • labelPosition: can be "top" or "bottom".
  • classes: the things filled in here are classes that will be added to the html code of the tile. This can be handy to apply a part of CSS or javascript to a tile. If you want multiple classes, just leave a space between them. (ex "class1 class2 class3")
Please note that all these arguments are optional! If they are not used, the tiles' default arguments will be used. Also be aware that the order of the arguments does NOT matter.

Tile-specific arguments

All tiles have their own specific arguments. All the tiles included in the template will be explained here. I will not explain the standard arguments (they are explained in the previous paragraph).

Simple tile

A tile with a title, a description and an optional image to the left of the title.

$tile[] = array("type"=>"simple","group"=>0,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"#999","url"=>"","title"=>"The title","text"=>"the description text","img"=>"","imgSize"=>"50","imgToTop"=>"5","imgToLeft"=>"5","labelText"=>"","labelColor"=>"#333","labelPosition"=>"bottom","classes"=>"");
  • title: the main title of the tile
  • text: the description text
  • img: the url of the image left to the title, the path is absolute to the root folder. If you don't one one, leave this argument blank or don't use it.
  • imgSize: the size of the image in pixels, if you use one.
  • imgToTop: the space between the top and the image in pixels
  • imgToLeft: the space between the left side of the tile and the image in pixels
  • imgAlt: alt of the image (optional)
  • imgTitle: title of the image (optional)

Centered tile (only available in >=v4.b3)

A tile with a title, can change background/text color on hover


$tile[] = array("type"=>"centered","group"=>0,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"#509601","backgroundHover"=>"",
	"color"=>"#FFF","colorHover"=>"","url"=>"",
	"title"=>"Example",
	"img"=>"","imgAlt"=>"","imgTitle"=>"",
	"imgSize"=>"50",
	"imgToTop"=>"0",
	"imgToLeft"=>"0",
	"labelText"=>"",
	"labelColor"=>"#F90",
	"labelPosition"=>"top",
	"classes"=>"",
);
  • backgroundHover: background color when hovered
  • color: text color when not hovered
  • colorHover: color of text when hovered
  • title: the main title of the tile
  • img: the url of the image left to the title, the path is absolute to the root folder. If you don't one one, leave this argument blank or don't use it.
  • imgAlt: alt of the image (optional)
  • imgTitle: title of the image (optional)
  • imgSize: the size of the image in pixels, if you use one.
  • imgToTop: the space between the top and the image in pixels
  • imgToLeft: the space between the left side of the tile and the image in pixels

Centered Slide tile (only available in >=v4.b3)

A tile with a title and shows a text when hovered


$tile[] = array("type"=>"centeredSlide","group"=>0,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"#509601",
	"title"=>"Example", "text"=>"will be shown when hovered",
	"direction"=>"left"
	"img"=>"","imgAlt"=>"","imgTitle"=>"",
	"imgSize"=>"50",
	"imgToTop"=>"0",
	"imgToLeft"=>"0",
	"labelText"=>"",
	"labelColor"=>"#F90",
	"labelPosition"=>"top",
	"classes"=>"",
);
  • backgroundHover: background color when hovered
  • colorHover: color of text when hovered
  • title: the main title of the tile
  • text: text shown when hovered
  • direction: left/top/bottom/right = direction of sliding animation
  • img: the url of the image left to the title, the path is absolute to the root folder. If you don't one one, leave this argument blank or don't use it.
  • imgAlt: alt of the image (optional)
  • imgTitle: title of the image (optional)
  • imgSize: the size of the image in pixels, if you use one.
  • imgToTop: the space between the top and the image in pixels
  • imgToLeft: the space between the left side of the tile and the image in pixels

Image tile

A tile with an image and optional description


$tile[] = array("type"=>"img","group"=>0,"x"=>0,"y"=>0,'width'=>1,'height'=>1,"background"=>"#777","url"=>"",
	"img"=>"","desc"=>"The description text","showDescAlways"=>true,"imgWidth"=>1,"imgHeight"=>1,
	"labelText"=>"","labelColor"=>"#AAA","labelPosition"=>"top","classes"=>"");
  • showDescAlways; wether the description should always be shown or only on hover
  • imgWidth / imgHeight; the height of the image in tiles (so smaller image is 0.5)

Scrolling text

A live-tile with text that changes

$tile[] = array("type"=>"scrollText","group"=>0,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>#777","url"=>"",
"title"=>"Title","text"=>array("the first","second.."),"scrollSpeed"=>5000,"img"=>"","imgSize"=>"50","imgToTop"=>"5","imgToLeft"=>"5",
"labelText"=>"","labelColor"=>"#AAA","labelPosition"=>"bottom","classes"=>"");
Sliding tile

A flexible tile with many options to slide an image on hover to show the text underneath it.


$tile[]=array("type"=>"slide","group"=>0,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"#777","url"=>"",
	"text"=>"Hovered text","img"=>"img/yourimage.php","imgSize"=>1.0,"slidePercent"=>0.40,"slideDir"=>"up","doSlideText"=>true,"doSlideLabel"=>true,"border"=>false,
	"labelText"=>"","labelColor"=>$defaultLabelColor,"labelPosition"=>$defaultLabelPosition,"classes"=>"");
  • text; text that will be visible when the tile is hovered
  • imgSize; The size of the image in percent (so 0.5 will be 50% of tile width)
  • slidePercent; how far the image should slide when hovered in percent (higher value is more sliding)
  • slideDir: in which direction the image should slide
  • doSlideText: wether the text under the image should "slide-in" or if it just is static.
  • doSlideLabel: wether the label should slide with the image when the tile is hovered
  • border: wether a border around the img should be shown

Sliding tile with folding effect

A sliding tile that folds. Cool effect.


$tile[]= array("type"=>"slidefx","group"=>0,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>$defaultBackgroundColor,"url"=>"",
"text"=>"Text description","img"=>"img/yourimage.php",
"labelText"=>"","labelColor"=>$defaultLabelColor,"labelPosition"=>$defaultLabelPosition,"classes"=>"",);
  • text: text under the image
  • img: img url relative to index.php folder

Slideshow tile

An image gallery tile


$tile[] = array("type"=>"slideshow","group"=>0,"x"=>0,"y"=>0,"width"=>2,"height"=>1,"background"=>"#444","url"=>"page.php",
	"images"=>array("img/img1.png","img/img2.png","img/img3.png","img/img4.png"),
	"effect"=>"slide-right, slide-up, slide-down, slide-left",
	"speed"=>4000,
	"arrows"=>false,
	"texts"=>array("Description for image 1","Description for image 2","Description for image 3", "Description for image 4"),
	"labelText"=>"Example label text","labelColor"=>"#FF8000","labelPosition"=>"top",
	"classes"=>"");

  • images: array with images
  • effect: the transition effect. Possibilities: fade,slide-right,slide-up,slide-left,slide-down,flip-horizontal,flip-vertical,slide-hor-alternate,slide-ver-alternate. (those last alternate effects slide up and down or right and left). By giving multiple effects, separated by comma's, the template will randomly choose an effect each time.
  • texts: array with texts under the image (set "texts"=>"" when you dont want any descriptions
  • speed: time between images
  • arrows: display arrows to go to next/previous image or not
  • alts: array with alt descriptions for images (optional)

Flip Tile

A tile with an image on the front and text on the back, flips when hovered


$tile[] = array("type"=>"flip","group"=>0,"x"=>0,"y"=>0,'width'=>1,'height'=>1,"background"=>"#c82345",
	"url"=>"page.php","img"=>"img/img1.png","imgSize"=>0.7,
	"direction"=>"horizontal",
	"text"=>"text on the backside","labelText"=>"","labelColor"=>"#333","labelPosition"=>"top","classes"=>"");	
  • img: img url relative to root
  • imgSize: size of image, relative to tile size (so 0.7 covers 70% of the tile and 1 covers the whole tile)
  • direction: horizontal or vertical flip
  • text: text on backside:

Flip Tile Text

A tile with text on the front and text on the back, flips when hovered


$tile[] = array("type"=>"flipText","group"=>0,"x"=>0,"y"=>0,'width'=>1,'height'=>1,"background"=>"#c82345",
	"url"=>"page.php",
	"direction"=>"horizontal",
	"title"=>"Text on front",
	"img"=>"","imgAlt"=>"","imgTitle"=>"",
	"imgSize"=>"50",
	"imgToTop"=>"0",
	"imgToLeft"=>"0",
	"text"=>"text on the backside","labelText"=>"","labelColor"=>"#333","labelPosition"=>"top","classes"=>"");	
  • title: text on front
  • direction: horizontal or vertical flip
  • text: text on backside:
  • img: the url of the image left to the title, the path is absolute to the root folder. If you don't one one, leave this argument blank or don't use it.
  • imgSize: the size of the image in pixels, if you use one.
  • imgToTop: the space between the top and the image in pixels
  • imgToLeft: the space between the left side of the tile and the image in pixels

Subpages

Subpages are used to display content on. Every subpage should be have the PHP extension (filename.php) and should include this code on top of the page:

<?php
$subNav = array(
	"The first title ; thesubpagefile.php ; #509601;",
	"Another title ; otherfileurlInPagesFolder.php ; #509601;",
	"Link to a page ; newtab:http://google.com ; #509601;",
);

set_include_path("../");
include_once("inc/essentials.php");

As you can see, this piece of code will generate the subnav and init some functions for subpages. The file url of the subnav link is relative to the pages folder. If you want another file (so not a metro page), add the prefix "external:" so it becomes external:file.php . If you want to open a link in a new tab, add the 'newtab:' prefix.

Eventually, we can highlight a topbar button. To do that, we'll add this piece of code after the previous:

<script>
$mainNav.set("text of the top bar button")
<script>

the argument of the set() is the text of the top bar button. It must be EXACTLY the same!

Pretty URLS and Google SEO

To get everything right, you should open config/pages.php and add every page your template uses here! This is needed for pretty urls and google indexing. The syntax is:

$pageTitles['pagefile.php'] = "The name is should have";
The pagefile is relative to the /pages/ folder!

Sidebars

Defining sidebar tiles

Before we can put a sidebar on a page, we need to define its tiles. We can do that in the file "config/sidebar.php". The markup is as following:


$sidebar["name"] = array("pos"=>"left","size"=>2,"full_height"=>false,
	"tiles"=>array( /* Open the array of sidebar tiles */
		$tile[] = array("type"=>"simple","group"=>0,"x"=>0,"y"=>0,'width'=>2,'height'=>0.35,"background"=>"#777","url"=>"newtab:jquery.com","title"=>"jQuery","text"=>""),
		$tile[] = array("type"=>"simple","group"=>0,"x"=>0,"y"=>0.35,'width'=>2,'height'=>0.35,"background"=>"#777","url"=>"newtab:http://ace.ajax.org/","title"=>"ACE editor","text"=>""),
		$tile[] = array("type"=>"simple","group"=>0,"x"=>0,"y"=>0.7,'width'=>2,'height'=>0.35,"background"=>"#777","url"=>"newtab:http://crisp.tweakblogs.net/blog/cat/716","title"=>"JSMin+","text"=>""),
		$tile[] = array("type"=>"simple","group"=>0,"x"=>0,"y"=>1.05,'width'=>2,'height'=>0.35,"background"=>"#777","url"=>"newtab:https://github.com/serbanghita/Mobile-Detect","title"=>"Mobile-Detect","text"=>"")

	), /* Close the array of sidebar tiles */
	"load_plugins"=>array() /* Load plugins from the plugin folder so you can use tileplugins */
);
As you can see, the tiles are defined in an array. Note that between differnt tiles a comma (' , ') is placed instead of a ;-sign!

Using sidebars

To add a sidebar on a subpage or in a sidepanel, you need the add the following code under the top subnav php-code of the page:

<?php
/*Include a sidebar */
include_once("inc/sidebar.php");
showSidebar("name"); // include the name of your sidebar, set in config/sidebar.php
?>

Panels

To use panels you first need to define the panel contents in a file in the /panels/ folder. So just create a file in that folder and put some text content in it. To make the panel open, just create a url that links to that panel. The template will automaticly detect that it's a panel. So if you have a file panels/testfile.php you can call it by using <a href="panels/testfile.php">This will open the panel</a>

Extra settings

You can edit some settings in the file plugins/panels/settings.php. You can change the panels width, background color, wether the panel should dissapear when something else on the page is clicked, and you can set preloaded panels.

Preloaded panels

We can preload a panel in the background so it'll load without waiting when the user wants it. This can be handy for some heavy panels that will be used often, to load faster. But it also slowdowns the loading of the main webpage.

To set a preloaded panel, add the filename of the file in the /panels/ folder in the array $preloadedPanels. So let's assume we have a file panels/test.php, the array would become $preloadedPanels = array("test.php") . You can add more items by seperating them with commas (like normal php arrays). Example: $preloadedPanels = array("test.php","test2.php","another.php")

Mobile version

To get your site mobile-ready, you can define some config things in config/mobile.php. The tile file for the mobile version is config/tiles-mob.php. Please be aware that tiles that works with hover-actions dont work on touchscreen devices.

To visit your mobile site, go to yoururl.com/mobile/

Passing URL parts to JS or PHP

If you use to have some information stored in the URL, you'll have to pass it to Javascript or PHP.

Passing to Javascript

To pass things to JS, we need to add the var to the url with a "&"-character in front of it. So if the url is:
http://metro-webdesign.com/v/#!/docs-and-tutorials&variable&hello, the template will detect that the script consists out of 3 parts:
the page-url is docs-and-tutorials, the second thing in the url is "variable" and the third thing is "hello". These will be stored in the array $hashed.parts . So if we want to see what's on the second position of the url, we'll use this code:
alert($hashed.parts[1])
which will return "variable".

To check if something is a part of a url, we can use:


if(inArrayNCindex("variable",$hashed.parts) != -1){
/* Do something*/
}

We can also check the variable in a PHP-like way. That means that it's something like "http://metro-webdesign.com/v/#!/docs-and-tutorials&test=one", we want to know what the value of the variable test is. In this case it's "one". We can do that by using this code:


<script>
for(var i =1;i<$hashed.parts.length;i++){
	var v="test";// HERE IS "TEST" THE VARIABLE NAME WE NEED
	if($hashed.parts[i].substr(0,(v.length+1)) == v+"="){ 
		var t = $hashed.parts[i].substr(v.length+1); 	
        /* In the variable t is stored now what the requested part is, in the example it's "one" */	
	}
}
</script>

Passing to PHP

To pass URL parts to PHP and retreive them by using "GET" in your PHP scripts, just add a question mark in the hash part of the URL. Example: http://metro-webdesign.com/v/#!/docs-and-tutorials?test=one

Now, you can use in PHP $_GET["test"] and it'll say the value is "one". To debug and see all the things stored in the URL put this on the page:

<?php print_r($_GET);?>

Passing to JS and PHP

To combine both methods we can use the url http://metro-webdesign.com/v/#!/docs-and-tutorials&java?test=one

To get what's on the second place in the Javascript URL, we use $hashed.parts[1], which will return "java". To get the PHP part we'll use $_GET['test'] in PHP, which will return "one".

Another example: http://metro-webdesign.com/v/#!/docs-and-tutorials&java=two?test=one

To get what the value of "java" is in the URL, by using javascript, will use this code, which will return ""two":


<script>
for(var i =1;i<$hashed.parts.length;i++){
	var v="java";
	if($hashed.parts[i].substr(0,(v.length+1)) == v+"="){ 
		var t = $hashed.parts[i].substr(v.length+1); 	
		alert(t); // returns "two" for the example	
	}
}
</script>

To get the PHP part we'll use $_GET['test'] in PHP, which will return "one".

Adding your own code & modding

It's very important to understand the file structure. There are 2 basic rules;

1. Don't mod any core files because they can be overwritten by updating
2. If you do change a core file, remember what you've changed because you'll need to reapply it when you'll update.

To limit core file editing to a minimum, the template has a smart plugin system.

Adding your own CSS

Never do changes to the files inside the css folder. Those files get overwritten often with updates. The right way to add CSS is by creating a file called plugins/your/plugin.css (create the your folder if it doesn't exist yet and create a file called plugin.css in it.)

Now you can add any CSS you want in the plugins/your/plugin.css file.

Adding your own Javascript

Never do changes to the files inside the js folder. The right way to add Javascript is by creating a file called plugins/your/plugin.js (create the your folder if it doesn't exist yet and create a file called plugin.js in it.)

Now you can add Javascript in the plugins/your/plugin.js file.

Events
The template supports to run some javascript when a special action is done. For example, you can configure that a piece of code runs when a subpage is loaded.

Events:


$siteLoad // when the site is loaded (not when changing subpages)
$windowResizeBegin // when the window is resized (runs before the normal code)
$windowResizeEnd // when the window is resized (runs after the normal code)
$beforeTilesShow // right before the tiles are displayed
$afterTilesShow // right after the tiles are displayed
$onTilesPrepare  // triggered when the current page is fading out and prepapring to show the tiles  (for example, when going from a subpage to the homepage)
$tileGroupChangeBegin ; // when changing tilegroups (before animation)
$tileGroupChangeEnd  // when changing tilegroups (after animation)
$beforeSubPageShow  // when going to a subpage (before the page is shown)
$afterSubPageShow // when going to a subpage (after the page is shown)
$arrowsPlaced  // when the left/right arrows for the tilegroups are placed
$bgScroll  // when the background scrolls
$onScroll  // when scrolling the page with the mousebutton (not when the tiles are shown!)
$fixScrolling // needed for repsonsive design, not very important
$recalcScrolling  // same as ^
$subNavMake // when the subpage is loaded and the subnav items are being generated
$subNavActive // when highlighting the current subnav item
$mainNavInit// when the page is loaded and the mainnav is generated
$mainNavActive // when highlighting the current mainnav item
$mainNavSet // when a mainnav is manually highlighted
$makeLink // when a link is generated (you need to understand the template better to really understand when this triggers)
$makeLinkHref  // almost the same as ^
$transformLinks  // when subpage is loaded and the non-metro links are transformed to better links
$hashChangeBegin  // when the hash is changed (runs before the normal code). 
$hashChangeEnd // when the hash is changed (runs after the normal code). 
$panelOpen // when a sidepanel is opened
$toColumn // when the layout changes to "column"
$toSmall  // when the layout changes to "small"
$toFull // when the layout changes to the normal "full" layout
$sidebarShow // when a sidebar is loaded
$sidepanelShow // when a sidepanel is shown
$sidepanelHide // when a sidepanel is hidden
    

To run some javascript code at a specific event, we'll use this:

$.plugin($afterSubPageShow,{ // <-- event is here
    showAlert:function(){ // <-- random function name is here (choose whatever you want)
        
        /* The code that will be executed */
		alert("this will be shown when the subpage is loaded!");
        
	}
});

Replace the $afterSubPageShow with any event you want. Change the function name to whatever you want. And add your code.

Adding code to index.php

The index file is a very important file if you want to add features. Unfortunately, it gets overwritten almost every update, so it's not a good idea to modify it directly.

By using plugins, we can solve that problem. We can insert the code at a specific part in the index.php file using the following code snippet in a file plugins/your/plugin.php (create the file if it doesn't exist yet):

function theFunctionName(){ //theFunctionName can be whatever you want, but must be unique!
    	/* Run php code on the event, or echo something*/
        echo "This will be appended to the pages body!"; 
    }
    onEvent("bodyEnd","theFunctionName"); // "bodyEnd" is the place where we want to insert the code, theFunctionName is the function that must be ran.

As you can see, we can output our code by echoing it. This can be useful if you want to add some html to the page.

Other events (like "bodyEnd") are:

beforeDoctype
afterDoctype
fileInclude
headStart
headEnd
bodyBegin
bodyEnd
mainNavBegin
mainNavEnd
headerEnd
tileContainerEnd
contentWrapperBegin
contentWrapperEnd
centerWrapperEnd
siteFooter
wrapperEnd

The names say where they will be triggered. If you want to know the exact moment/location of them, just search them in the index.php file

Knowing the current device.

It can be handy to know in you code what device the page is opened with.

In javascript you can use the var "device". If you include this for example in a subpage:

<script>
alert(device); // will output "desktop" if visited with a desktop, will output "mobile" if visited with a phone, will output "tablet" if visited with a tablet and will output "mobileOnDesktop" if a mobile phone is visiting the full (desktop) site.
</script>

The body also gets a class with the current device. So if you want some CSS for mobile phones only, you can use

.mobile #yourElement{
/* this css will only apply for mobile phones */
}

In PHP scripts, we can also use the "device" var. Note that this only works in scripts that are included in the 'main page'. This means that if you want to get the "device" var in the PHP of a subgpage, you'll have to reinclude inc/detectdevice.php

<?php
echo $device; // will output "desktop" if visited with a desktop, will output "mobile" if visited with a phone, will output "tablet" if visited with a tablet and will output "mobileOnDesktop" if a mobile phone is visiting the full (desktop) site.
?>

Knowing the current page

In javascript, the current page is stored in the value $page.current

<script>
alert($page.current); // will output the current page name or "home" if it's the title page.
</script>

Knowing the current tilegroup

In javascript, the current page is stored in the value $group.current

<script>
alert($group.current); // will output the current group number or-1 if no tiles are shown.
</script>

Knowing the page layout

Page layouts are changed when making the page smaller (full -> small -> column)

In javascript, the current page is stored in the value $group.current

<script>
alert($page.layout); // will output the current group number or-1 if no tiles are shown.
</script>

The html body also gets the current page layout as class. So if you want some CSS for the column page layout only, you can use

.column #yourElement{
	/* this css will only apply when the page is in column layout*/
}

Changing the theme colors

Get icons & changing images to suit your theme

Icon sets

SyncFusion icons
Devantart icons
Broccolidry License
Meteocons License
IcoMoon preview License
Iconic preview License

Changing the color of images

Using the GIMP (which is an awesome image editor), you can easily change the color of an image.

Left one is the original, right one is the edited one:

You can do this by opening your image in the GIMP, go to the tab "colors", click on colorize and play with the "hue" first to get the right color, then adjust the "saturation" and "lightness".

Changing the color of one part of the image

This is to change one color in the image to another.

Left one is the original, right one is the edited one (I added the text aftwards):

To do that in the GIMP, open your image, use the "bucket fill tool", select the color you want, set the treshhold to something low to start and then click the color on the image you want to change. It should change all everywhere where that color is on the image. If it doesn't, undo your changes (Ctrl+Z), set the treshhold a little bit higher and do this again until it's ok.

FAQ

I paid. Where can I download the template now?

If your forum account is set to donator, you should be able to see the "Donator section" on the forum. If you don't see it while being logged in, contact me using the contact form.

How can I change the amount of groups?

Open config/layout.php and add the groupTitle to $groupTitles. Also add a value to $groupSpacing.

I want that the template scrolls continuously horizontal and not from group to group

Open config/layout.php and set $mouseScroll to "horizontal"

How to link to a specific part/anchor on the page?

check this

How to use PHP in tiles

check this

How to use a logo image instead of the header text?

check this

How to turn off mobile website

check this

Which forum script do you use and where can I get that theme?

The forum script is FluxBB and the theme is made by myself but far from completed. But if you want to use it you can download it here. (only visible for logged in "donator" accounts But be aware that it isn't completed!

How to create forms in the template?

Because the template uses AJAX to load the pages, normal forms wont work. You'll need AJAX forms. You can check an example (contact) form here. (only visible for logged in "donator" members)
Also check this

This is far from complete! If something is not clear, just ask it on the forum.
hide panel Loading...

Themes