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

View previous topic View next topic Go down  Message [Page 7 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

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

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

152Accespted Re: Forumotion Theme Changer! Thu Jul 21, 2011 3:26 am

Papier


Registered Member
Registered Member
I replaced the code for a dropdown menu to the one with buttons as shown in the tutorial.
Here's the section I put it in:
Code:
<link rel="alternate stylesheet" type="text/css" media="screen" title="default" href="paperpen.forummotion.com/175211-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="paperpen.forummotion.com/142195-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="paperpen.forummotion.com/124611-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme3" href="paperpen.forummotion.com/106397-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme4" href="paperpen.forummotion.com/174569-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme5" href="paperpen.forummotion.com/152504-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme6"
href="paperpen.forummotion.com/162654-ltr.css" />

<script src="http://paperpen.forummotion.com/h1-theme-changer" 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">

<!-- Choose theme 1 -->
<input type="radio" name="choice" value="default" onClick="chooseStyle(this.value, 60)">Bunnies<br />

<!-- Choose theme 2 -->
<input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Oranges<br />

<!-- Choose theme 3 -->
<input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Dark Black<br />

<!-- Choose theme 4 -->
<input type="radio" name="choice" value="theme3" onClick="chooseStyle(this.value, 60)">Arrow<br />

<!-- Choose theme 5 -->
<input type="radio" name="choice" value="theme4" onClick="chooseStyle(this.value, 60)">Nature<br />

<!-- Choose theme 6 -->
<input type="radio" name="choice" value="theme5" onClick="chooseStyle(this.value, 60)">Sky Blue<br />

<!-- Choose theme 7 -->
<input type="radio" name="choice" value="theme6" onClick="chooseStyle(this.value, 60)">Green<br />
</form>



   <!-- BEGIN hitskin_preview -->

Nothing is changing still.
There were a few things that didn't go exactly to the tutorial though.

In the General Template section, I couldn't find overall_header_new, so I used overall_header

There wasn't a <body> tag, so I put the second part right after the <body background...>

Is there anything I can fix?

153Accespted Re: Forumotion Theme Changer! Wed Aug 31, 2011 4:30 am

Tulat


Registered Member
Registered Member
I've been having the exact same truble as Papier's above post.
It shows the radio button on the top left of my site, but it doesin't change when i click them.

Site i made to try and get this to work is... tulatgrounds . forumotion . com/
Also, i made an account just now simply to ask about this.

Thanks.

154Accespted Re: Forumotion Theme Changer! Wed Aug 31, 2011 8:46 am

ankillien

ankillien
Administrator
Administrator
Tulat wrote:I've been having the exact same truble as Papier's above post.
It shows the radio button on the top left of my site, but it doesin't change when i click them.

Site i made to try and get this to work is... tulatgrounds . forumotion . com/
Also, i made an account just now simply to ask about this.

Thanks.

Hi,
Welcome to WebArtz Smile

I just noticed on your forum that the <script...> tag is not having correct value for src. It looks like :

<script src="http://tulatgrounds.forumotion.com/" type="text/javascript"></script>

..while actually you should replace the bolded part with link to the HTML page where you have added the javascript taken from DynamicDrive.com.

Hope it makes sense.

155Accespted Re: Forumotion Theme Changer! Sat Sep 03, 2011 8:28 pm

Matti

Matti
Registered Member
Registered Member
can i see a example?

http://csshelp.forumotion.net/

156Accespted Re: Forumotion Theme Changer! Sat Sep 03, 2011 9:53 pm

ankillien

ankillien
Administrator
Administrator
Maki wrote:can i see a example?

Example of theme changer?
We have not set any example for it. You can try it on a test forum, if you want to see it in action.

157Accespted Re: Forumotion Theme Changer! Sat Sep 10, 2011 9:40 pm

Matti

Matti
Registered Member
Registered Member
ankillien, can you post the JavaScript code here cuz i don't know witch code i need to make that.

http://csshelp.forumotion.net/

158Accespted Re: Forumotion Theme Changer! Mon Sep 12, 2011 4:03 am

Born This Way

Born This Way
Registered Member
Registered Member
Now, on forumotion you can make external javascript files, so go to AP->Modules->HTML & JAVASCRIPT->Javascript codes management and make new javascript, select In all pages and copy&paste this javascript:

http://www.dynamicdrive.com/dynamicindex9/styleswitch.js

159Accespted Re: Forumotion Theme Changer! Wed Oct 12, 2011 11:30 pm

Tulat


Registered Member
Registered Member
I've been extremely busy due to college and such and forgot about this place after I said I was having trouble.
After I edited what you said, the problem was fixed.
But on to a new problem. :]

