The forum of the forums
Welcome on the Forumotion Support Forum.

To take full advantage of everything offered by our forum, please log in if you are already a member or join our community if you're not yet....

Create a free forum like this one.
Add multi-themes to your forum 5 5 2

Add multi-themes to your forum

View previous topic View next topic Go down

Add multi-themes to your forum

Post by Buttercup on June 1st 2010, 11:08 am

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

This is a 3 step tutorial. - What are they?

The implementation of this is in three steps:

Step 1- Prepare our style sheets
Step 2 - Create our script
Step 3 - Insert the selector on the forum

Step 1 - Preparing the skins were going to use

Lets quickly open a new tab in your browser and load
/!\ Warning: When choosing theme's, ensure they are the same version as your forum, otherwise the theme will not display properly.
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 by iwkzy

In the URL Bar you will see the address
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

So, here we list into our notepad all the links to the css sheet like I have above, and save it, just incase something happens.

Repeat the above step for as many themes as desired, we can modify the theme to the amount of skins you wish later.

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. I will show how to modify during 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 - 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 Wink

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 order to preform this, we require atleast 5-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, please host host them somewherre that can submit as a .CSS extension, otherwise, the script wont recognise your coding as a CSS code. Keep a reference of the DIRECT link in the notepad file from earlier.
You can use your own script from the base up, or just a few lines, this is your call.

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

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 note pad, modify this script to YOUR HTML Page, Ill also show you a neat trick.
<script src=/h9-></script>
Just replace the '9' with your number.

Notice how short that URL is? Why is it?
Mainly because you don't need the URL of your forum, it automatically loads that, and the code is loaded form the/h9-, anything after that is just made to look fancy. Keeping it short and simple Very Happy

Final step:
Navigate to: General > Forum Description > Insert the URL we made just above, and save.

Vioa, there's your new theme selector, congratulations!

MultiTheme.txt You don't have permission to download attachments.(3 Kb) Downloaded 378 times

Last edited by Typlo on June 2nd 2010, 1:08 pm; edited 4 times in total


Posts: 8456
Language: French, English
Points: 8600
Join date: 2007-09-04

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

Permissions in this forum:
You cannot reply to topics in this forum