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!

Goto page : Previous  1, 2, 3, 4, 5, 6, 7, 8, 9  Next

View previous topic View next topic Go down  Message [Page 2 of 9]

1Accespted Forumotion Theme Changer! on Tue Feb 02, 2010 6:47 pm

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:
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 7:08 pm; edited 2 times in total

21Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 12:30 am

pimentel2


Decorate Desktop Contest Winner
Decorate Desktop Contest Winner
I can't get it to work Sad Anything I could've done wrong?

22Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 12:37 am

Sanket


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

http://www.webartzforum.com

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

pimentel2


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

24Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 12:42 am

Sanket


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

Links to the css you uploaded?

http://www.webartzforum.com

25Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 12:50 am

pimentel2


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

26Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 12:51 am

Sanket


Administrator
Administrator
Sure, let me know.

http://www.webartzforum.com

27Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 1:05 am

pimentel2


Decorate Desktop Contest Winner
Decorate Desktop Contest Winner
Sanket wrote:Sure, let me know.


I'll try it again tomorrow. I have no patience atm.

28Accespted Re: Forumotion Theme Changer! on Tue Feb 16, 2010 6:09 am

crysis992


Registered Member
Registered Member
thank you Smile
this is a awesome tutorial.

http://www.hos-clan.co.uk

29Accespted Re: Forumotion Theme Changer! on Sat Feb 20, 2010 9:53 pm

scof


Registered Member
Registered Member
I have a problem..
You say:

Now you need to attach stylesheets Wink You can use the following code to link the stylesheets/themes.


Where can I find the Style Sheet URL? The url of the skin at hitskin.com? The url of theme's css? What exactly I have to Fill in there:
Code:
STYLE SHEET 1 URL HERE


Thank you in advance

30Accespted Re: Forumotion Theme Changer! on Sat Feb 20, 2010 10:12 pm

ankillien


Administrator
Administrator
Hi scof,

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



Hope that helps Very Happy

31Accespted Re: Forumotion Theme Changer! on Sat Feb 20, 2010 10:34 pm

scof


Registered Member
Registered Member
http://xfans.forumgreek.com/forum.htm

I have done this, but it doesnt change...

OK! I am almost done!

32Accespted Re: Forumotion Theme Changer! on Sat Feb 20, 2010 10:45 pm

ankillien


Administrator
Administrator
You haven't added URL of the default style sheet. Add it there and see if it works then.

33Accespted Re: Forumotion Theme Changer! on Sun Feb 21, 2010 9:40 pm

Lexi


Registered Member
Registered Member
haha im already stuck on step one!

btw THANK YOU FOR MAKING THIS!! Very Happy woooo! I am so excited it exists!

now, where you download the file what does this mean:

Download styleswitch.js (right click->select "Save As"), and upload it to a directory on your site.

what directory.......

34Accespted Re: Forumotion Theme Changer! on Sun Feb 21, 2010 9:58 pm

Sanket


Administrator
Administrator
Open the file using notepad. Copy the code & save it in a html page.

http://www.webartzforum.com

35Accespted Re: Forumotion Theme Changer! on Mon Feb 22, 2010 7:21 am

Lexi


Registered Member
Registered Member
ok so i click it and open the file in my computers notepad? save it to my computer and then put it in an html page?

so.....can someone give me a sn or pm through this whole process lol im terrible at this stuff *sighs*

36Accespted Re: Forumotion Theme Changer! on Mon Feb 22, 2010 10:22 am

Sanket


Administrator
Administrator
Nopes, save the file to your computer as .js

Then open notepad, click on open & then through that open the file downloaded.

It will show the code, paste the code in a html page then.

http://www.webartzforum.com

37Accespted Re: Forumotion Theme Changer! on Tue Feb 23, 2010 11:30 pm

Lexi


Registered Member
Registered Member
where do i attach style sheets ?

38Accespted Re: Forumotion Theme Changer! on Tue Feb 23, 2010 11:48 pm

Sanket


Administrator
Administrator
You will need to upload those stylesheets to a free webhost like... www.bravenet.com

http://www.webartzforum.com

39Accespted Re: Forumotion Theme Changer! on Tue Feb 23, 2010 11:59 pm

Lexi


Registered Member
Registered Member
what?!?! *cries* im a hopeless admin i cant even do this right....sigh

hey, i tried the tutorial and it didnt work....

i dont know how to do thiss!!!

this is what is in my general tutorials over header template before /html and /body

<script src="http://bewhoyouwanttob.forumotion.com/Theme-Changer-h3.htm" type="text/javascript"></script>
<link rel="alternate stylesheet" type="text/css" media="screen" title="default" href="150105-ltr.css" />

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

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

<link rel="alternate stylesheet" type="text/css' media="screen" title="theme3" href="101053-ltr.css" />

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

/body
/html

what did i do wrong!??!

40Accespted Re: Forumotion Theme Changer! on Wed Feb 24, 2010 12:08 am

Sanket


Administrator
Administrator
Don't add any codes to the template, first did you upload your different css styles to a webhost like bravenet.com ?

http://www.webartzforum.com

41Accespted Re: Forumotion Theme Changer! on Fri Feb 26, 2010 9:30 pm

crysis992


Registered Member
Registered Member
damn :/

doesnt work for me on my phpbb2 forum. It works without problems at my PunBB forum. But phpbb2 it doesnt change the style if i click at it.
Any idea how to solve this problem?

http://www.hos-clan.co.uk

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

Goto page : Previous  1, 2, 3, 4, 5, 6, 7, 8, 9  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