WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Forumotion Theme Changer!

Go to page : Previous  1, 2, 3, 4, 5, 6, 7  Next

View previous topic View next topic Go down  Message [Page 6 of 7]

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

ankillien

ankillien
Administrator
Administrator
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 Wink 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">

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

    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 Very Happy

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

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

ankillien


Administrator
Administrator
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

127Accespted Re: Forumotion Theme Changer! Wed Oct 06, 2010 9:36 am

vi3tkid277


Registered Member
Registered Member
ohthanks. i thought using the headers and footers would be a good thing so i changed it. shoulda left it at no Razz
so there's no way to change the icons to the different pictures using this method right.

128Accespted Re: Forumotion Theme Changer! Wed Oct 06, 2010 10:40 am

ankillien

ankillien
Administrator
Administrator
This script changes the CSS only while the icons are added by HTML so there is no way to change them.

Glad that I could help Smile

129Accespted Re: Forumotion Theme Changer! Sun Oct 10, 2010 5:35 pm

verrell123

verrell123
Registered Member
Registered Member
Kratos wrote:I have got a much simpler code for this one
Can you tell us?

http://www.freshartz.co.cc/

130Accespted Re: Forumotion Theme Changer! Sat Oct 16, 2010 6:52 pm

Guest


Guest
Amazing! tutorial anki! All the best

131Accespted Re: Forumotion Theme Changer! Sun Nov 28, 2010 4:12 pm

Emilio

Emilio
Registered Member
Registered Member
is there a way to add your own skins without hitskin?

http://www.graphilicious.forumotion.Com

132Accespted Re: Forumotion Theme Changer! Sun Nov 28, 2010 6:48 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
You can make your own stylesheet on another host (fx. bravenet) and use that.

The theme changer is actually a script which switch between two stylesheets. Smile



Last edited by Unknown Data on Sun Nov 28, 2010 9:04 pm; edited 1 time in total

http://woops.dk

133Accespted Re: Forumotion Theme Changer! Sun Nov 28, 2010 8:47 pm

Guest


Guest
I use webs for that Wink

134Accespted Re: Forumotion Theme Changer! Thu Dec 16, 2010 2:19 pm

jnnfrmchll


Registered Member
Registered Member
Forum Search Engine to set the search keywords found [b] The title suggests [/ b].

When you do your research, use help, urgent, the problem, SOS or application as keywords to search for topics the problem / issue?

Absolutely not! So this is why it is important to use headers [b] of the problem / issue [/ b]. This makes the search much easier for visitors to use a search engine to get an answer to your question.

Thank you for your understanding.

http://www.xigmapro.com

135Accespted Re: Forumotion Theme Changer! Thu Dec 30, 2010 1:16 am

Guest


Guest
Spam bot!

136Accespted Re: Forumotion Theme Changer! Sat Mar 05, 2011 8:43 am

PlatinumWata

PlatinumWata
Registered Member
Registered Member
Does this work for the version Phpbb3?

137Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 4:05 pm

GDoe5


Registered Member
Registered Member
Hello <3
I'm quite young, so... I'm not sure I understand some of it. However, my members/future-members would like theme changing, so I'm giving it a shot.
<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" />
Okay, so, that bit? How do I get MY CSS style sheet's there? I don't want certain themes, I just want to make my current theme have different colors. I know how to do that, I know how CSS sheet's work, but how do I, in effect, 'upload' them to my website?... Or the variation xD

138Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:32 pm

Sanket

Sanket
Administrator
Administrator
Upload the stylesheets to your host. Like bravenet.com or something.

http://www.webartzforum.com

139Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:35 pm

GDoe5


Registered Member
Registered Member
My host? x3...
Mk.

140Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:41 pm

Sanket

Sanket
Administrator
Administrator
Sure, so you can go ahead & host the files there.

http://www.webartzforum.com

141Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:41 pm

GDoe5


Registered Member
Registered Member
I don't have a host. ._.;
I'm not sure what you mean, at least. /stupid

142Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:43 pm

Sanket

Sanket
Administrator
Administrator
Okay so do you have the complete stylesheets changed for three versions? Have it saved in what a text file?

http://www.webartzforum.com

143Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:44 pm

GDoe5


Registered Member
Registered Member
No, but I will. Soon. >.>;

144Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:48 pm

Sanket

Sanket
Administrator
Administrator
So first you need to add the complete css in a txt file via notepad. Then Save that file with the extension .css
That should be your css file.

Now upload this css file, by making an account on bravenet.com

http://www.webartzforum.com

145Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:49 pm

GDoe5


Registered Member
Registered Member
I made an account on bravenet.com; where do I go to upload it?

146Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:52 pm

Sanket

Sanket
Administrator
Administrator
Website tab.
THen click on build a new website.
Fill in the details.
Then inside this website which you created, there will be a option of file manager. Upload the css files there.
Once uploaded, you can get the direct links to these files by right clicking & hit Copy Link Location.

http://www.webartzforum.com

147Accespted Re: Forumotion Theme Changer! Mon Apr 25, 2011 6:53 pm

GDoe5


Registered Member
Registered Member
Awesome. Thanks so much~ ^^

148Accespted Re: Forumotion Theme Changer! Wed Jul 20, 2011 10:48 am

Papier


Registered Member
Registered Member
Thank you so much for this!
I can get the dropdown menu to work, but none of the themes change.
My url is: paperpen.forummotion.com

Is there something I'm doing wrong?

149Accespted Re: Forumotion Theme Changer! Wed Jul 20, 2011 10:53 am

Sanket

Sanket
Administrator
Administrator
Whats the code you used for the drop down box?

http://www.webartzforum.com

150Accespted Re: Forumotion Theme Changer! Wed Jul 20, 2011 11:04 am

Papier


Registered Member
Registered Member
This one:
Code:
<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="default" selected="selected">Bunnies</option>
<option value="theme1">Oranges</option>
<option value="theme2">Dark Black</option>
<option value="theme3">Arrow</option>
<option value="theme4">Nature</option>
<option value="theme5">Sky Blue</option>
<option value="theme6">Green</option>
</select>
</form>

151Accespted Re: Forumotion Theme Changer! Wed Jul 20, 2011 7:35 pm

Sanket

Sanket
Administrator
Administrator
That is not the code thats posted in the tutorial. Can you try to use a similar code posted in the tutorial.

http://www.webartzforum.com

Sponsored content


View previous topic View next topic Back to top  Message [Page 6 of 7]

Go to page : Previous  1, 2, 3, 4, 5, 6, 7  Next

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Forumotion Theme Changer!

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