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

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

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

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

ankillien

avatar
Administrator
Administrator
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:
To know the URL of the style sheet....
  • Visit hitskin.com and find a theme that you want to add.
  • VIsit the demo page of that theme.
  • In the address bar number of the theme appears:

  • You get the address of the CSS of this theme with this figure, this way:
    Code:
    /131817-ltr.css
  • So, this becomes the URL of the style sheet
    Code:
    your_forum_address/131817-ltr.css

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

2Accespted Re: Forumotion Theme Changer! on Thu Feb 04, 2010 8:08 pm

Kratos

avatar
Registered Member
Registered Member
I have got a much simpler code for this one

3Accespted Re: Forumotion Theme Changer! on Thu Feb 04, 2010 8:26 pm

Sanket

avatar
Administrator
Administrator
Black Cat XIII wrote:I have got a much simpler code for this one
You could surely post it in the tutorials proposals section. Once tested, it will be moved to the accepted tutorials section Wink

http://www.webartzforum.com

4Accespted Re: Forumotion Theme Changer! on Fri Feb 05, 2010 1:59 am

Dreamly

avatar
Registered Member
Registered Member
Nice tut, thanks anki!

http://www.sparkchat.net

5Accespted Re: Forumotion Theme Changer! on Fri Feb 05, 2010 11:51 am

ankillien

avatar
Administrator
Administrator
Glad you found it helpful Dream Very Happy

6Accespted Re: Forumotion Theme Changer! on Sat Feb 06, 2010 12:50 am

Matti

avatar
Registered Member
Registered Member
Nice tutorial and btw where do I put those codes cuz I'm not good at Html / JavaScript

http://csshelp.forumotion.net/

7Accespted Re: Forumotion Theme Changer! on Sat Feb 06, 2010 12:55 am

Sanket

avatar
Administrator
Administrator
Which code are you talking about? Can you tell me where you are stuck?

Remember this changes the looks & colors only & not the images.

Also, you need only phpbb2 css styles.

http://www.webartzforum.com

8Accespted Re: Forumotion Theme Changer! on Sun Feb 07, 2010 5:12 am

jshushij

avatar
Registered Member
Registered Member
Dreamlimix wrote:Nice tut, thanks anki!

9Accespted Re: Forumotion Theme Changer! on Sun Feb 07, 2010 7:03 pm

Matti

avatar
Registered Member
Registered Member
Sanket wrote:Which code are you talking about? Can you tell me where you are stuck?

Remember this changes the looks & colors only & not the images.

Also, you need only phpbb2 css styles.

I use phpbb3 so it doesn't work for it.

http://csshelp.forumotion.net/

10Accespted Re: Forumotion Theme Changer! on Sun Feb 07, 2010 7:14 pm

ankillien

avatar
Administrator
Administrator
This tutorial requires template editing so it won't work with phpBB3 or Invision. Sorry.

11Accespted Re: Forumotion Theme Changer! on Sun Feb 07, 2010 7:18 pm

ze_chaofan

avatar
Registered Member
Registered Member
ankillien wrote:This tutorial requires template editing so it won't work with phpBB3 or Invision. Sorry.
I'm probably wrong, but, I think this is possible by using forum's description, isn't it ?

http://www.sos-forum.com/

12Accespted Re: Forumotion Theme Changer! on Sun Feb 07, 2010 7:38 pm

ankillien

avatar
Administrator
Administrator
Yes, it is. But forum description can contain very limited text so we can't add all stylesheet codes there. Thats the only limitation.

There is a trick to make the forum description contain as many text as we want. I'll try it and then post the tutorial here Smile

13Accespted Re: Forumotion Theme Changer! on Sat Feb 13, 2010 12:08 am

improviser


Registered Member
Registered Member
Or make several temporary themes, make a drop-list with links to those themes, by adding
?change_temp=1 to your forum.htm link

so its like www.yourforumotionforum.com/forum.htm?change_temp=1 and change 1 with 2 and 3, in case how many themes you have made in temporary theme management. Works as a charm.

14Accespted Re: Forumotion Theme Changer! on Sat Feb 13, 2010 12:09 am

Sanket

avatar
Administrator
Administrator
I think i have seen the one which you are talking about. It refreshes the page then, correct?

http://www.webartzforum.com

15Accespted Re: Forumotion Theme Changer! on Sat Feb 13, 2010 12:11 am

improviser


Registered Member
Registered Member
Yes, it refreshes the page with the new themes, and to every link you go it adds ?change_temp=1 , and thats the main issue with it... when you give someone a link, he'll view it in your theme... so its not perfect, but still.. Very Happy

16Accespted Re: Forumotion Theme Changer! on Sat Feb 13, 2010 12:13 am

Sanket

avatar
Administrator
Administrator
Yes, the tutorial here just changes the css. Not the images etc, but it does not require a refresh. Well something is better than nothing. Wink

http://www.webartzforum.com

17Accespted Re: Forumotion Theme Changer! on Sat Feb 13, 2010 12:15 am

improviser


Registered Member
Registered Member
Yes I agree... Its really useful for simple designed forums that only use CSS for its design, and probably a transparent logo for header...

18Accespted Re: Forumotion Theme Changer! on Sat Feb 13, 2010 12:16 am

ankillien

avatar
Administrator
Administrator
improviser wrote:Yes, it refreshes the page with the new themes, and to every link you go it adds ?change_temp=1 , and thats the main issue with it... when you give someone a link, he'll view it in your theme... so its not perfect, but still.. Very Happy

Its a nice method but can't be helpful on Forumotion.
It can surely do good in a PHP powered site Very Happy

19Accespted Re: Forumotion Theme Changer! on Sat Feb 13, 2010 12:19 am

improviser


Registered Member
Registered Member
ankillien wrote:
improviser wrote:Yes, it refreshes the page with the new themes, and to every link you go it adds ?change_temp=1 , and thats the main issue with it... when you give someone a link, he'll view it in your theme... so its not perfect, but still.. Very Happy

Its a nice method but can't be helpful on Forumotion.
It can surely do good in a PHP powered site Very Happy

Yes... for sure... If forumotion made web FTP, like some non-free hosting companies have it would be just a boom to the market. You could edit EVERYTHING regarding your forum, I think that nobody would use other services (of course except the companies, users that need high bandwidth/storage or something similar).

20Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 2:00 am

pimentel2


"Suggest a Contest" Contest Winner

I can't get it to work Sad Anything I could've done wrong?

21Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 2:07 am

Sanket

avatar
Administrator
Administrator
Can you tell us till what step have you reached?

http://www.webartzforum.com

22Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 2:11 am

pimentel2


"Suggest a Contest" Contest Winner

I got the radio button switch to work but when i select one it doesn't do anything.

23Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 2:12 am

Sanket

avatar
Administrator
Administrator
Okay lets go one by one.
Whats the forum address?

Links to the css you uploaded?

http://www.webartzforum.com

24Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 2:20 am

pimentel2


"Suggest a Contest" Contest Winner

I removed the changes after it didn't work. I'll link you when I redo it.

25Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 2:21 am

Sanket

avatar
Administrator
Administrator
Sure, let me know.

http://www.webartzforum.com

Sponsored content


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

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

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