Add multi-themes to your forum (By Darren)

[Typlo]

Add multi-themes to your forum

In order to preform this, we require atleast 10-15 minutes and a little bit of patience, and we need a notepad or word document open Warning: CSS Users: If you have good knowledge of CSS it is advised that you use your stylesheets Warning: Hitskin users: Because we cannot change the images of the skins not directly on our forum, we can only use the default images on the hitksin forum previews - This cannot be changed. We also need a word or note pad document open This is a 3 step tutorial. - What are they? The implementation of this is in three steps: Step 1- Prepare our style sheets ( 2 levels ) Step 2 - Create our script Step 3 - Insert the selector on the forum Step 1 - Preparing the skins were going to use - (Non-CSS knowledgable) Anyone who has CSS knowledge in making skins would be advised to have their skins CSS handy - Please view next below before continuing on please. Lets quickly open a new tab in your browser and load http://hitskin.com Now, select 3 skins from hitskin that you wish to use that is on the same version as you have I'm using PunBB for this tutorial but adjust to your version => You can find out the version of your forum via Admin panel >> Display > Choose a theme > Version. The theme I'm going to use is Twilightsaga-4ever.com by iwkzy In the URL Bar you will see the address http://demo.nicetheme.com/index.htm?theme_id=153102 We need this reduce specific address to just the numbers so its just 153102 Now, grab the CSS Code by adding in a css grabber -ltr.css . Now we configure the theme by this way /153102-ltr.css Now were ready to configure this to our forum Code: http://address_of_your_forum/153102-ltr.css /! Important: Insert this into your word or notepad document now! Repeat this step as many times as desired to receive the amount of wanted themes options, recording all in the note or word pad document. => Proceed to step 2 now Step 1; CSS Knowledgeable Spoiler: Open up your CSS creations, or make new ones save the document with an easily recognizable name, and avoid spaces in the name Note: It is not necessary to replicate a complete CSS Stylesheet, as long as you do not disable the css base of your forum. Example You can not make CSS Style Sheets that do not modify some elements or only one, for example the bottom of your forum: I put this in my notepad Code: body { background-color:#000000; } I save this to my desktop, with the file name "Fond_noir.css " I also want to propose a red background: New document on my notepad with: Code: body { background-color:#ca2c2d; } I save the file on my desktop with the file name Fond_rouge.css ~> Once your CSS style sheets are prepared and located on your desktop: you must upload. http://www.oswd.org/ - Just register, login & upload. Host your CSS file, and note the addresses obtained on the notepad, specifying the name of those there so you can spot them easily. Part 3: It is important that we NEVER edit this section of coding, it stores important information such as cookies, and remembering what theme you use Section 2.2 Making the script ours Reminder: We can only edit section 1 and 2 of the script Lets change the text displayed for the theme. Code: <option> Choose your theme  </option> Change the text "Choose your theme" to what you'd like. Now lets add our skins Stay in section 1 of the coding and locate this Code: <option value="valeur1"> Name of theme - Name of theme creator </option> This is the name of the theme followed by the creator of the theme, lets change it to our first theme. Now, lets go and correspond that to our style sheets in section 2 Code: if (type == 'valeur1') { document.write('<link rel="stylesheet" type="text/css" href="URL_OF_YOUR_FORUM/IDNUMBER-ltr.css">'); } Just change URL_OF_YOUR_FORUM/IDNUMBER-ltr.css" to what you have saved in your note/word pad which would be similar to "http://Your_forum_address/153102-ltr.css" Now, repeat this step for option 2 & 3. Other than these 2 parts, do not edit anything else! Adding additional options This is step 2.3. In part 1 of the code, locate the last end code Code: </option> and </select> and insert the code Code: <option value="valeur4"> Theme name & creator </option> Now head to part 2, and at the end of it add the code Code: else if (type == 'valeur4') { document.write('<link rel="stylesheet" type="text/css" href="adresse_de_votre_feuille_css">'); } Now repeat this for as many skin options as desired, but please do remember to increase the number for each skin IE: valuer option2 should be option3 then option4 then option5 and so forth. Removing an option Simple, we remove the code from both sections 1 & 2 In section 1 remove Code: <option value="valeur3"> Nom du thème 3 </option> In section 2 remove Code: else if (type == 'valeur3') { document.write('<link rel="stylesheet" type="text/css" href="adresse_of_theme_3">'); } Now you may save and exit the html page. Caution: For those who have taken the road of using Hitskin.com skins be aware that you will lose any customizations to the skin you have made. This is how it is meant to be and cannot be corrected. Any possible template editions will also have to be re-applied in order to work. Step 2.4 Lets grab the URL of the code return to the loading page of the HTML administration, you should have the URL to your page. Highlight and copy it Step 3 - Installing the Multi-theme script. PunBB & PHPBB2 Versions PHPBB2 Lets head to our templates Admin panel >> Display > templates/overall_header_new Hit the corresponding to edit the template Now hit the CTRL+F button on your keyboard and insert this into the search section Code: <td align="center" width="100%" valign="middle"> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a> <div class="maintitle">{MAIN_SITENAME}</div> <span class="gen">{SITE_DEscriptION}</span> </td> In between the two codes Code: <span class="gen">{SITE_DEscriptION}</span> and Code: </td> insert the code Code: <span id="temsel"></span><script type="text/javascript" src="URL_OF_YOUR_FORUM/FULL_URL_OF_YOUR_HTML_PAGE_FROM_EAIRLER"></script> Now save and publish. PunBB Version Lets head to our templates Admin panel >> Display > templates/overall_header_new Hit the corresponding to edit the template Locate this code Code: <!-- BEGIN switch_desc --> <p id="pun-desc">{switch_desc.SITE_DEscriptION}</p> <!-- END switch_desc --> </div> <div id="pun-head"> <div id="pun-navlinks"> <ul class="clearfix"> <li>{GENERATED_NAV_BAR}</li> </ul> </div> </div> After the 2nd Code: </div> hit the enter button and insert this code Code: <span id="temsel"></span><script type="text/javascript" src="URL_YOUR_FORUM/URL_OF_YOUR_HTML_PAGE_FROM_BEFORE"></script> Now save and publish. For both versions phpbb3 and Invision Simply insert the code located below into the Site description Administration Panel >> General >>Forum >> Configuration >> Site Description: Code: <span id="temsel"></span><script type="text/javascript" src="THE_URL_OF_YOUR_HTML_PAGE_FOR_YOUR_MULTISKIN"></script> Just simply change "THE_URL_OF_YOUR_HTML_PAGE_FOR_YOUR_MULTISKIN" to the URL of the HTML page we created in part 1 of step 2 and save. Now, you have your very own multi-themed forum Thanks to Irina of the French Support Forum for the permission to translate this tutorial. And To Typlo for getting the permission & posting this.

This tutorial has been made by the French staff, and ameliorated by Darren No reproduction possible without our agreement, pursuant to Article L122-1 of the ICC.