Browse code
3.5.6 efiction version
Jimako authored on 2024/03/09 16:09:42
Showing 1 changed files
| 1 | 1 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,274 @@ |
| 1 |
+<html> |
|
| 2 |
+ |
|
| 3 |
+<head> |
|
| 4 |
+<meta http-equiv="Content-Language" content="en-us"> |
|
| 5 |
+<meta name="GENERATOR" content="Microsoft FrontPage 5.0"> |
|
| 6 |
+<meta name="ProgId" content="FrontPage.Editor.Document"> |
|
| 7 |
+<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> |
|
| 8 |
+<title>Converting 1</title> |
|
| 9 |
+</head> |
|
| 10 |
+ |
|
| 11 |
+<body> |
|
| 12 |
+ |
|
| 13 |
+<p align="center">Converting 1.1 skins to 3.0 skins.</p> |
|
| 14 |
+<p>This file is a work in progress. We'll flesh it out later as we all get |
|
| 15 |
+ more expertise with converting 1.1 skins to the 3.0 format.</p> |
|
| 16 |
+<p>1. Open a new folder for your converted skin.</p> |
|
| 17 |
+<p>2. Open the default.tpl file in the skin you wish to convert. |
|
| 18 |
+Everything <i><b>before</b></i> {output} transfer into header.tpl in your new
|
|
| 19 |
+folder then enclose it with start and close tags for the header block. A sample header.tpl might look like this.</p> |
|
| 20 |
+<pre></pre> |
|
| 21 |
+ |
|
| 22 |
+</div> |
|
| 23 |
+ |
|
| 24 |
+<p style="margin: 0 5%; border: 1px solid #000;"> <!-- START BLOCK : header --><br> |
|
| 25 |
+<body><br> |
|
| 26 |
+ |
|
| 27 |
+<div id="<span style="background-color: #FFFF00">{</span><span
|
|
| 28 |
+style="background-color: #FFFF00">page_id</span><span |
|
| 29 |
+style="background-color: #FFFF00">}</span>"><br> |
|
| 30 |
+ |
|
| 31 |
+<div id="header"><br> |
|
| 32 |
+ |
|
| 33 |
+<div id="banner"><br> |
|
| 34 |
+ |
|
| 35 |
+<div id="skin"><span style="background-color: #FFFF00">{</span><span
|
|
| 36 |
+style="background-color: #FFFF00">skinchange_content</span><span |
|
| 37 |
+style="background-color: #FFFF00">}</span><span style="padding: 15px;"><span |
|
| 38 |
+style="background-color: #FFFF00">{</span><span
|
|
| 39 |
+style="background-color: #FFFF00">rss</span><span |
|
| 40 |
+style="background-color: #FFFF00">}</span></span></div><br> |
|
| 41 |
+ |
|
| 42 |
+</div><br> |
|
| 43 |
+ |
|
| 44 |
+<div id="menu_container"><br> |
|
| 45 |
+<span style="background-color: #FF00FF"> |
|
| 46 |
+{home}&nbsp;{recent}&</span><span style="background-color: #FF00FF">nbsp;{catslink</span><span
|
|
| 47 |
+style="background-color: #FF00FF">}&nbsp;{authors}&nbsp;{titles}&nbsp;{help}<br>
|
|
| 48 |
+ |
|
| 49 |
+&nbsp;{search}&nbsp;{login}&nbsp;{logout}&nbsp;{adminarea}</span><br>
|
|
| 50 |
+ |
|
| 51 |
+</div><br> |
|
| 52 |
+ |
|
| 53 |
+</div><br> |
|
| 54 |
+ |
|
| 55 |
+<div id="mainpage"><br> |
|
| 56 |
+<!-- END BLOCK : header --></p> |
|
| 57 |
+<p>The {page_id} variable was new to 2.0. This variable gives you a unique
|
|
| 58 |
+ name to use in the css for each page. In the example above it's used as |
|
| 59 |
+ a containing tag. |
|
| 60 |
+<p>The {rss} variable
|
|
| 61 |
+defines where the orange rss image link appears. |
|
| 62 |
+<p>The other variable highlighted in yellow is a mod some people had previously |
|
| 63 |
+ installed. If you have previously added the skin change mod change {skinform}
|
|
| 64 |
+ to {skinchange_content} to include that block. You will also need to activate
|
|
| 65 |
+ that block and set it to the correct status in the blocks page in the admin |
|
| 66 |
+ area. |
|
| 67 |
+<p>The links highlighted in pink are still available in 3.0. You can convert |
|
| 68 |
+ these links to the new menu block if you wish or leave them as is. |
|
| 69 |
+<p>3. From your original default.tpl again, select everything <i> |
|
| 70 |
+<b>after</b></i> {output} and place it in your footer.tpl<p> <p style="margin: 0 5%; border: 1px solid #000;"><!-- START BLOCK :
|
|
| 71 |
+footer --><br> |
|
| 72 |
+ |
|
| 73 |
+</div><br> |
|
| 74 |
+ |
|
| 75 |
+<div id="footer"><span style="background-color: #FF00FF">{footer}</span></div></div><br>
|
|
| 76 |
+ |
|
| 77 |
+<div id="footermenu"><span style="background-color: #FFFF00">{</span><span
|
|
| 78 |
+style="background-color: #FFFF00">tos}{rules}{contactus</span><span
|
|
| 79 |
+style="background-color: #FFFF00">}</span></div><br> |
|
| 80 |
+<!-- END BLOCK : footer --><p>The {footer} variable is the same as in 1.1<p>
|
|
| 81 |
+The other three variables you see in yellow are new page links added in 2.0. <p> <div |
|
| 82 |
+align="center"> |
|
| 83 |
+ <center> |
|
| 84 |
+ <table border="1" cellpadding="3" cellspacing="0" |
|
| 85 |
+ style="border-collapse: collapse" bordercolor="#111111"> |
|
| 86 |
+ <tr> |
|
| 87 |
+ <th width="100%" colspan="2">New Page Links in 2.0</th> |
|
| 88 |
+ </tr> |
|
| 89 |
+ <tr> |
|
| 90 |
+ <td width="50%">{tos}</td>
|
|
| 91 |
+ <td width="50%">Terms of Service</td> |
|
| 92 |
+ </tr> |
|
| 93 |
+ <tr> |
|
| 94 |
+ <td width="50%">{rules}</td>
|
|
| 95 |
+ <td width="50%">Submission Rules</td> |
|
| 96 |
+ </tr> |
|
| 97 |
+ <tr> |
|
| 98 |
+ <td width="50%">{contactus}</td>
|
|
| 99 |
+ <td width="50%">Contact Us</td> |
|
| 100 |
+ </tr> |
|
| 101 |
+ <tr> |
|
| 102 |
+ <td width="50%">{featured}</td>
|
|
| 103 |
+ <td width="50%">Featured Stories</td> |
|
| 104 |
+ </tr> |
|
| 105 |
+ <tr> |
|
| 106 |
+ <td width="50%">{members}</td>
|
|
| 107 |
+ <td width="50%">Members</td> |
|
| 108 |
+ </tr> |
|
| 109 |
+ <tr> |
|
| 110 |
+ <td width="50%">{series}</td>
|
|
| 111 |
+ <td width="50%">Series</td> |
|
| 112 |
+ </tr> |
|
| 113 |
+ <tr> |
|
| 114 |
+ <td width="50%">{challenges}</td>
|
|
| 115 |
+ <td width="50%">Challenges</td> |
|
| 116 |
+ </tr> |
|
| 117 |
+ <tr> |
|
| 118 |
+ <td width="50%">{tens}</td>
|
|
| 119 |
+ <td width="50%">The Tens</td> |
|
| 120 |
+ </tr> |
|
| 121 |
+ </table> |
|
| 122 |
+ </center> |
|
| 123 |
+</div> |
|
| 124 |
+<p> <div align="center"> |
|
| 125 |
+ <center> |
|
| 126 |
+ <table border="1" cellpadding="3" cellspacing="0" |
|
| 127 |
+ style="border-collapse: collapse" bordercolor="#111111"> |
|
| 128 |
+ <tr> |
|
| 129 |
+ <th width="100%" colspan="2">Changed from 1.1</th> |
|
| 130 |
+ </tr> |
|
| 131 |
+ <tr> |
|
| 132 |
+ <td width="50%">{authors}</td>
|
|
| 133 |
+ <td width="50%">Authors (was members list)</td> |
|
| 134 |
+ </tr> |
|
| 135 |
+ </table> |
|
| 136 |
+ </center> |
|
| 137 |
+</div> |
|
| 138 |
+<p>3. In your new skin folder create a new file called variables.php. |
|
| 139 |
+As this is a conversion from 1.1 to 2.0 you will want to set some options in the |
|
| 140 |
+blocks settings.</p> |
|
| 141 |
+<p style="margin: 1em 5%; border: 1px solid #000;"><?php<br> |
|
| 142 |
+$blocks["info"]["status"] = '1'; <br> |
|
| 143 |
+$blocks["info"]["style"] = '1';<br> |
|
| 144 |
+$blocks["login"]["status"] = '1';<br> |
|
| 145 |
+$blocks["news"]["status"] = '1';<br> |
|
| 146 |
+$blocks["news"]["tpl"] = '1';<br> |
|
| 147 |
+$blocks["recent"]["status"] = '1';<br> |
|
| 148 |
+$blocks["recent"]["tpl"] = '1';<br> |
|
| 149 |
+$blocks["categories"]["status"] = '1';<br> |
|
| 150 |
+$blocks["categories"]["columns"] = '0';<br> |
|
| 151 |
+$blocks["categories"]["tpl"] = '1';<br> |
|
| 152 |
+$blocks["featured"]["tpl"] = '1';<br> |
|
| 153 |
+$blocks["featured"]["status"] = '1';<br> |
|
| 154 |
+?></p> |
|
| 155 |
+<p>Technically, this is probably overkill. You will definitely want to set |
|
| 156 |
+"tpl" to 1 for categories, recent, and featured if your skin uses them. If |
|
| 157 |
+in the past you used {totalstories} and {totalauthors}, activate the info block
|
|
| 158 |
+and set the style to 2. Note that this will also give you {totalmembers}
|
|
| 159 |
+to include. All of these blocks should be set to a "status" of 1 to |
|
| 160 |
+include them only on the index page. |
|
| 161 |
+If your skin doesn't use them, I suggest you set the status to 0. It will |
|
| 162 |
+make the page load a tiny bit faster, but for busy sites tiny bits will add up.</p> |
|
| 163 |
+<p>4. Copy the 1.1 index.tpl skin into your new folder and open it. Locate |
|
| 164 |
+the point where your header information stops. Delete everything before |
|
| 165 |
+that and replace it with:</p> |
|
| 166 |
+<p><!-- INCLUDE BLOCK : header --></p> |
|
| 167 |
+<p>Find where your footer information starts and replace everything below it with</p> |
|
| 168 |
+<p><!-- INCLUDE BLOCK : footer --></p> |
|
| 169 |
+<p>We took care of all the blocks except news in the previous step. Find |
|
| 170 |
+where your news is included in the index.tpl and replace the block with {news_content}
|
|
| 171 |
+You can also remove {newspageprev} and {newspagenext} as those are replaced by
|
|
| 172 |
+the newsarchive link and are included in {news_content}. To style the news
|
|
| 173 |
+archive link use #newsarchive in your style.css. The #newsarchive id is a |
|
| 174 |
+div around the archive link.</p> |
|
| 175 |
+ |
|
| 176 |
+<p>5. Copy your newsbox.tpl file into the new folder. No changes need to |
|
| 177 |
+be made to that. Note however that the style will be carried over to the |
|
| 178 |
+news archive.</p> |
|
| 179 |
+ |
|
| 180 |
+<p>6. Open your style.css and style the following elements. The |
|
| 181 |
+information after the dash is suggested styles to match 1.1 where possible or |
|
| 182 |
+just general ideas</p> |
|
| 183 |
+ |
|
| 184 |
+<p>#pagetitle - text-align: center; font-size: 150%; margin: 1ex;<br> |
|
| 185 |
+#alphabet, #pagelinks - text-align: center; margin: 1em;<br> |
|
| 186 |
+LABEL - font-weight: bold;<br> |
|
| 187 |
+#sort - text-align: center; margin: 1ex; (Sort options on categories.php)<br> |
|
| 188 |
+#profile #sort - text-align: right; (Sort options on the viewuser |
|
| 189 |
+page)</p> |
|
| 190 |
+ |
|
| 191 |
+<p>.sectionheader - text-align: center; font-weight: bold; (this is the |
|
| 192 |
+"Series" and "Stories" sub-headers)<br> |
|
| 193 |
+#titleblock - margin: 0 10%; border: 1px solid #000; <br> |
|
| 194 |
+(this is the title block at the top of the series and challenges pages when a |
|
| 195 |
+single series/challenge is listed)</p> |
|
| 196 |
+ |
|
| 197 |
+<p>To convert the tabs in the viewuser page from 1.1 to 2.0 you'll need to add |
|
| 198 |
+the #tabs style group to your style.css. This is the tabs information for |
|
| 199 |
+the skin in default_tpls. It's a good place to start. 2.0 gives you more |
|
| 200 |
+options in styling this section of the viewuser page, but this styling will be |
|
| 201 |
+close to what you previously used in 1.1 with some tweaking. The #active |
|
| 202 |
+styling is the tab currently active in the window. In 1.1 this would have |
|
| 203 |
+been the table cell with the background color.</p> |
|
| 204 |
+ |
|
| 205 |
+<p>#tabs {<br>
|
|
| 206 |
+padding: 0;<br> |
|
| 207 |
+margin: 0;<br> |
|
| 208 |
+clear: both;<br> |
|
| 209 |
+border-top: 3px double #000;<br> |
|
| 210 |
+border-bottom: 3px double #000;<br> |
|
| 211 |
+}<br> |
|
| 212 |
+<br> |
|
| 213 |
+#tabs DIV{ <br>
|
|
| 214 |
+width: 33%;<br> |
|
| 215 |
+float: left;<br> |
|
| 216 |
+color: #000;<br> |
|
| 217 |
+text-align: center;<br> |
|
| 218 |
+background: #CCC; <br> |
|
| 219 |
+font-size: 11pt;<br> |
|
| 220 |
+}<br> |
|
| 221 |
+<br> |
|
| 222 |
+#tabs #centertab {<br>
|
|
| 223 |
+background: transparent;<br> |
|
| 224 |
+border-right: 3px double #000;<br> |
|
| 225 |
+border-left: 3px double #000;<br> |
|
| 226 |
+width: 98%;<br> |
|
| 227 |
+}<br> |
|
| 228 |
+<br> |
|
| 229 |
+#tabs a { color: #000; }<br>
|
|
| 230 |
+#tabs a:active, a:hover { text-decoration: none; color: #555; }<br>
|
|
| 231 |
+<br> |
|
| 232 |
+#tabs #active { background: #555; width: 34%; color: #FFF; }<br>
|
|
| 233 |
+#tabs #active a { color: #FFF; }<br>
|
|
| 234 |
+#tabs #active a:active, a:hover { text-decoration: none; color: #555; }</p>
|
|
| 235 |
+ |
|
| 236 |
+<p>7. The last thing you'll probably need to do is convert your storyblock.tpl. |
|
| 237 |
+If you wish, you can rely on the default and set the appearance of both the |
|
| 238 |
+stories and series blocks through your style.css. The default uses the .listbox |
|
| 239 |
+class with child classes of .title, .tail, .adminoptions, .content, and |
|
| 240 |
+.classification. You can also use .odd and .even to alternate style of |
|
| 241 |
+blocks every other one.</p> |
|
| 242 |
+ |
|
| 243 |
+<p>/* Formatting for the divs for series and stories. */<br> |
|
| 244 |
+.listbox { margin: 0 5%; border: 2px solid #900; margin-bottom: 1em; background:
|
|
| 245 |
+#FFF; background-position: 0 5px;}<br> |
|
| 246 |
+.listbox .title { font-weight: bold; padding: 4px; color: #900; border-bottom:
|
|
| 247 |
+3px double #900;}<br> |
|
| 248 |
+.listbox .title a:link { color: #900; text-decoration: underline;}<br>
|
|
| 249 |
+.listbox .title a:visited { color: #C66; text-decoration: underline;}<br>
|
|
| 250 |
+.listbox .title a:hover { color: #900; text-decoration: underline overline; }<br>
|
|
| 251 |
+.listbox .content { padding: 5px; padding-top: 10px; padding-bottom: 10px;}<br>
|
|
| 252 |
+.listbox .tail, .listbox .respond { border-top: 3px double #900;}<br>
|
|
| 253 |
+.listbox .classfication { font-weight: bold; }<br>
|
|
| 254 |
+/* End listbox formatting. */</p> |
|
| 255 |
+ |
|
| 256 |
+<p>If you don't want to use the default, I suggest you copy listings.tpl from |
|
| 257 |
+the default_tpls folder then paste the contents of your storyblock.tpl into the |
|
| 258 |
+storyblock section then replicate it for the series section. Pay attention |
|
| 259 |
+to the additional information for the story block. You may now include |
|
| 260 |
+challenges and series information. There are also adminoptions to be |
|
| 261 |
+included as well. If you don't use the default you will also need to |
|
| 262 |
+separately style the challenges block (if you choose to use challenges on your |
|
| 263 |
+site). |
|
| 264 |
+Copy challenges.tpl from the default_tpls folder and style it as you wish. |
|
| 265 |
+<u>Do<b><i> NOT </i></b>save it back to default_tpls. </u><b> </b>Save it |
|
| 266 |
+to your skin's folder.</p> |
|
| 267 |
+ |
|
| 268 |
+<p>That's a basic conversion from 1.1 to 2.0. You can further define other |
|
| 269 |
+areas of the script such as the title blocks in series and challenges. If |
|
| 270 |
+you wish to change the look of these areas, copy the applicable .tpl from |
|
| 271 |
+default_tpls and make your changes. Then save that .tpl to your skin |
|
| 272 |
+folder NOT back to the default_tpls. </p> |
|
| 273 |
+ |
|
| 274 |
+</body></html> |
|
| 0 | 275 |
\ No newline at end of file |