Forumotion Theme Changer!

ankillien · 1 Forumotion Theme Changer! Tue Feb 02, 2010 8:17 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

First topic message reminder :

Forumotion Theme Changer
Style sheet changer for Forumotion forums.

Hello Everyone Very Happy

I know, all Forumotion users want to have a theme changer or having multiple themes for their Forumotion forums. Here is a simple tutorial that will guide you to install a theme changer.

First of all, you need to go to get the JavaScript code which is provided by DynamicDrive.com. The JavaScript file is found on this page.

Navigate to your Admin Panel > Modules > HTML Page Management > Create New Page > Add the JavaScript code in the page and save it.
Navigate to Admin CP > Display > Templates > General > overall_header_new
Find out this part in the template...

Code:

</head>

Right before that you need to link the HTML page that you just created. You need to use the following code for that...

Code:

<script src="HTML PAGE URL HERE" type="text/javascript"></script>
Now you need to attach stylesheets You can use the following code to link the stylesheets/themes.

Code:

<link rel="alternate stylesheet" type="text/css" media="screen" title="default" href="DEFAULT STYLE SHEET URL HERE" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="STYLE SHEET 1 URL HERE" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="STYLE SHEET 2URL HERE" />

You can add as many stylesheets/themes as yo want. Just update the title attribute with increasing number. Like if you are going to add one more stylesheet, the code will look like this...

Code:

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme3" href="STYLE SHEET 3 URL HERE" />

Notice the value title attribute was changed to theme3.

Remember that the <link...> tag for attaching stylesheet must go before the <script...> tag which you used to link the JavaScript code.

Note : You can add as many style sheets as you want but don't forget to put link to your default style sheet too so that your members can change back to normal style as well. Title for default styleheet should be set to 'default'.
Now you need to create radio buttons with with the members can choose style they like. Here is the HTML code for that which should be placed anywhere inside the body tag. You can put it in footer or on top of the page. We will put it on top of the page. Add the following code right after the <body> tag starts in the template code.

Code:

<form id="switchform">  <input type="radio" name="choice" value="default" onClick="chooseStyle(this.value, 60)">Default Theme<br />  <input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Theme 1 Name<br />  <input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Theme 2 Name </form>

Notice the value attribute in the codes. It should be corresponding to the title of the respective theme.
Its almost done now. Save the template, publish the template and see if it works.

Hope the tutorial is simple enough to make sense to you Smile

Thank You

The credit for the JavaScript and HTML codes goes to DynamicDrive.com. To learn more on how this code works and how to customize it, please visit here.

How to know the URL of desired style sheet?

Spoiler:

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

Last edited by ankillien on Sun Feb 21, 2010 8:38 pm; edited 2 times in total

Faz · **101** Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:19 am

Faz

Registered Member

Posts : 14

Sorry, i hate to double post, but is there anything i can do do make my theme changer load other themes without the old background loading in the background, then going to the theme's current background?

ankillien · **102** Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:22 am

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

Faz wrote:Sorry, i hate to double post, but is there anything i can do do make my theme changer load other themes without the old background loading in the background, then going to the theme's current background?

For that, you need to edit the themes CSS and remove the background code from it. The theme changer can't be configured to do it.

Faz · **103** Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:31 am

Faz

Registered Member

Posts : 14
Points : 0
Age : 28
Location : FP

If i do that, will it remove the background completely from the default theme?
if not, where can i remove the code

ankillien · **104** Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:33 am

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

You can add your default background in the themes CSS by accessing this code...

body {
background-color : #;
background-image : url();
}

Faz · **105** Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:35 am

Faz

Registered Member

Posts : 14
Points : 0
Age : 28
Location : FP

Maybe i didn't explain it right
So the problem is, everything works fine. All the themes in the theme changer work fine and so do the background. so when i choose a theme other than the default theme, the default themes background loads quickly, then the theme i choose background is back. I want all the theme's background to shop up without the original background loading first

ankillien · **106** Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:40 am

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

I am getting what you want to say.
Can you provide a link to your forum so that I can check it myself?

Faz · **107** Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:44 am

Faz

Registered Member

Posts : 14
Points : 0
Age : 28
Location : FP

Yeah, the problem is when i click any other links in the forums, the default background always loads up quicky first, then the switched theme's background is loaded

link

ankillien · **108** Re: Forumotion Theme Changer! Sat Jul 24, 2010 12:49 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

It looks fine to me.
The new themes will take a while to load for the first time but once they are loaded completely, the background won't take longer time to load when switching the themes.

Faz · **109** Re: Forumotion Theme Changer! Sat Jul 24, 2010 1:42 pm

Faz

Registered Member

Posts : 14
Points : 0
Age : 28
Location : FP

1 more question. Is there any to edit out a hitskin's forum width in the template codes?

ankillien · **110** Re: Forumotion Theme Changer! Sat Jul 24, 2010 2:41 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

You mean, hitskins demo forum's width to be changed in template?
There is no way to do it.

