Creating Skins

From Efiction

(Difference between revisions)
(→Blocks)
(→How to use variables.php)
 
(5 intermediate revisions not shown)
Line 6: Line 6:
===Template Variables===
===Template Variables===
 +
 +
Items in curly brackets are variables, i.e. {output} or {authors}. They contains the actual content that will be printed out on the page. You can surround these attributes with any kind of html that you want -- font tags, tables, whatever. Some attributes are required on some of the template pages, and some are optional.
 +
 +
Certain template variables will only be useable on certain pages or within certain [[#Template Blocks|blocks]] while others can be placed anywhere.  The [[Page Links|page links]] are among the variables that can be placed anywhere on any page.
 +
===Template Blocks===
===Template Blocks===
 +
 +
These are items that generate multiple instances of content in a loop -- for example, in your index.tpl template file, you only need to indicate where the news items should display on the page with the following:
 +
 +
<!-- INCLUDE BLOCK : newsbox -->
 +
 +
This line is telling the script to include the newsbox.tpl file, and the template files will understand that it should print out several news stories in a loop, with just that one line of code.
 +
 +
Another kind of block you may see is the following:
 +
 +
&lt;!-- START BLOCK : categoriesblock --&gt;<br/>
 +
{category} {description}<br/>
 +
&lt;!-- END BLOCK : categoriesblock --&gt;<br/>
 +
 +
This is another way to include a repeating block of code.  In this case, one category in a list of multiple categories.
 +
 +
This is similar to the included block, except that rather than pulling in the block from another file, as in the case of the newsbox.tpl, this one is just defining the block at this very moment. As you read through the individual template file instructions below and look at the actual templates, all of this will make more sense. 
 +
 +
'''Block declarations should go on lines by themselves.'''
==Changes in 2.0==
==Changes in 2.0==
===Code Blocks===
===Code Blocks===
 +
 +
The template blocks in the .tpl files are not the same as the blocks you configure in the admin panel.  The blocks in the admin panel are "blocks" of code that generate content they place inside template variables.  The blocks in the .tpl files are "blocks" of content.  While there is some overlap, thinking of them as being separate from each other will help you keep things straight.  Each "code block" will generate two "content blocks": {blockname_title} and {blockname_content}.  You may or may not include the {blockname_title} variable in your skin.  It's up to you.  However, using the {blockname_title} in your skin means if you ever want to change the title of the block you only have to do it in one place instead of in each skin.  You assign which .tpl the block will be assigned to in the admin panel. There are 3 choices:
 +
 +
* '''Inactive'''  The block is off.
 +
* '''Active''' The block is active on all pages.
 +
* '''Index Only''' The block is only active on the index page.
 +
 +
You may override these settings for an individual skin by placing information for that block in the [[How to use variables.php|variables.php]] file.
 +
 +
These "code blocks" can be enabled/disabled, configured, and installed via the Blocks Admin panel.
===How to use variables.php===
===How to use variables.php===
 +
 +
The variables.php files can have a number of uses in your skin. First, you can use it to override any number of settings in the blocks. For instance, let's assume you've decided that you've set most of the blocks to be index only. Now say that some of your site visitors are asking you for the main categories to be visible on all the pages and not just the index page. You don't want to redesign all your skins. Instead you'll design a new skin with the categories visible on all pages and see what kind of feedback you get from your visitors. You decide that this new skin will have a column on the left with the categories block in it. So you need to change where the categories block will be displayed for this skin (and this skin only). The solution is to create a variables.php file for the skin like so:
 +
 +
<?php
 +
$blocks['categories']['status'] = 1;
 +
?>
 +
 +
<Setting the status to 1 will cause the categories block to be displayed on all pages for that skin ONLY. A status of 0 is totally off. If you're not using a block, turn it off. It will help with your site's performance. A block with a status of 1 is displayed on all pages. A block with a status of 2 is displayed only on the index page. I know it might be tempting to just set all the blocks to display on all the pages, but you're going to slow your site's performance down when you do that. If you're converting a skin from 1.1 to 2.0 or if you're just more comfortable doing your blocks as they were in 1.1, you can set the following in your variables.php to have most of the blocks behave as they did in 1.1.
 +
 +
<pre>
 +
$blocks['categories']['tpl'] = 1;
 +
$blocks['recent']['tpl'] = 1;
 +
$blocks['featured']['tpl'] = 1;
 +
$blocks['random']['tpl'] = 1;
 +
$blocks['info']['style'] = 2;
 +
</pre>
 +
 +
The info block is where the {totalstories} and {totalauthors} variables went in 2.0. If no style is set it will output in a tabular format. If style 1 is chosen it will output as a narrative. And style 2 is the variables themselves, i.e. {totalstories} and {totalauthors}. In 2.0, {totalauthors} is actually the total number of authors. You can use {totalmembers} for the number of members your site has. I haven't gotten the news block configured this way yet. It's on my list of things to do though.
 +
 +
You can also override the title of the block. For instance, by default the random story title is "Story of the Moment" and it works for most of your skins, but getting back to our example, this new skin you're making the text is wrapping around and you don't like that. You could change the title of the block to "Random Story":
 +
 +
<pre>$blocks['random']['title'] = "Random Story";</pre>
 +
 +
You could even force the title of that one block to be a smaller text size:
 +
 +
<pre>$blocks['random"]['title'] = "<span style='font-size: 9pt;'>Random Story</span>";</pre>
 +
 +
Or even make it a graphic:
 +
 +
<pre>$blocks['random']['title'] = "<img src='skins/MYSKIN/images/RandomStoryTitle.gif' alt='Random Story'>";</pre>
 +
 +
Of course there's no reason you couldn't just do those in your index.tpl with plain old text/html, but I'm just trying to give you ideas.
 +
 +
You can also override many of the default graphics using the variables.php file. If you continue the example of creating a new skin, let's assume you've decided to make it a yellow theme. You might have problems with the yellow star and half-star showing up on the yellow background you've chosen. In variables.php, you can set a different graphic to represent the star and half-star. As an example, look at the Romance skin that came with the script. There the stars are hearts. In the Romance skins' variables.php you'll find:
 +
 +
<pre>$star = "<img src=\\"skins/Romance/images/sm_heart.gif\\" alt=\\"heart\\">";
 +
$halfstar = "<img src=\\"skins/Romance/images/sm_heart.gif\\" alt=\\"half heart\\">";
 +
</pre>
 +
 +
If you have chosen the like/dislike rating system. You would use $like and $dislike instead of $star and $halfstar. You can also change the graphics for featured and past featured stories from the blue and red ribbon to something of your choice. In that case you would use $featured and $retired.
 +
 +
If you have links you wanted added to the menu block or available to the .tpl as variables you can add them here like this:
 +
 +
<pre>$pagelinks['forum'] = "<a href=\\"forum/index.php\\">Forums</a>";</pre>
 +
 +
This will give you the variable {forum} to use in your skin for that link.  '''Note:''' the same format works to add the links universally to all skins by placing it in the func.pagemenu.php file.  To then add this extra link to the menu block you'd need to add it to the content list:
 +
<pre>
 +
$blocks['menu']['content'] = array(
 +
0 => 'home',
 +
1 => 'members',
 +
2=> 'search',
 +
3 => 'tens',
 +
4 => 'help',
 +
5 => 'forum',
 +
6 => 'login',
 +
7 => 'logout',
 +
8 => 'adminarea');
 +
</pre>
 +
 +
The menu block is set up in such a way that you can add additional menus.  However, on many skins you might have noticed the secondary "Browse by:" menu.  Here's the trick in variables.php that makes it work.
 +
<pre>
 +
$blocks["menu2"] = array(
 +
"title" => "Browse by: ",
 +
"status" => "1",
 +
"file" => "menu/menu.php",
 +
"style" => 1,
 +
"content" => array (
 +
0 => 'recent',
 +
1=> 'titles',
 +
2 => 'catslink',
 +
3 => 'series',
 +
4 => 'authors',
 +
5 => 'challenges'
 +
)
 +
);
 +
</pre>
 +
 +
Note the indenting in the above two examples is optional, it is showed that way here so it would be easier to read.  The code above creates a new block named "menu2" with a title of "Browse by: ".  The file for the block is the same as the standard menu block.  Then we set the style to 1 in this case, so it displays as a list of links rather than in an unordered list.  Finally, we define what links we want in our menu.
 +
 +
You can also use variables.php to create your own variables for your skin.  For example, if you wanted the time and date in the upper right hand corner of the header you could created set a template variable in variables.php to be included in header.tpl.
 +
 +
<pre>$tpl->assignGlobal("today", date("F j, Y g:i:s a"));</pre>
 +
 +
Then in the header.tpl of the skin include the variable {today} where you want the date and time to be displayed.
 +
 +
Or if you wanted to welcome your visitor.
 +
 +
</pre>$tpl->assignGlobal("greeting", "Welcome, ".(isset($userpenname) ? $userpenname : "Guest")."!");</pre>
 +
 +
Then include {greeting} where you wanted "Welcome, Guest!" to appear on the page.
===How to use extra_header.php===
===How to use extra_header.php===

Current revision as of 04:14, 14 July 2006

In theory, there is no limit to the number of skins you can create for your site. If you have created skins for eFiction 1.1, you won't find many differences in 2.0 and 3.0. The number and names of the .tpl files have changed some though in later versions.

Contents

The Basics

The .tpl files

Template Variables

Items in curly brackets are variables, i.e. {output} or {authors}. They contains the actual content that will be printed out on the page. You can surround these attributes with any kind of html that you want -- font tags, tables, whatever. Some attributes are required on some of the template pages, and some are optional.

Certain template variables will only be useable on certain pages or within certain blocks while others can be placed anywhere. The page links are among the variables that can be placed anywhere on any page.

Template Blocks

These are items that generate multiple instances of content in a loop -- for example, in your index.tpl template file, you only need to indicate where the news items should display on the page with the following:

<!-- INCLUDE BLOCK : newsbox -->

This line is telling the script to include the newsbox.tpl file, and the template files will understand that it should print out several news stories in a loop, with just that one line of code.

Another kind of block you may see is the following:

<!-- START BLOCK : categoriesblock -->
{category} {description}
<!-- END BLOCK : categoriesblock -->

This is another way to include a repeating block of code. In this case, one category in a list of multiple categories.

This is similar to the included block, except that rather than pulling in the block from another file, as in the case of the newsbox.tpl, this one is just defining the block at this very moment. As you read through the individual template file instructions below and look at the actual templates, all of this will make more sense.

Block declarations should go on lines by themselves.

Changes in 2.0

Code Blocks

The template blocks in the .tpl files are not the same as the blocks you configure in the admin panel. The blocks in the admin panel are "blocks" of code that generate content they place inside template variables. The blocks in the .tpl files are "blocks" of content. While there is some overlap, thinking of them as being separate from each other will help you keep things straight. Each "code block" will generate two "content blocks": {blockname_title} and {blockname_content}. You may or may not include the {blockname_title} variable in your skin. It's up to you. However, using the {blockname_title} in your skin means if you ever want to change the title of the block you only have to do it in one place instead of in each skin. You assign which .tpl the block will be assigned to in the admin panel. There are 3 choices:

  • Inactive The block is off.
  • Active The block is active on all pages.
  • Index Only The block is only active on the index page.

You may override these settings for an individual skin by placing information for that block in the variables.php file.

These "code blocks" can be enabled/disabled, configured, and installed via the Blocks Admin panel.

How to use variables.php

The variables.php files can have a number of uses in your skin. First, you can use it to override any number of settings in the blocks. For instance, let's assume you've decided that you've set most of the blocks to be index only. Now say that some of your site visitors are asking you for the main categories to be visible on all the pages and not just the index page. You don't want to redesign all your skins. Instead you'll design a new skin with the categories visible on all pages and see what kind of feedback you get from your visitors. You decide that this new skin will have a column on the left with the categories block in it. So you need to change where the categories block will be displayed for this skin (and this skin only). The solution is to create a variables.php file for the skin like so:

<?php $blocks['categories']['status'] = 1; ?>

<Setting the status to 1 will cause the categories block to be displayed on all pages for that skin ONLY. A status of 0 is totally off. If you're not using a block, turn it off. It will help with your site's performance. A block with a status of 1 is displayed on all pages. A block with a status of 2 is displayed only on the index page. I know it might be tempting to just set all the blocks to display on all the pages, but you're going to slow your site's performance down when you do that. If you're converting a skin from 1.1 to 2.0 or if you're just more comfortable doing your blocks as they were in 1.1, you can set the following in your variables.php to have most of the blocks behave as they did in 1.1. 

$blocks['categories']['tpl'] = 1;
$blocks['recent']['tpl'] = 1;
$blocks['featured']['tpl'] = 1;
$blocks['random']['tpl'] = 1;
$blocks['info']['style'] = 2;

The info block is where the {totalstories} and {totalauthors} variables went in 2.0. If no style is set it will output in a tabular format. If style 1 is chosen it will output as a narrative. And style 2 is the variables themselves, i.e. {totalstories} and {totalauthors}. In 2.0, {totalauthors} is actually the total number of authors. You can use {totalmembers} for the number of members your site has. I haven't gotten the news block configured this way yet. It's on my list of things to do though.

You can also override the title of the block. For instance, by default the random story title is "Story of the Moment" and it works for most of your skins, but getting back to our example, this new skin you're making the text is wrapping around and you don't like that. You could change the title of the block to "Random Story": 

$blocks['random']['title'] = "Random Story";

You could even force the title of that one block to be a smaller text size: 

$blocks['random"]['title'] = "<span style='font-size: 9pt;'>Random Story</span>";

Or even make it a graphic: 

$blocks['random']['title'] = "<img src='skins/MYSKIN/images/RandomStoryTitle.gif' alt='Random Story'>";

Of course there's no reason you couldn't just do those in your index.tpl with plain old text/html, but I'm just trying to give you ideas.

You can also override many of the default graphics using the variables.php file. If you continue the example of creating a new skin, let's assume you've decided to make it a yellow theme. You might have problems with the yellow star and half-star showing up on the yellow background you've chosen. In variables.php, you can set a different graphic to represent the star and half-star. As an example, look at the Romance skin that came with the script. There the stars are hearts. In the Romance skins' variables.php you'll find: 

$star = "<img src=\\"skins/Romance/images/sm_heart.gif\\" alt=\\"heart\\">";
$halfstar = "<img src=\\"skins/Romance/images/sm_heart.gif\\" alt=\\"half heart\\">";

If you have chosen the like/dislike rating system. You would use $like and $dislike instead of $star and $halfstar. You can also change the graphics for featured and past featured stories from the blue and red ribbon to something of your choice. In that case you would use $featured and $retired.

If you have links you wanted added to the menu block or available to the .tpl as variables you can add them here like this: 

$pagelinks['forum'] = "<a href=\\"forum/index.php\\">Forums</a>";

This will give you the variable {forum} to use in your skin for that link. Note: the same format works to add the links universally to all skins by placing it in the func.pagemenu.php file. To then add this extra link to the menu block you'd need to add it to the content list: 

$blocks['menu']['content'] = array(
	0 => 'home', 
	1 => 'members',
	2=> 'search', 
	3 => 'tens', 
	4 => 'help', 
	5 => 'forum',
	6 => 'login',
	7 => 'logout',
	8 => 'adminarea');

The menu block is set up in such a way that you can add additional menus. However, on many skins you might have noticed the secondary "Browse by:" menu. Here's the trick in variables.php that makes it work. 

$blocks["menu2"] = array(
	"title" => "Browse by: ",
	"status" => "1",
	"file" => "menu/menu.php", 
	"style" => 1,
	"content" => array (
		0 => 'recent',
		1=> 'titles', 
		2 => 'catslink',
		3 => 'series', 
		4 => 'authors',
		5 => 'challenges'
	)
);

Note the indenting in the above two examples is optional, it is showed that way here so it would be easier to read. The code above creates a new block named "menu2" with a title of "Browse by: ". The file for the block is the same as the standard menu block. Then we set the style to 1 in this case, so it displays as a list of links rather than in an unordered list. Finally, we define what links we want in our menu.

You can also use variables.php to create your own variables for your skin. For example, if you wanted the time and date in the upper right hand corner of the header you could created set a template variable in variables.php to be included in header.tpl. 

$tpl->assignGlobal("today", date("F j, Y g:i:s a"));

Then in the header.tpl of the skin include the variable {today} where you want the date and time to be displayed.

Or if you wanted to welcome your visitor.

</pre>$tpl->assignGlobal("greeting", "Welcome, ".(isset($userpenname) ? $userpenname : "Guest")."!");</pre>

Then include {greeting} where you wanted "Welcome, Guest!" to appear on the page.

How to use extra_header.php

Converting 1.1 Skins to 2.0

See Converting Skins 1.1 to 2.0

Changes in 3.0

Retrieved from "http://editthis.info/efiction/Creating_Skins"
Personal tools