The forum of the forums
Welcome to the Official Support Forum of Forumotion!

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've not yet.



Create a free forum like this one.

Question about multi themed forums

Page 1 of 3 1, 2, 3  Next

View previous topic View next topic Go down

Question about multi themed forums

Post by Diana on October 18th 2010, 1:42 pm

http://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?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 18th 2010, 1:47 pm

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.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 18th 2010, 1:54 pm

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.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 18th 2010, 1:56 pm

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? scratch

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 18th 2010, 2:02 pm

No.
This is what I see:
Step 1; CSS Knowledgeable
Spoiler:
Part 3:

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 18th 2010, 2:17 pm

Weird, should i edit that post & get the whole code out of there & post it here for you?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 18th 2010, 2:26 pm

Would you mind? if you do then thanks! Smile

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 18th 2010, 2:31 pm

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

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 18th 2010, 2:43 pm

Thanks, will try it out later. How weird I cannot see it?!
Please do not close it yet, I might want to ask something.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Guest on October 18th 2010, 2:46 pm

Hello (:

If that not works, use the on in webartzforum (: its easier Wink

Guest
Guest


Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 19th 2010, 11:09 am

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?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 19th 2010, 11:13 am


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 19th 2010, 11:33 am

Thanks, Sanket.
One more question though Smile, do I put the two codes off the page in the html page or just one fo them?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 19th 2010, 11:36 am

The code from the dynamic drive goes into the html page. Isn't that what you were asking?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 19th 2010, 11:37 am

Yeah but which one of them?
There s the step on thing and then the step two thing.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 19th 2010, 11:39 am

The one in step 1 goes into the html page.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 19th 2010, 11:43 am

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?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 19th 2010, 11:48 am

Oh well. See, Do you have links to the skins on hitskin.com which you want on your forum?


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 19th 2010, 12:01 pm

Yes.
I have all that.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 19th 2010, 12:03 pm

So that code goes in the homepage message.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 19th 2010, 12:05 pm

And just the html page link goes to the template?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Sanket on October 19th 2010, 12:10 pm



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

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Question about multi themed forums

Post by Guest on October 19th 2010, 1:05 pm

Note: The themes codes most be above the end of the head tag </head> or it will not work! (:

Guest
Guest


Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 19th 2010, 3:03 pm

Okay, this thing seems like a totally impossible thing to do!

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. Crying or Very sad


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! Confused

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Guest on October 19th 2010, 3:27 pm

The code in the HTML page : http://www.dynamicdrive.com/dynamicindex9/styleswitch.js

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


Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 19th 2010, 6:01 pm

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?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Guest on October 19th 2010, 6:06 pm

Well, that's is a bug, so let's change it to a drop down menu (:

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 Wink

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


Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 19th 2010, 8:34 pm

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?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: Question about multi themed forums

Post by Guest on October 19th 2010, 9:43 pm

Right Click or CTRL + U to view the source (:
Search for CSS there you will find you CSS link (:
e.g : 50-ltr.css

Guest
Guest


Back to top Go down

Re: Question about multi themed forums

Post by Diana on October 20th 2010, 12:07 am

Okay but do you know how I can get it to work properly?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Page 1 of 3 1, 2, 3  Next

View previous topic View next topic Back to top


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