Faz · **111** Re: Forumotion Theme Changer! Sat Jul 24, 2010 2:54 pm

Faz

Registered Member

Posts : 14
Points : 0
Age : 28
Location : FP

hmm.. didn't think so, so is there any other way of editing a hitskin demo? i tried to resize one of hitskins skins and reupload it on my account, but you cant

any other way to upload the theme?

ankillien · **112** Re: Forumotion Theme Changer! Sat Jul 24, 2010 4:22 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

You can't make changes in hitskin demo Razz

You can make changes in the CSS of the theme.

You can download the CSS of a particular theme, open it in a text editor, make changes and upload it to your web host and use it Wink

If you don't like hitksin themes, you can edit the CSS files of the themes and upload them to your web host. Thats the only solution.

acman · **113** help please Fri Aug 27, 2010 10:02 am

acman

Registered Member

Posts : 5
Points : 5
Age : 45
Location : Singapore
Browser : Firefox

Hi,

I've tried to apply this theme changer on my forum, but to be safe, i'm creating a temporary/dummy forum to test it first

http://jerseytest.forumotion.asia

but i can't make it work Sad

, it will only show the radio button

so this is what i've done so far

1. download the styleswitch.js
2. copy & paste the content as http://jerseytest.forumotion.asia/styleswitch-h2.htm (since i don't know how to upload the js file)
3. create the script code as http://jerseytest.forumotion.asia/Theme-Changer-h1.htm
with this content



<script src="styleswitch-h2.htm" type="text/javascript">

/***********************************************
* Style Sheet Switcher v1.1-

Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

4. Update the overall_new header

with these additions
...

<script src="http://jerseytest.forumotion.asia/Theme-Changer-h1.htm" type="text/javascript"></script>

<link rel="alternate stylesheet" type="text/css" media="screen" title="default" href="http://jerseytest.forumotion.asia/129813-ltr.css"></link>

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="http://jerseytest.forumotion.asia/125820-ltr.css"></link>

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="http://jerseytest.forumotion.asia/100031-ltr.css"></link>

</head>

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<form id="switchform">


<input type="radio" name="choice" value="default" onClick="chooseStyle(this.value, 60)">Default Theme<br>


<input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Theme 1 Name<br>


<input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Theme 2 Name
</form>

... (rest of the script)

5. Published the template
6. The radio button shows on the web page, but it doesn't do anything Sad

any help ?

Cheers,

ankillien · **114** Re: Forumotion Theme Changer! Fri Aug 27, 2010 1:03 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

Hi acman!

When you create the HTML page to put the scripts, Select 'NO' for 'Do you wish to use your forum header and footer ?'

It should work than Very Happy

acman · **115** Re: Forumotion Theme Changer! Fri Aug 27, 2010 2:48 pm

acman

Registered Member

Posts : 5
Points : 5
Age : 45
Location : Singapore
Browser : Firefox

Hi,

done that.. but still the radio button doesn't work, as in it doesn't change anything Sad

if you want, i can give you the admin password, for you to check Very Happy

as that's only test forum, there's nothing there.. Smile

ankillien · **116** Re: Forumotion Theme Changer! Fri Aug 27, 2010 5:19 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

Code::  <script src="styleswitch-h2.htm" type="text/javascript"> /*********************************************** * Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script>

1) The above part must go below all the <link> tags.

2) Also, the link tags can't be closed that way. See the tutorial how the link tags are closed.

3) <script src="styleswitch-h2.htm" type="text/javascript"> try using the full path to the page. Like this...

Code:: <script src="http://jerseytest.forumotion.asia/styleswitch-h2.htm" type="text/javascript">

acman · **117** Re: Forumotion Theme Changer! Fri Aug 27, 2010 6:14 pm

acman

Registered Member

Posts : 5
Points : 5
Age : 45
Location : Singapore
Browser : Firefox

Hi, thanks for the guide, now i've modified the overall_header_new template as this :

...

<link rel="alternate stylesheet" type="text/css" media="screen" title="default" href="http://jerseytest.forumotion.asia/129813-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="http://jerseytest.forumotion.asia/125820-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="http://jerseytest.forumotion.asia/100031-ltr.css" />

<script src="http://jerseytest.forumotion.asia/Theme-Changer-h1.htm" type="text/javascript"></script>

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<form id="switchform">


<input type="radio" name="choice" value="default" onClick="chooseStyle(this.value, 60)">Default Theme<br/>


<input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Theme 1 Name<br/>


<input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Theme 2 Name
</form>

...

but i still got the same result after saving & publish the changes Sad

ankillien · **118** Re: Forumotion Theme Changer! Fri Aug 27, 2010 6:46 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

The code inside your head tags should look like this.....

Code:: <link rel="alternate stylesheet" type="text/css" media="screen" title="default" href="http://jerseytest.forumotion.asia/129813-ltr.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="http://jerseytest.forumotion.asia/125820-ltr.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="http://jerseytest.forumotion.asia/100031-ltr.css" /> <script src="http://jerseytest.forumotion.asia/Theme-Changer-h1.htm" type="text/javascript"></script>  <script src="http://jerseytest.forumotion.asia/styleswitch-h2.htm" type="text/javascript"> /* * Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more */ </script>

