1 of 1

Converting 1.1 skins to 3.0 skins

content of file: docs/convertingskins.htm

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.

1. Open a new folder for your converted skin.

2. Open the default.tpl file in the skin you wish to convert. Everything before {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.

<!-- START BLOCK : header -->
<body>
    <div id="{page_id}">
        <div id="header">
            <div id="banner">
                <div id="skin">{skinchange_content}<span style="padding: 15px;">{rss}</span></div>
            </div>
            <div id="menu_container">
                {home}&nbsp;{recent}&nbsp;{catslink}&nbsp;{authors}&nbsp;{titles}&nbsp;{help}
                &nbsp;{search}&nbsp;{login}&nbsp;{logout}&nbsp;{adminarea}
            </div>
        </div>
    <div id="mainpage">
<!-- END BLOCK : header -->

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.

The {rss} variable defines where the orange rss image link appears.

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.

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.

3. From your original default.tpl again, select everything after {output} and place it in your footer.tpl

<!-- START BLOCK : footer -->
    </div>
        <div id="footer">{footer}</div></div>
        <div id="footermenu">{tos}{rules}{contactus}</div>
<!-- END BLOCK : footer -->

The {footer} variable is the same as in 1.1

The other three variables you see in yellow are new page links added in 2.0.

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.

<?php
$blocks["info"]["status"] = '1';
$blocks["info"]["style"] = '1';
$blocks["login"]["status"] = '1';
$blocks["news"]["status"] = '1';
$blocks["news"]["tpl"] = '1';
$blocks["recent"]["status"] = '1';
$blocks["recent"]["tpl"] = '1';
$blocks["categories"]["status"] = '1';
$blocks["categories"]["columns"] = '0';
$blocks["categories"]["tpl"] = '1';
$blocks["featured"]["tpl"] = '1';
$blocks["featured"]["status"] = '1';
?>

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.

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:

Find where your footer information starts and replace everything below it with

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.

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.

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

#pagetitle - text-align: center; font-size: 150%; margin: 1ex; #alphabet, #pagelinks - text-align: center; margin: 1em; LABEL - font-weight: bold; #sort - text-align: center; margin: 1ex; (Sort options on categories.php) #profile #sort - text-align: right; (Sort options on the viewuser page)

.sectionheader - text-align: center; font-weight: bold; (this is the "Series" and "Stories" sub-headers) #titleblock - margin: 0 10%; border: 1px solid #000; (this is the title block at the top of the series and challenges pages when a single series/challenge is listed)

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.

#tabs { padding: 0; margin: 0; clear: both; border-top: 3px double #000; border-bottom: 3px double #000; } #tabs DIV{ width: 33%; float: left; color: #000; text-align: center; background: #CCC; font-size: 11pt; } #tabs #centertab { background: transparent; border-right: 3px double #000; border-left: 3px double #000; width: 98%; } #tabs a { color: #000; } #tabs a:active, a:hover { text-decoration: none; color: #555; } #tabs #active { background: #555; width: 34%; color: #FFF; } #tabs #active a { color: #FFF; } #tabs #active a:active, a:hover { text-decoration: none; color: #555; }

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.

/* Formatting for the divs for series and stories. */ .listbox { margin: 0 5%; border: 2px solid #900; margin-bottom: 1em; background: #FFF; background-position: 0 5px;} .listbox .title { font-weight: bold; padding: 4px; color: #900; border-bottom: 3px double #900;} .listbox .title a:link { color: #900; text-decoration: underline;} .listbox .title a:visited { color: #C66; text-decoration: underline;} .listbox .title a:hover { color: #900; text-decoration: underline overline; } .listbox .content { padding: 5px; padding-top: 10px; padding-bottom: 10px;} .listbox .tail, .listbox .respond { border-top: 3px double #900;} .listbox .classfication { font-weight: bold; } /* End listbox formatting. */

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. Do NOT save it back to default_tpls. Save it to your skin's folder.

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.