<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Converting 1</title>
</head>
<body>
<p align="center">Converting 1.1 skins to 3.0 skins.</p>
<p>This file is a work in progress. We'll flesh it out later as we all get
more expertise with converting 1.1 skins to the 3.0 format.</p>
<p>1. Open a new folder for your converted skin.</p>
<p>2. Open the default.tpl file in the skin you wish to convert.
Everything <i><b>before</b></i> {output} transfer into header.tpl in your new
folder then enclose it with start and close tags for the header block. A sample header.tpl might look like this.</p>
<pre></pre>
</div>
<p style="margin: 0 5%; border: 1px solid #000;"> <!-- START BLOCK : header --><br>
<body><br>
<div id="<span style="background-color: #FFFF00">{</span><span
style="background-color: #FFFF00">page_id</span><span
style="background-color: #FFFF00">}</span>"><br>
<div id="header"><br>
<div id="banner"><br>
<div id="skin"><span style="background-color: #FFFF00">{</span><span
style="background-color: #FFFF00">skinchange_content</span><span
style="background-color: #FFFF00">}</span><span style="padding: 15px;"><span
style="background-color: #FFFF00">{</span><span
style="background-color: #FFFF00">rss</span><span
style="background-color: #FFFF00">}</span></span></div><br>
</div><br>
<div id="menu_container"><br>
<span style="background-color: #FF00FF">
{home}&nbsp;{recent}&</span><span style="background-color: #FF00FF">nbsp;{catslink</span><span
style="background-color: #FF00FF">}&nbsp;{authors}&nbsp;{titles}&nbsp;{help}<br>
&nbsp;{search}&nbsp;{login}&nbsp;{logout}&nbsp;{adminarea}</span><br>
</div><br>
</div><br>
<div id="mainpage"><br>
<!-- END BLOCK : header --></p>
<p>The {page_id} variable was new to 2.0. This variable gives you a unique
name to use in the css for each page. In the example above it's used as
a containing tag.
<p>The {rss} variable
defines where the orange rss image link appears.
<p>The other variable highlighted in yellow is a mod some people had previously
installed. If you have previously added the skin change mod change {skinform}
to {skinchange_content} to include that block. You will also need to activate
that block and set it to the correct status in the blocks page in the admin
area.
<p>The links highlighted in pink are still available in 3.0. You can convert
these links to the new menu block if you wish or leave them as is.
<p>3. From your original default.tpl again, select everything <i>
<b>after</b></i> {output} and place it in your footer.tpl<p> <p style="margin: 0 5%; border: 1px solid #000;"><!-- START BLOCK :
footer --><br>
</div><br>
<div id="footer"><span style="background-color: #FF00FF">{footer}</span></div></div><br>
<div id="footermenu"><span style="background-color: #FFFF00">{</span><span
style="background-color: #FFFF00">tos}{rules}{contactus</span><span
style="background-color: #FFFF00">}</span></div><br>
<!-- END BLOCK : footer --><p>The {footer} variable is the same as in 1.1<p>
The other three variables you see in yellow are new page links added in 2.0. <p> <div
align="center">
<center>
<table border="1" cellpadding="3" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111">
<tr>
<th width="100%" colspan="2">New Page Links in 2.0</th>
</tr>
<tr>
<td width="50%">{tos}</td>
<td width="50%">Terms of Service</td>
</tr>
<tr>
<td width="50%">{rules}</td>
<td width="50%">Submission Rules</td>
</tr>
<tr>
<td width="50%">{contactus}</td>
<td width="50%">Contact Us</td>
</tr>
<tr>
<td width="50%">{featured}</td>
<td width="50%">Featured Stories</td>
</tr>
<tr>
<td width="50%">{members}</td>
<td width="50%">Members</td>
</tr>
<tr>
<td width="50%">{series}</td>
<td width="50%">Series</td>
</tr>
<tr>
<td width="50%">{challenges}</td>
<td width="50%">Challenges</td>
</tr>
<tr>
<td width="50%">{tens}</td>
<td width="50%">The Tens</td>
</tr>
</table>
</center>
</div>
<p> <div align="center">
<center>
<table border="1" cellpadding="3" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111">
<tr>
<th width="100%" colspan="2">Changed from 1.1</th>
</tr>
<tr>
<td width="50%">{authors}</td>
<td width="50%">Authors (was members list)</td>
</tr>
</table>
</center>
</div>
<p>3. In your new skin folder create a new file called variables.php.
As this is a conversion from 1.1 to 2.0 you will want to set some options in the
blocks settings.</p>
<p style="margin: 1em 5%; border: 1px solid #000;"><?php<br>
$blocks["info"]["status"] = '1'; <br>
$blocks["info"]["style"] = '1';<br>
$blocks["login"]["status"] = '1';<br>
$blocks["news"]["status"] = '1';<br>
$blocks["news"]["tpl"] = '1';<br>
$blocks["recent"]["status"] = '1';<br>
$blocks["recent"]["tpl"] = '1';<br>
$blocks["categories"]["status"] = '1';<br>
$blocks["categories"]["columns"] = '0';<br>
$blocks["categories"]["tpl"] = '1';<br>
$blocks["featured"]["tpl"] = '1';<br>
$blocks["featured"]["status"] = '1';<br>
?></p>
<p>Technically, this is probably overkill. You will definitely want to set
"tpl" to 1 for categories, recent, and featured if your skin uses them. If
in the past you used {totalstories} and {totalauthors}, activate the info block
and set the style to 2. Note that this will also give you {totalmembers}
to include. All of these blocks should be set to a "status" of 1 to
include them only on the index page.
If your skin doesn't use them, I suggest you set the status to 0. It will
make the page load a tiny bit faster, but for busy sites tiny bits will add up.</p>
<p>4. Copy the 1.1 index.tpl skin into your new folder and open it. Locate
the point where your header information stops. Delete everything before
that and replace it with:</p>
<p><!-- INCLUDE BLOCK : header --></p>
<p>Find where your footer information starts and replace everything below it with</p>
<p><!-- INCLUDE BLOCK : footer --></p>
<p>We took care of all the blocks except news in the previous step. Find
where your news is included in the index.tpl and replace the block with {news_content}
You can also remove {newspageprev} and {newspagenext} as those are replaced by
the newsarchive link and are included in {news_content}. To style the news
archive link use #newsarchive in your style.css. The #newsarchive id is a
div around the archive link.</p>
<p>5. Copy your newsbox.tpl file into the new folder. No changes need to
be made to that. Note however that the style will be carried over to the
news archive.</p>
<p>6. Open your style.css and style the following elements. The
information after the dash is suggested styles to match 1.1 where possible or
just general ideas</p>
<p>#pagetitle - text-align: center; font-size: 150%; margin: 1ex;<br>
#alphabet, #pagelinks - text-align: center; margin: 1em;<br>
LABEL - font-weight: bold;<br>
#sort - text-align: center; margin: 1ex; (Sort options on categories.php)<br>
#profile #sort - text-align: right; (Sort options on the viewuser
page)</p>
<p>.sectionheader - text-align: center; font-weight: bold; (this is the
"Series" and "Stories" sub-headers)<br>
#titleblock - margin: 0 10%; border: 1px solid #000; <br>
(this is the title block at the top of the series and challenges pages when a
single series/challenge is listed)</p>
<p>To convert the tabs in the viewuser page from 1.1 to 2.0 you'll need to add
the #tabs style group to your style.css. This is the tabs information for
the skin in default_tpls. It's a good place to start. 2.0 gives you more
options in styling this section of the viewuser page, but this styling will be
close to what you previously used in 1.1 with some tweaking. The #active
styling is the tab currently active in the window. In 1.1 this would have
been the table cell with the background color.</p>
<p>#tabs {<br>
padding: 0;<br>
margin: 0;<br>
clear: both;<br>
border-top: 3px double #000;<br>
border-bottom: 3px double #000;<br>
}<br>
<br>
#tabs DIV{ <br>
width: 33%;<br>
float: left;<br>
color: #000;<br>
text-align: center;<br>
background: #CCC; <br>
font-size: 11pt;<br>
}<br>
<br>
#tabs #centertab {<br>
background: transparent;<br>
border-right: 3px double #000;<br>
border-left: 3px double #000;<br>
width: 98%;<br>
}<br>
<br>
#tabs a { color: #000; }<br>
#tabs a:active, a:hover { text-decoration: none; color: #555; }<br>
<br>
#tabs #active { background: #555; width: 34%; color: #FFF; }<br>
#tabs #active a { color: #FFF; }<br>
#tabs #active a:active, a:hover { text-decoration: none; color: #555; }</p>
<p>7. The last thing you'll probably need to do is convert your storyblock.tpl.
If you wish, you can rely on the default and set the appearance of both the
stories and series blocks through your style.css. The default uses the .listbox
class with child classes of .title, .tail, .adminoptions, .content, and
.classification. You can also use .odd and .even to alternate style of
blocks every other one.</p>
<p>/* Formatting for the divs for series and stories. */<br>
.listbox { margin: 0 5%; border: 2px solid #900; margin-bottom: 1em; background:
#FFF; background-position: 0 5px;}<br>
.listbox .title { font-weight: bold; padding: 4px; color: #900; border-bottom:
3px double #900;}<br>
.listbox .title a:link { color: #900; text-decoration: underline;}<br>
.listbox .title a:visited { color: #C66; text-decoration: underline;}<br>
.listbox .title a:hover { color: #900; text-decoration: underline overline; }<br>
.listbox .content { padding: 5px; padding-top: 10px; padding-bottom: 10px;}<br>
.listbox .tail, .listbox .respond { border-top: 3px double #900;}<br>
.listbox .classfication { font-weight: bold; }<br>
/* End listbox formatting. */</p>
<p>If you don't want to use the default, I suggest you copy listings.tpl from
the default_tpls folder then paste the contents of your storyblock.tpl into the
storyblock section then replicate it for the series section. Pay attention
to the additional information for the story block. You may now include
challenges and series information. There are also adminoptions to be
included as well. If you don't use the default you will also need to
separately style the challenges block (if you choose to use challenges on your
site).
Copy challenges.tpl from the default_tpls folder and style it as you wish.
<u>Do<b><i> NOT </i></b>save it back to default_tpls. </u><b> </b>Save it
to your skin's folder.</p>
<p>That's a basic conversion from 1.1 to 2.0. You can further define other
areas of the script such as the title blocks in series and challenges. If
you wish to change the look of these areas, copy the applicable .tpl from
default_tpls and make your changes. Then save that .tpl to your skin
folder NOT back to the default_tpls. </p>
</body></html>