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 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
Warning: When choosing theme's, ensure they are the same version as your forum, otherwise the selector will not display
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
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 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.filedropper.com/ - 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.
Step 2 - Creating the script
Caution: Follow this carefully, it is broken down into 4 steps
Sub-Step 1: Create the HTML Page
Admin panel >> Modules > HTML page management > Create new
Both options are set to NO
Step 1: Name the HTML Page to your discretion
Both of the below options must be set to no
Copy and paste this code into the blank HTML Page space
Take DUE note that this script is broken up into 3 parts for ease of use!
The script is attached as an attachment, at the bottom of this post.
Remember: Read the rest of this post FIRST before completing it, I need to explain how to change some things.
Now, Ill explain what code does what.
Do not modify the code unless told to - or where I say in this tutorial.
In part 1 - You will see the text "DEFAULT" "CUSTOM THEME 1/2/3"
You can change them to the names of the custom themes.
In section 2, you will see the URL https://testorial.forumotion.com - Change that to the URL Of your forum.
You will see 5 numbers proceeding the URL, change that to the numbers we recorded earlier ( 1 per line ) as that is your next theme.
You will also see the text (DEFAULT THEME), (CUSTOM THEME 1/2/3) please remove them as they are a simple guide to what theme will be what. The selector will not show up if the text remains there
Now, save the HTML Page.
Hit the "Modules" tab again, and hit the HTML Pages management, and copy the URL of the page we just created - Save it in your notepad.
In your notepad, paste this code, and modify my URL to the URL of your page.
- Code:
<script type=text/javascript src=http://testorial.forumotion.com/h9-multithemev3></script>
Now, once you've modified that above code, copy it, and page it in the site description via: Admin panel >> General > Forum/configuration > Site Description & Save it there
Now leave the admin panel, and view the glory of your new theme selector
Note: For template users (PunBB & PHPBB2) it is just as easy to use the above method. There's no difference if you rather do it via templates
I hope you have enjoyed this tutorial
Thanks,
Darren
- Attachments
- Multitheme.txt
- You don't have permission to download attachments.
- (3 Kb) Downloaded 6 times