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. The number and names of the .tpl files have changed some though. A complete skin will include the following files.
| .tpl file | Related pages |
|---|---|
| header.tpl | All pages |
| footer.tpl | All pages |
| index.tpl | index.php |
| newsbox.tpl | index.php, news.php |
| categories.tpl | categories.php |
| challenges.tpl | challenges.php |
| challenges_title.tpl | challenges.php |
| comments.tpl | news.php |
| default.tpl | almost everything |
| reviews.tpl | reviews.php |
| listings.tpl | Any page where series or stories are listed |
| series_title.tpl | series.php |
| user.tpl | viewuser.php |
| viewstory.tpl | viewstory.php |
Now, to quote Douglas Adams...Don't Panic! That's the most number of files a skin would use. Most skins will consist of quite a few less. Within the script files is a folder called default_tpls. It includes a very basic complete skin that will be used if for whatever reason your site's default skin or your member's chosen skin are missing. If any of these .tpl files (except for header.tpl and footer.tpl) are missing the script will fall back on the files in the default_tpls folder. Many of the tpl files are generic enough that they can easily be left to the ones in default_tpls and styled using CSS. In addition to the .tpl files you will have a style.css file and optionally, a variables.php file. The variables.php file allows you to override certain universal settings for this skin such as where blocks load and the graphics used for your ratings and featured stories.
Three important things to pay attention to when modifying the template files:
| Status | Associated .tpl file |
|---|---|
| Inactive | The block is off. |
| Active | The block is on. |
| Index Only | Appears on the index page only. |
You may also override these settings for an individual skin by placing information for that block in the variables.php file. More on that later.
Feel free to use the files in the default_tpls/ folder as templates for your own skins. Copy the files into a new skin folder and modify them there. Do not modify the files in default_tpls/. Also, you are in no way limited to CSS for the layout of your skins. Feel free you use tables to your heart's content.
You must start the file with:
<!-- START BLOCK : header -->
and end it with:
<!-- END BLOCK : header -->
In addition to the universal page links, the header.tpl also has two other variables assigned to it. The use of these variables is optional.
{sitename} - Your site name
{slogan} - Your site slogan
Content assigned to the header in the admin panel or in the skin's variables.php file will also be included here.
Sample:
<!-- START BLOCK : header -->
<body>
<div id="container">
<div id="banner"><div style="font-size: 40pt; font-style: oblique;">{sitename}</div><div
style="font-size: 13pt;">{slogan}</div><div id="skin">{skinchange_content}<div
style="padding: 5px;">{rss}</div></div>
</div>
{menu_content}
<div id="mainpage">
<!-- END BLOCK : header -->
You must start the file with:
<!-- START BLOCK : footer -->
and end it with:
<!-- END BLOCK : footer -->
In addition to the universal page links, the footer.tpl also has one other variable assigned to it.
{footer} - Your copyright statement.
Content assigned to the footer in the admin panel or in the skin's variables.php file will also be included here.
Sample:
<!-- START BLOCK : footer -->
</div>
<div id="footer">{footer}</div></div>
</body></html>
<!-- END BLOCK : footer -->
In addition to the universal page links, the index.tpl also has one other variable assigned to it.
{welcome} - Your welcome message.
You will also need to include the header and footer blocks.
<!-- INCLUDE BLOCK : header --> - includes the header block
<!-- INCLUDE BLOCK : footer --> - includes the footer block
Content assigned to "index only" in the admin panel or in the skin's variables.php file will also be included here. The sample below creates a two column index page via positioning. See the style.css in the default_tpls for the leftindex and rightindex style declarations.
Sample:
<!-- INCLUDE BLOCK : header -->
<div style="padding: 1em 0; margin-bottom: -2em;" class="clearfix">
<div id="leftindex">
<div class="block">
<div class="title">{info_title}</div>
<div class="content">{welcome}{info_content}<br><div style="width: 130px;
text-align: center; margin: 0 25px;">{login_content}</div></div>
</div>
<div class="block">
<div class="title">{random_title}</div>
<div class="content">{random_content}</div>
</div>
</div>
<div id="rightindex">
<div class="block">
<div class="title">{categories_title}</div>
<div class="content"><div style="width: 95%">{categories_content}</div></div>
</div>
<div class="block">
<div class="title">{recent_title}</div>
<div class="content">{recent_content}</div>
</div>
<div class="block">
<div class="title">{news_title}</div>
<div class="content">{news_content}</div>
</div>
</div>
</div>
<!-- INCLUDE BLOCK : footer -->
The majority of pages use this for their layout. Most likely you won't need to include it in your skin at all.
You must include the header, listings, and footer block as seen below and include the {output} variable BEFORE the listings block. The {output} variable provides various text like the page title and alphabet list for titles. You will probably not need to replicate this file in your skin since there's nothing much to change really.
Sample:
<!-- INCLUDE BLOCK : header -->
<div id="output">{output}</div>
<!-- INCLUDE BLOCK : listings -->
<!-- INCLUDE BLOCK : footer -->
This block is included in all pages where stories or series are listed such as titles, categories, user's profile page, search results, etc. It is an expansion of storyblock.tpl from 1.1.
You must start the file with:
<!-- START BLOCK : listings -->
and end it with:
<!-- END BLOCK : listings -->
{seriesheader} - Displays the word "Series" to be used as a section header in
advance of the list of series for the page. It is only displayed when the
page displays a list of series.
{stories} - Displays the word "Stories" to be used as a section header in
advance of the listing of stories for the page. It is only displayed when
the page displays one or more stories.
{pagelinks} - If the results for the page require pagination, this variable will
contain the list of page links.
This block contains 2 inner blocks that control the appearance of the individual series and stories.
Both the seriesblock and storyblock should contain the following variables:
{title} - Title of the story/series
{author} - Author (Owner if it's an open series) of the story/series
{score} - The story/series rating by members like/dislike or stars
{reviews} - A link to the reviews for the story/series
{numreviews} - the number of reviews linked to a listing of reviews for the
story/series
{summary} - The summary for the story/series
{category} - The categories for the story/series
{genres} - The genres for the story/series
{warnings} - The warnings for the story/series
{characters} - The characters for the story/series
{challengelinks} - If the story/series is a response to a challenge this will
contain links to the challenge/s
Optional for both seriesblock and storyblock is {oddeven}. This variable can be used to assign "odd" or "even" status to the block for CSS styling.
The seriesblock will have the following additional variables:
{adminoptions} - Options visible to the admin when viewing the page.
{open} - Whether or not the series is open to contributions from others (like a
round robin)
The storyblock will have the following additional variables:
{adminlinks} - Options visible to the admin when viewing the page.
{serieslinks} - If the story is part of a series this will contain a link to
those series.
{numchapters} - The number of chapters in the story.
{completed} - Whether or not the story is complete.
{wordcount} - The total number of words in the story (all chapters)
Sample:
<!-- START BLOCK : listings -->
{seriesheader}
<!-- START BLOCK : seriesblock -->
<div class="listbox {oddeven} clearfix">
<div class="title">{title} by {author}{score} [{reviews} - {numreviews}] </div>
<div class="content"><span class="classification">Summary: </span>{summary}<br
/>
<span class="classification">Categories:</span> {category} <span
class="classification">Characters: </span>{characters}<br>
<span class="classification">Genres:</span> {genres} <span
class="classification">Warnings:</span> {warnings}<br>
<span class="classification">Challenges:</span> {challengelinks}<br /><span
class="classification">Open:</span> {open}
{adminoptions}</div>
</div>
<!-- END BLOCK : seriesblock -->
{stories}
<!-- START BLOCK : storyblock -->
<div class="listbox {oddeven} clearfix">
<div class="title">{title} by {author} <span
class="classification">Rated:</span> {rating} {roundrobin} {score} [{reviews} -
{numreviews}] </div>
<div class="content"><span class="classification">Summary: </span>{featuredstory}{summary}<br
/>
<span class="classification">Categories:</span> {category} <span
class="classification">Characters: </span> {characters}<br />
<span class="classification">Genres:</span> {genres} <span
class="classification">Warnings:</span> {warnings}<br />
<span class="classification">Challenges:</span> {challengelinks}<br /> <span
class="classification">Series:</span> {serieslinks}<br />
<span class="classification">Chapters: </span> {numchapters} <span
class="classification">Completed:</span> {completed}
<span class="classification">Word count:</span> {wordcount}
{adminlinks}</div>
<div class="tail"><span class="classification">{addtofaves} Published:
</span>{published} <span class="classification">Updated:</span> {updated} </div>
</div>
<!-- END BLOCK : storyblock -->
{pagelinks}
<!-- END BLOCK : listings -->
This block controls the display of the reviews page. This .tpl includes an inner block that formats the individual reviews on the page. The following variables are included in the reviews.tpl
{pagetitle} - The title of the page
{output} - Used for error and confirmation messages. Should probably be
included just below {pagetitle}
{reviewpagelinks} - Used for pagination. Should be included AFTER the
reviewsblock
{reviewslink} - Link inviting visitor to submit a review
You must also include the following two blocks:
<!-- INCLUDE BLOCK : header --> - includes the header block
<!-- INCLUDE BLOCK : footer --> - includes the footer block
The following information should be included in the reviewsblock inside
{reviewer} - The name of the reviewer
{member} - Whether or not the reviewer is a member
{reviewdate} - The date the review was submitted
{chapter} - The title of the chapter for which the review was submitted
{review} - The content of the review
{adminoptions} - Options visible to the admins when viewing the page.
Sample:
<!-- INCLUDE BLOCK : header -->
{pagetitle}
{output}
<!-- START BLOCK : reviewsblock -->
<div class="listbox {oddeven} clearfix">
<span class="classification">Reviewer: </span>{reviewer} <span
class="classification">{member}</span>
<span class="classification">Date: </span>{reviewdate}
<span class="classification">Title: </span>{chapter}</td></tr>
<p>{review}</p>
<div class="adminoptions">{adminoptions}</div>
</div>
<!-- END BLOCK : reviewsblock -->
<div id="pagelinks">{reviewpagelinks}</div>
<div id="respond">{reviewslink}</div>
<!-- INCLUDE BLOCK : footer -->
This block displays one news story, and will be called by the news block and is also used in the news archive page.
You must start the file with:
<!-- START BLOCK : newsbox -->
and end it with:
<!-- END BLOCK : newsbox -->
At a minimum, the following variables should be included in the block.
{newstitle} - The title of the news story
{newsstory} - The content of the news story
{newsauthor} - The author of the news story
{newsdate} - The date the news item was added to the site
{newscomments} - The number of comments the story has received with a link to
view the comments.
Additionally, if you wish administrator options to appear when an admin views the story you should include:
{adminoptions}
Finally, if you want alternating stories to appear with different CSS options you can include:
{oddeven} - Where this variable is placed the word "even" will appear in even numbered stories and the word "odd" will appear in odd numbered stories.
Sample:
<!-- START BLOCK : newsbox -->
<div class="newsbox {oddeven}">
<div class="newstitle">{newstitle} {adminoptions}</div>
{newsstory}<br /><br />
--{newsauthor} on {newsdate} {newscomments}
</div>
<!-- END BLOCK : newsbox -->
This block controls the display of comments on the news.php page for a single story.
You must start the file with:
<!-- START BLOCK : commentbox -->
and end it with:
<!-- END BLOCK : commentbox -->
This information should be placed on separate lines. Between these two lines the following variables should be included.
{comment} - The comment from the member.
{uname} - The members name.
{date} - The date the comment was made.
{adminoptions} - Options visible to the administrator when viewing the page.
The variable {oddeven} is optional, you can use it to assign alternating styles to each comment.
Sample:
<!-- START BLOCK : commentbox -->
<div class="comment {oddeven}">
{comment}
<div class="commentsig">- {uname} on {date}</div>
<div class="adminoptions"> {adminoptions}</div>
</div>
<!-- END BLOCK : commentbox -->
In addition to the universal page links, the categories.tpl also has two other variables and two blocks assigned to it.
{topcategorytitle} - The page title displayed at the top of the page.
{categoryblock} - Displays the list of categories. If you have a number of
columns selected in your site settings the list will be split into that number
of columns
You must also include the following three blocks:
<!-- INCLUDE BLOCK : header --> - includes the header block
<!-- INCLUDE BLOCK : footer --> - includes the footer block
<!-- INCLUDE BLOCK : listings --> - displays the stories and series lists
and related information
The following variables make up the sort menus displayed only when a category contains stories. The first and last of these are required. You may choose to include or exclude the others from your list of sort options.
{sortbegin} - the beginning of the sort menu form
{charactermenu1} - A list of characters to choose from
{charactermenu2} - A second list of characters
{genremenu} - A list of genres
{ratingmenu} - A list of ratings
{warningmenu} - A list of warnings
{sortmenu} - Choose how the stories will be sorted alphabetically or by most
recently updated
{completemenu} - Choose all stories or only completed stories
{sortend} - the end of the sort menu form
Sample:
<!-- INCLUDE BLOCK : header -->
{topcategorytitle}
<div id="categoriesblock">
{categoryblock}
</div>
<div id="sort">{sortbegin}{charactermenu1} {genremenu} {ratingmenu} {warningmenu}
{sortmenu} {completemenu} {sortend}</div>
<!-- INCLUDE BLOCK : listings -->
<!-- INCLUDE BLOCK : footer -->
This page displays the user profile page. In addition to the universal page links, the user.tpl also has a number of other variables assigned to it.
{userpenname} - The member's penname
{realname} - The member's real name
{membersince} - The date that the member joined
{website} - a link to the member's web site
{image} - The member's picture if they've uploaded one.
{bio} - The bio the member provided
{betareader} - yes/no as to whether or not the member is willing to beta-read
for others
{userlevel} - whether this member is a regular member or has admin privileges.
Members with level 1-3 are considered administrators. Everyone else is a
member.
{aol} - AIM screen name
{icq} - ICQ screen name
{msn} - MSN IM screen name
{yahoo} - YIM screen name
{adminoptions} - Options visible to the admin when viewing the page as relates
to the member
{storiesbyclass} - if the page is currently displaying the stories the member
has written this will be set to: id="active"
{favstorclass} - if the page is currently displaying the member's favorite
stories/serires this will be set to: id="active"
{favauthclass} - if the page is currently displaying the member's favorite
authors this will be set to: id="active"
{sort} - displays a drop down form to sort the display of stories from
alphabetical to most recent
{storiesby} - the stories by member link and # of stories
{favstor} - the favorite stories list and # of stories
{favauth} - the favorite authors list and # of authors
{output} - used to display favorite authors and some text under the tabs
You must also include the following three blocks:
<!-- INCLUDE BLOCK : header --> - includes the header block
<!-- INCLUDE BLOCK : footer --> - includes the footer block
<!-- INCLUDE BLOCK : listings --> - displays the stories and series lists
and related information
Sample:
<!-- INCLUDE BLOCK : header -->
<div id="profile">
<div id="bio" class="clearfix">
<span class="classification">Penname: </span>{userpenname} <span
class="classification">Real name: </span>{realname}<br />
<span class="classification">Member Since: </span>{membersince}<br />
<span class="classification">Website: </span>{website}<br />
<span class="classification">Bio:</span><br>{image}{bio}<br />
<span class="classification">Beta-reader:</span> {betareader}<br />
{aol} {icq} {msn} {yahoo}
</div>
{adminoptions}
<div id="sort">{sort}</div>
</div>
<div id="tabs" class="clearfix">
<div {storiesbyclass}>{storiesby}</div>
<div {favstorclass}><div id="centertab">{favstor}</div></div>
<div {favauthclass}>{favauth}</div>
</div>
{output}
<!-- INCLUDE BLOCK : listings -->
<!-- INCLUDE BLOCK : footer -->
In addition to the universal page links, the viewstory.tpl also has a number of other variables assigned to it.
{title} - the title of the story
{author} - the author of the story
{reviews} - link to the stories reviews
{numreviews} - the number of reviews the story has received linked to reviews
page
{printicon} - the "print the story/chapter" link
{adminlinks} - options visible to the admin as regards the story
{addtofaves} - links to add the story and the author to favorites
{textsizer} - plus and minus links to make text smaller or bigger
{notes} - the author's notes for that chapter
{story} - the text of the story. Note this needs to be inside a div with
the id of story for the text sizer to work
{prev} - link to previous chapter if any
{next} - link to next chapter if any
{jumpmenu} - pull-down list of chapters to go to
{jumpmenu2} - pull-down list of options for story - review, add story to faves,
add author to faves
{reviewform} - the quick review form.
You must also include the following two blocks:
<!-- INCLUDE BLOCK : header --> - includes the header block
<!-- INCLUDE BLOCK : footer --> - includes the footer block
Sample:
<!-- INCLUDE BLOCK : header -->
<div id="pagetitle">{title} by {author}</div>
<div id="sort"> [{reviews} - {numreviews}] {printicon} {adminlinks}{addtofaves}<br>{textsizer}</div>
<div class="jumpmenu">{jumpmenu}</div>
<div class="listbox">
<div class="title even">Author's Notes:</div>
<div class="content">{notes}</div>
</div>
<div id="story">{story}</div>
<div id="pagelinks"><div id="prev">{prev}</div><div class="jumpmenu">{jumpmenu2}</div><div
id="next">{next}</div></div>
<div class="respond">{roundrobin}</div>
<div id="reviewform">{reviewform}</div>
<!-- INCLUDE BLOCK : footer -->
This file consists of a single block that will be included on the series page when an individual series is being displayed. You must start the file with:
<!-- START BLOCK : series -->
and end it with:
<!-- END BLOCK : series -->
This information should be placed on lines by themselves.
Between those two lines place the following variables:
{pagetitle} - the title of the series
{rating} - if the series has been reviewed the rating given to the series
{reviews} - link to the reviews for the series
{numreviews} - the number of reviews the series has received that links to the
reviews
{summary} - the summary of the series
{categories} - the categories (if any) for the series
{characters} - the characters (if any) for the series
{genres} - the genres for the series
{warnings} - the warnings for the series
{challenges} - if the series is in response to a challenge, a link to that
challenge/s
{jump} - a pull-down list of links to respond to the series: review, add series
to faves, add author to faves
Sample:
<!-- START BLOCK : series -->
<div style="margin: 0 10%;">
<div id="pagetitle">{pagetitle} {rating} [{reviews} - {numreviews}]</div>
<div id="titleblock">
<span class="classification">Summary:</span> {summary}<br />
<span class="classification">Categories:</span> {categories}<br />
<span class="classification">Characters:</span> {characters}<br />
<span class="classification">Genres:</span> {genres}<br />
<span class="classification">Warnings:</span> {warnings}<br />
<span class="classification">Challenges:</span> {challenges}<br />
</div>
<div style="text-align: right;">{jump}</div>
</div>
<!-- END BLOCK : series -->
This file consists of a single block that will be replicated to list challenges on the challenges page. You must start the file with:
<!-- START BLOCK : challenge -->
and end it with:
<!-- END BLOCK : challenge -->
Each of these should go on a separate line. Between these two lines the following variables should be placed.
{title} - the title of the challenge
{author} - the author of the challenge
{summary} - the summary of the challenge
{category} - the categories to which this challenge pertains
{characters} - the characters to which this challenge pertains
{adminoptions} - options available to the admins concerning this challenge
{respond} - link inviting people to respond to the challenge.
This block also has the optional {oddeven} variable available to it.
Sample:
<!-- START BLOCK : challenge -->
<div class="listbox {oddeven} clearfix">
<div class="title">{title} by {author}</div>
<div class="content">
<span class="classification">Summary: </span>{summary}<br />
<span class="classification">Categories:</span> {category} <span
class="classification">Characters: </span>{characters}</div>
{adminoptions}
{respond}
</div>
<!-- END BLOCK : challenge -->
This file consists of one block that will be displayed when an individual challenge is displayed in the challenges page. You must start the file with:
<!-- START BLOCK : titleblock -->
and end it with:
<!-- END BLOCK : titleblock -->
Each of these should go on a separate line. The following variables are included in the block.
{title} - the title of the challenge
{author} - the author of the challenge
{summary} - the summary of the challenge
{category} - the categories to which this challenge pertains
{characters} - the characters to which this challenge pertains
{adminoptions} - options available to the admins concerning this challenge
{respond} - link inviting people to respond to the challenge.
Sample:
<!-- START BLOCK : titleblock -->
<div id="pagetitle">{title} by {author}</div>
<div id="titleblock">
<span class="classification">Summary: </span>{summary}<br />
<span class="classification">Categories:</span> {category}<br />
<span class="classification">Characters: </span>{characters}<br />
{adminoptions}
</div>
{respond}
<!-- END BLOCK : titleblock -->
In addition to the .tpl files, there are some css classes and id's hardcoded into the script. The following are examples from the default_tpls stylesheet.
#pagetitle - the title of the page
#pagelinks - page links at the bottom of the page for pagination
#alphabet - the alphabet list on pages such as authors/members, titles,
series, and challenges
.respond - on the challenges page "Respond to the Challenge!" links
#newsarchive - news archive link in the news block
.sectionheader - used for the "Series" and "Stories" section headers on several
pages where both are displayed
.adminoptions - admin options links in story blocks, author's profile page, and
a few other places.
.jumpmenu - jump menus on the story page
.tblborder - carryover from 1.1 still used in some places.
Each page in the script also has a variable called {page_id} assigned. This variable is intended for you to use in your css if you wish to style specific pages differently. Here is a list of the pages and the page_id assigned to them. Some pages have different page_id's depending on what is being displayed. For instance, you could use {page_id} as a containing div around the rest of your content as in the Romance skin that comes with the script. It's use is optional, and is included to allow more flexibility in your skins.
| Page | Page IDs |
|---|---|
| Admin | adminarea |
| Search | search |
| - Search (showing results) | searchresults |
| - Top Tens (viewing a list) | searchresults |
| - Recent | recent |
| - Top Tens (list of lists) | tens |
| - Featured Stories | featured |
| Help | help |
| Terms of Service | tos |
| Submission Rules | submission |
| Categories | categories |
| Members | members |
| - Authors | authors |
| - Betareaders | members |
| User | user |
| - Edit Bio | editbio |
| - Respond to Reviews | revres |
| - Manage Reviews | viewreviews |
| - Manage Favorites | manfaves |
| - Lost Password | lostpassword |
| - Register | newaccount |
| - Manage Images | manageimages |
| - Stats | stats |
| Series | series |
| Challenges | challenges |
| Titles | titles |
| User Profile (viewuser) | userprofile |
| Contact Us | contactus |
| Viewing a Story | viewstory |
In 1.1 you had the ability to add page links anywhere in the page. This ability remains in 2.0
| Tpl Variable | Default Text | Links to |
|---|---|---|
| {login} | Login/Account Info* | user.php |
| {logout} | Logout | user.php |
| {adminarea} | Admin | admin.php |
| {home} | Home | index.php |
| {recent} | Most Recent | search.php |
| {catslink} | Categories ** | categories.php |
| {authors} | Authors*** | authors.php |
| {help} | Help | help.php |
| {search} | Search | search.php |
| {titles} | Titles | titles.php |
| New Page Links in 2.0 | ||
| {tos} | Terms of Service | tos.php |
| {rules} | Submission Rules | rules.php |
| {contactus} | Contact Us | contact.php |
| {featured} | Featured Stories | search.php |
| {members} | Members | authors.php |
| {series} | Series | series.php |
| {challenges} | Challenges | challenges.php |
| {tens} | The Tens | search.php |
In addition to these text links there is one other link pre-formed for you. This link {rss} is a graphic link that uses the orange RSS box that most of us are familiar with by now. To see an example of these in use look at the footer.tpl in the Romance skin.
* Text and behavior changes depending on whether the visitor is logged in or
not.
** Only available when the number of categories is set to more than one in the
settings.
*** Now that there is a separate members list this has changed from 1.1.
This was the members list. Now it is the list of authors ONLY.