acman · **119** Re: Forumotion Theme Changer! Fri Aug 27, 2010 9:50 pm

acman

Registered Member

Posts : 5
Points : 5
Age : 45
Location : Singapore
Browser : Firefox

ok.. got that..

but still no effect Sad

ankillien · **120** Re: Forumotion Theme Changer! Fri Aug 27, 2010 10:15 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

I don't find this part in your forum...

Code:: <script src="http://jerseytest.forumotion.asia/Theme-Changer-h1.htm" type="text/javascript"></script>

I think you have forgotten to add it. It should be there in head tags.

acman · **121** Re: Forumotion Theme Changer! Sat Aug 28, 2010 12:24 am

acman

Registered Member

Posts : 5
Points : 5
Age : 45
Location : Singapore
Browser : Firefox

aahh it works after i change my default skin to default version..

thanks for the tip Smile

but where should i put the script if i want to put it as in this forum ?

Guest · **122** Re: Forumotion Theme Changer! Sat Aug 28, 2010 12:42 am

Guest

The best coder ever been on forumotion! All the best

ankillien · **123** Re: Forumotion Theme Changer! Sat Aug 28, 2010 8:52 am

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

@acman,

Glad I could help buddy Very Happy

Here we are using completely different technique for the theme changer and we would not prefer to make it public, sorry.

@Nick,

I am not really the best Razz

Last edited by ankillien on Wed Sep 01, 2010 7:14 pm; edited 1 time in total

C.noergaard · **124** Re: Forumotion Theme Changer! Wed Sep 01, 2010 6:56 pm

C.noergaard

Registered Member

Posts : 103
Points : 0
Age : 26
Location : Ikast,Jylland,Denmark
Browser : Google Chrome

Cool very cool i will use that!

vi3tkid277 · **125** Re: Forumotion Theme Changer! Wed Oct 06, 2010 3:49 am

vi3tkid277

Registered Member

Posts : 2
Points : 0
Age : 29
Location : Windsor
Browser : Google Chrome

need>help. :d
selection not working.
can select from the dropdown menu but nothing happens.
mabi-hs.forumotion.net

ankillien · **126** Re: Forumotion Theme Changer! Wed Oct 06, 2010 8:57 am

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

Hi,

I noticed that on your html page where you have added the javascript, you have chosen to show FM header and footer.

You need to remove that by going to HTML page management > edit your html page > Do you wish to use your forum header and footer ?

Se it to 'No' and save Smile

Sponsored content

Quick Menu

Quick Menu

1 Forumotion Theme Changer! Tue Feb 02, 2010 8:17 pm

ankillien

101 Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:19 am

Faz

102 Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:22 am

ankillien

103 Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:31 am

Faz

104 Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:33 am

ankillien

105 Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:35 am

Faz

106 Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:40 am

ankillien

107 Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:44 am

Faz

108 Re: Forumotion Theme Changer! Sat Jul 24, 2010 12:49 pm

ankillien

109 Re: Forumotion Theme Changer! Sat Jul 24, 2010 1:42 pm

Faz

110 Re: Forumotion Theme Changer! Sat Jul 24, 2010 2:41 pm

ankillien

111 Re: Forumotion Theme Changer! Sat Jul 24, 2010 2:54 pm

Faz

112 Re: Forumotion Theme Changer! Sat Jul 24, 2010 4:22 pm

ankillien

113 help please Fri Aug 27, 2010 10:02 am

acman

114 Re: Forumotion Theme Changer! Fri Aug 27, 2010 1:03 pm

ankillien

115 Re: Forumotion Theme Changer! Fri Aug 27, 2010 2:48 pm

acman

116 Re: Forumotion Theme Changer! Fri Aug 27, 2010 5:19 pm

ankillien

117 Re: Forumotion Theme Changer! Fri Aug 27, 2010 6:14 pm

acman

118 Re: Forumotion Theme Changer! Fri Aug 27, 2010 6:46 pm

ankillien

119 Re: Forumotion Theme Changer! Fri Aug 27, 2010 9:50 pm

acman

120 Re: Forumotion Theme Changer! Fri Aug 27, 2010 10:15 pm

ankillien

121 Re: Forumotion Theme Changer! Sat Aug 28, 2010 12:24 am

acman

122 Re: Forumotion Theme Changer! Sat Aug 28, 2010 12:42 am

Guest

123 Re: Forumotion Theme Changer! Sat Aug 28, 2010 8:52 am

ankillien

124 Re: Forumotion Theme Changer! Wed Sep 01, 2010 6:56 pm

C.noergaard

125 Re: Forumotion Theme Changer! Wed Oct 06, 2010 3:49 am

vi3tkid277

126 Re: Forumotion Theme Changer! Wed Oct 06, 2010 8:57 am

ankillien

127 Re: Forumotion Theme Changer!

Sponsored content