I don't know where the css for my skin that I edited is, nor do I know how to download it.
My clan site is devine-knights.forumotion.com
I was only using the site I had posted earlier for testing purposes.

If possible, I would love to know how to find my CSS and how to upload it.
I tried Bravenet, and I can't really figure it out either, but I have no css code in the first place.

Thanks.

160Accespted Re: Forumotion Theme Changer! Thu Oct 13, 2011 8:37 am

ankillien

ankillien
Administrator
Administrator
What you put in href inside the <link> tag is your CSS file. You can follow that URL and download it.

161Accespted Re: Forumotion Theme Changer! Thu Oct 13, 2011 10:19 am

Tulat


Registered Member
Registered Member
Are you talking about the hitskin demo templates?
If you are, I was asking how I could find the css file for my site's current skin.
I've edited it and changed it myself, so it's not even close to any of the hitskin demos i've seen.

But if you are talking about a way to find my site's css from the site that I edited, then i'm lost.

162Accespted Re: Forumotion Theme Changer! Thu Oct 13, 2011 1:53 pm

ankillien

ankillien
Administrator
Administrator
Your site's current CSS file can be located at : http://devine-knights.forumotion.com/css.forum

163Accespted Re: Forumotion Theme Changer! Fri Oct 14, 2011 4:00 am

Tulat


Registered Member
Registered Member
Thanks, I saved the css as a .css file in notepad now.
But.. when I go to bravenet.com and try to make a site with it so I can upload the .css, it says it costs money.
Is there a way to bypass having to pay to upload a css?

Sorry to keep bothering you, i'm rather helpless when it comes to uploading a css file since i've never done it before.

164Accespted Re: Forumotion Theme Changer! Fri Oct 14, 2011 8:40 am

ankillien

ankillien
Administrator
Administrator
Tulat wrote:Thanks, I saved the css as a .css file in notepad now.
But.. when I go to bravenet.com and try to make a site with it so I can upload the .css, it says it costs money.
Is there a way to bypass having to pay to upload a css?

Sorry to keep bothering you, i'm rather helpless when it comes to uploading a css file since i've never done it before.

If Bravenet doesn't offer hosting for free, we can't do anything. You can try other free web hosts. Search google for free web hosting.

165Accespted Re: Forumotion Theme Changer! Sat Jan 14, 2012 3:24 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
hey man. could I use this on my forum please? I'll give you full credit. Smile

166Accespted Re: Forumotion Theme Changer! Sat Jan 14, 2012 3:33 am

RSguideMaker

RSguideMaker
Registered Member
Registered Member
Good ol' Ank wrote:
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.


Could I use this on my forum please Ank? I'll give you full credit.

167Accespted Re: Forumotion Theme Changer! Sat Jan 14, 2012 3:37 am

Sanket

Sanket
Administrator
Administrator
You mean to post the tutorial?

http://www.webartzforum.com

168Accespted Re: Forumotion Theme Changer! Sat Jan 14, 2012 2:56 pm

Yashraj


Registered Member
Registered Member
in Homepage or Announcements it will work.

169Accespted Re: Forumotion Theme Changer! Thu Jul 12, 2012 3:17 pm

Nathan Adhitya


Registered Member
Registered Member
Cool!

170Accespted web developer Mon Jul 30, 2012 2:09 pm

peterjohnsongwb


Registered Member
Registered Member
Thanx for these post. Ijust finding the way for the multiple theme on my forum. you gave me the idea of theme changing. Now i am going to implement this idea.

171Accespted Re: Forumotion Theme Changer! Mon Aug 06, 2012 9:15 pm

Reverse


Registered Member
Registered Member
Is there a way to do this for phpBB3?

http://www.graphiczone.forummotion.com

172Accespted Re: Forumotion Theme Changer! Mon Aug 06, 2012 9:42 pm

ankillien

ankillien
Administrator
Administrator
Reverse wrote:Is there a way to do this for phpBB3?

Yes, you can do it using jQuery if you know about the .append() method.

173Accespted Re: Forumotion Theme Changer! Mon Aug 06, 2012 9:49 pm

Reverse


Registered Member
Registered Member
oh okay.

http://www.graphiczone.forummotion.com

Sponsored content


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

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

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

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