Question about multi themed forums
4 posters
Page 1 of 3
Page 1 of 3 • 1, 2, 3
Question about multi themed forums
https://help.forumotion.com/tricks-tips-f32/add-multi-themes-to-your-forum-by-darren-t71484.htm
Can someone tell please what to do when you reach the "=>Proceed to step 2 now" bit?
Am I blind or is there no step 2?
Can someone tell please what to do when you reach the "=>Proceed to step 2 now" bit?
Am I blind or is there no step 2?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
I have not really worked with this.
However, there is the step 2.
Step 2 - Creating the script
Just do ctrl+F & search that text.
However, there is the step 2.
Step 2 - Creating the script
Just do ctrl+F & search that text.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
My computer doesn't find that.
The only Step two I see is right at the beginning and then the bit I was talking about but there is actually no step 2. So okay, there is no step two but... what do I have to do next then? The tutorial is very confusing.
The only Step two I see is right at the beginning and then the bit I was talking about but there is actually no step 2. So okay, there is no step two but... what do I have to do next then? The tutorial is very confusing.
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
I think its the same.
Step 1; CSS Knowledgeable (We should avoid that step & go directly to step 2-Creating the script)
You really don't see that text?
Step 1; CSS Knowledgeable (We should avoid that step & go directly to step 2-Creating the script)
You really don't see that text?
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
No.
This is what I see:
Step 1; CSS Knowledgeable
Spoiler:
Part 3:
This is what I see:
Step 1; CSS Knowledgeable
Spoiler:
Part 3:
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
Weird, should i edit that post & get the whole code out of there & post it here for you?
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
Would you mind? if you do then thanks!
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
- Code:
[table cellspacing=0 style="border: 1px solid #007295; table-layout:fixed; width: 100%;"][tr][td width=152 height=100 style="background-image: url('http://i15.servimg.com/u/f15/11/95/92/91/fa1010.png'); background-repeat: no-repeat;"][/td][td style="background: url('http://i62.servimg.com/u/f62/09/02/12/09/repet10.png'); padding-bottom: 15px;"][center][size=20][color=#1675BC][b]Add multi-themes to your forum[/b][/color][/size][/center][/td][td style="background-image: url('http://i15.servimg.com/u/f15/11/95/92/91/09610110.jpg'); background-repeat: no-repeat;" width="84"][/td][/tr][/table][table cellspacing=0 style="border-left: 1px solid #007295; border-right: 1px solid #007295; border-bottom: 1px solid #007295; table-layout:fixed; width: 100%;"][tr][td style="padding: 5px; background-color: #F7F7F7;"]
[table border="1"][tr][td] [img]http://i64.servimg.com/u/f64/12/84/54/56/exclam12.png[/img][/td][td] 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
[hr]
[color=brown][b]Warning: CSS Users:[/b][/color] If you have good knowledge of CSS it is advised that you use your stylesheets
[color=red][b]Warning: Hitskin users:[/b][/color] 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.
[hr]
We also need a word or note pad document open
[/td][/tr][/table]
This is a 3 step tutorial. - [i]What are they?[/i]
The implementation of this is in three steps:
[center][i][b]Step 1[/b][/i]- Prepare our style sheets ( 2 levels )
[i][b]Step 2[/b][/i] - Create our script
[i][b]Step 3[/b][/i] - Insert the selector on the forum
[/center]
[b]Step 1 - Preparing the skins were going to use - [/b] (Non-CSS knowledgable)
[b]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.[/b]
Lets quickly open a new tab in your browser and load [url=http://hitksin.com]http://hitskin.com[/url]
Now, select 3 skins from hitskin that you wish to use that is on the same version as you have [i]I'm using PunBB for this tutorial but adjust to your version[/i]
=> 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 [url=http://demo.nicetheme.com/index.htm?theme_id=153102]Twilightsaga-4ever.com by iwkzy[/url]
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 [b][color=red]153102[/b][/color]
[img]http://i67.servimg.com/u/f67/14/67/90/19/110.png[/img]
Now, grab the CSS Code by adding in a css grabber [i]-ltr.css[/i] .
Now we configure the theme by this way [i]/153102-ltr.css[/i]
Now were ready to configure this to our forum
[code]http://address_of_your_forum/153102-ltr.css[/code]
[color=red][b]/! Important: [/b][/color]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 [u]avoid spaces in the name[/u]
[b][i]Note:[/b][/i] It is not necessary to replicate a complete CSS Stylesheet, as long as you do not disable the css base of your forum.
[i][u]Example[/i][/u]
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;
}[/code]
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;
}[/code]
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.
[/spoiler]
[hide]
[b]Step 2 - Creating the script[/b]
[i]Caution: Follow this carefully, it is broken down into 4 steps[/i]
Sub-Step 1: Create the HTML Page
Admin panel >> Modules > HTML page management > Create new
Step 1: Name the HTML Page to your discretion
Both of the below options must be set to [u]no[/u]
Copy and paste this code into the blank HTML Page space
[i]Take DUE note that this script is broken up into 3 parts for ease of use![/i]
[code]var type = getCookie('template1');
var temsel = document.getElementById('temsel');
temsel.innerHTML ='<select onchange="changeskin(this.options[this.selectedIndex].value);window.location.reload();"><option> Choose your theme </option><option value="valeur1"> Name of theme & creater 1</option><option value="valeur2">Name of theme & creater 2 </option><option value="valeur3"> Name of theme & creater 3 </option></select>';
if (type == 'valeur1')
{
document.write('<link rel="stylesheet" type="text/css" href="URL_OF_YOUR_FORUM/IDNUMBER-ltr.css">');
}
else if (type == 'valeur2')
{
document.write('<link rel="stylesheet" type="text/css" href="URL_OF_YOUR_FORUM/_IDNUMBER-ltr.css">');
}
else if (type == 'valeur3')
{
document.write('<link rel="stylesheet" type="text/css" href="URL_OF_YOUR_FORUM/IDNUMBER-ltr.css">');
}
function changeskin(change) {
var scheme = change;
var name = 'template1';
var pathname = location.pathname;
//var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
var ExpDate = new Date ();
ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
setCookie(name,scheme,ExpDate,'/');
}
function getCookie(name){
var cname = name + "=";
var dc = document·cookie; if (dc.length > 0) { begin = dc.indexOf(cname); if (begin != -1) { begin += cname.length; end = dc.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin, end)); } } return null; } function setCookie(name, value, expires, path, domain, secure) { document·cookie = name + "=" + escape(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + ((secure == null) ? "" : "; secure"); } [/code]
Part 1:
[img]http://i83.servimg.com/u/f83/14/13/54/94/partie12.png[/img]
:idea: IMPORTANT: This portion of code should not have line breaks from the third line. Do not "enter" in this part.
Check that everything is back on line due to lack of space that splits the sentence and not one space too.
The only part where you can insert spaces is that the names of themes between
[code]
<option> and </option>
[/code]
:!: A line break will cause the disappearance of the selector on your forum. :!:
Part 2:
[img]http://img190.imageshack.us/img190/3011/partie2s.png[/img]
[/hide]
Part 3:
[img]http://img197.imageshack.us/img197/549/imagepartie3.png[/img]
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
[i]Reminder: We can only edit section 1 and 2 of the script ;) [/i]
[list][*]Lets change the text displayed for the theme.
[code]<option> Choose your theme </option>[/code]
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>[/code]
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">');
}[/code]
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.
[b][color=brown]Other than these 2 parts, do not edit anything else![/color][/b]
[size=20]Adding additional options[/size]
This is step 2.3.
In part 1 of the code, locate the last end code
[code]</option> and </select>[/code]
and insert the code
[code]<option value="valeur4"> Theme name & creator </option>[/code]
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">');
}[/code]
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.
[size=20] Removing an option[/size]
Simple, we remove the code from both sections 1 & 2
In section 1 remove
[code]<option value="valeur3"> Nom du thème 3 </option>[/code]
In section 2 remove
[code]else if (type == 'valeur3')
{
document.write('<link rel="stylesheet" type="text/css" href="adresse_of_theme_3">');
}[/code]
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 :D
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.
[u]PunBB & PHPBB2 Versions[/u]
[u]PHPBB2[/u]
Lets head to our templates
Admin panel >> Display > templates/overall_header_new
Hit the corresponding [img]http://forum.forumactif.com/users/2413/10/00/00/smiles/49380.png[/img] 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>[/code]
In between the two codes
[code]<span class="gen">{SITE_DEscriptION}</span>[/code]
and [code]</td>[/code]
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>[/code]
[u]Now save and publish.[/u]
[u]PunBB Version[/u]
Lets head to our templates
Admin panel >> Display > templates/overall_header_new
Hit the corresponding [img]http://forum.forumactif.com/users/2413/10/00/00/smiles/49380.png[/img] 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>[/code]
After the 2nd [code]</div>[/code] 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>[/code]
[u]Now save and publish.[/u]
[u]For both versions phpbb3 and Invision[/u]
Simply insert the code located below into the [i]Site description[/i]
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>[/code]
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.
[center]Now, you have your very own multi-themed forum :cheers: [/center]
[size=9]Thanks to Irina of the French Support Forum for the permission to translate this tutorial.
And To Typlo for getting the permission & posting this.[/size]
[/list]
[/td][/tr][/table][table cellspacing=0 style="border-left: 1px solid #007295; border-right: 1px solid #007295; border-bottom: 1px solid #007295; table-layout:fixed; width: 100%;"][tr][td style="text-align: justify; background: #f7f7f7; padding-left: 5px;"][color=#0372BE][size=10]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.[/size][/color][/td][td width=140 height=100 style="background: url('http://i82.servimg.com/u/f82/09/02/12/09/helpmo10.png');"][/td][/tr][/table]
Well try understanding, it might be too confusing.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
Thanks, will try it out later. How weird I cannot see it?!
Please do not close it yet, I might want to ask something.
Please do not close it yet, I might want to ask something.
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
Hello (:
If that not works, use the on in webartzforum (: its easier
If that not works, use the on in webartzforum (: its easier
Guest- Guest
Re: Question about multi themed forums
Gangstar, can you post or pm me the link of the thing you're talking about?
Anyways, I tried to do it and this is what came out:
What am I doing wrong? How can I make the code disappear? And yeah it doesn't show up on the forum either. Where is it supposed to appear?
Anyways, I tried to do it and this is what came out:
What am I doing wrong? How can I make the code disappear? And yeah it doesn't show up on the forum either. Where is it supposed to appear?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
Hi rhe,
He is talking about this tutorial
http://www.webartzforum.com/tutorials-f7/forumotion-theme-changer-t301-120.htm
He is talking about this tutorial
http://www.webartzforum.com/tutorials-f7/forumotion-theme-changer-t301-120.htm
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
Thanks, Sanket.
One more question though , do I put the two codes off the page in the html page or just one fo them?
One more question though , do I put the two codes off the page in the html page or just one fo them?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
The code from the dynamic drive goes into the html page. Isn't that what you were asking?
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
Yeah but which one of them?
There s the step on thing and then the step two thing.
There s the step on thing and then the step two thing.
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
The one in step 1 goes into the html page.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
And what do I do with the second code?
I m sorry but I just don t understand all that code business.
Plus, on the webartzforum they say, "Now you need to attach stylesheets. You can use the following code to link the stylesheets/themes." Where do I add the style sheets? To the html page or the template?
I m sorry but I just don t understand all that code business.
Plus, on the webartzforum they say, "Now you need to attach stylesheets. You can use the following code to link the stylesheets/themes." Where do I add the style sheets? To the html page or the template?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
Oh well. See, Do you have links to the skins on hitskin.com which you want on your forum?
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
Yes.
I have all that.
I have all that.
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
So that code goes in the homepage message.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
And just the html page link goes to the template?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
See if you are adding it to the template then add it there.
- Code:
<script src="HTML PAGE URL HERE" type="text/javascript"></script>
That code + the other code of attach stylesheets.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Question about multi themed forums
Note: The themes codes most be above the end of the head tag </head> or it will not work! (:
Guest- Guest
Re: Question about multi themed forums
What tags do I have to put the step one code off the dynamic drive into?
I dunno it just looks a mess, just a long code and that's all.
Okay, scrap that. Can someone please post a code that I can use, like a full ready code that I can put into my html page and a full ready code I can put into the template?
I can change the links of the themes myself.
Seriously I will just go mad if I have to work with that code any longer!
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
The code in the HTML page : http://www.dynamicdrive.com/dynamicindex9/styleswitch.js
The codes in the templates:
This must be above the </head> tag (:
And this one under the </head> tag, anywhere under <body>
The codes in the templates:
- Code:
<script src="HTML PAGE URL HERE" type="text/javascript"></script>
This must be above the </head> tag (:
- 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" />
And this one under the </head> tag, anywhere under <body>
- Code:
<form id="switchform">
<!-- Choose theme 1 -->
<input type="radio" name="choice" value="default" onClick="chooseStyle(this.value, 60)">Default Theme<br />
<!-- Choose theme 2 -->
<input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Theme 1 Name<br />
<!-- Choose theme 3 -->
<input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Theme 2 Name
</form>
Guest- Guest
Re: Question about multi themed forums
Oohh..thanks for that.
Well I got it working. Sort of.
When you change the theme it only looks different on the index. Once you go somewhere else it looks like the default theme. And when you go back to index it looks like the default.
1) How can I make the chosen theme to appear on all the pages and how do I make it stay in that theme?
2) And how can I change the looks of the secondary themes?
Well I got it working. Sort of.
When you change the theme it only looks different on the index. Once you go somewhere else it looks like the default theme. And when you go back to index it looks like the default.
1) How can I make the chosen theme to appear on all the pages and how do I make it stay in that theme?
2) And how can I change the looks of the secondary themes?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
Well, that's is a bug, so let's change it to a drop down menu (:
If you want to change the secondary theme you need to make a new forum and change the theme as you want
Plus every time you change the CSS you need to change it from the templates too e.g
if it was myforumname.com//50-ltr.css change the 50 to 51 (:
hope this helps, plus hope you understand (:
- Code:
<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="default" selected="selected">Default style</option>
<option value="theme1">theme1</option>
<option value="theme1">theme1</option>
</select>
</form>
If you want to change the secondary theme you need to make a new forum and change the theme as you want
Plus every time you change the CSS you need to change it from the templates too e.g
if it was myforumname.com//50-ltr.css change the 50 to 51 (:
hope this helps, plus hope you understand (:
Guest- Guest
Re: Question about multi themed forums
Where can I get the link/code of the theme that I've changed?
Like, if I was to create new forums and change the themes then where can I get the code of those themes?
And just in case: where do I have to put that code now?
And how can I make the chosen theme to stay intact?
Like, if I was to create new forums and change the themes then where can I get the code of those themes?
And how can I make the chosen theme to stay intact?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Question about multi themed forums
Right Click or CTRL + U to view the source (:
Search for CSS there you will find you CSS link (:
e.g : 50-ltr.css
Search for CSS there you will find you CSS link (:
e.g : 50-ltr.css
Guest- Guest
Re: Question about multi themed forums
Okay but do you know how I can get it to work properly?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Page 1 of 3 • 1, 2, 3
Similar topics
» Multi Forums question
» Multi Forums In One Question
» Question about forum permissions in multi forums in one
» Question about forum permissions in multi forums in one 2
» Multi Themed Forum
» Multi Forums In One Question
» Question about forum permissions in multi forums in one
» Question about forum permissions in multi forums in one 2
» Multi Themed Forum
Page 1 of 3
Permissions in this forum:
You cannot reply to topics in this forum