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 : Previous  1, 2, 3, 4, 5, 6, 7  Next

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

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

ankillien

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


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

Sanket


Administrator
Administrator
Sure, let me know.

http://www.webartzforum.com

27Accespted Re: Forumotion Theme Changer! on Sun Feb 14, 2010 2:35 am

pimentel2


"Suggest a Contest" 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 7:39 am

Guest


Guest
thank you Smile
this is a awesome tutorial.

29Accespted Re: Forumotion Theme Changer! on Sat Feb 20, 2010 11:23 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 11:42 pm

ankillien

avatar
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 Sun Feb 21, 2010 12:04 am

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 Sun Feb 21, 2010 12:15 am

ankillien

avatar
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 11:10 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 11:28 pm

Sanket

avatar
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 8:51 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 11:52 am

Sanket

avatar
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 Wed Feb 24, 2010 1:00 am

Lexi


Registered Member
Registered Member
where do i attach style sheets ?

38Accespted Re: Forumotion Theme Changer! on Wed Feb 24, 2010 1:18 am

Sanket

avatar
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 Wed Feb 24, 2010 1:29 am

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 1:38 am

Sanket

avatar
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 11:00 pm

Guest


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

42Accespted Re: Forumotion Theme Changer! on Sat Feb 27, 2010 6:35 am

Josh

avatar
Registered Member
Registered Member
One question about inserting the actual stylesheets:
Will you have to create them from scratch, or can you link to Hitskin Themes that you've made as well?

Besides that, thanks for the tutorial. Really helpful! Smile

43Accespted Re: Forumotion Theme Changer! on Sat Feb 27, 2010 10:00 am

ankillien

avatar
Administrator
Administrator
@ Crysis992,
Have you uploaded the style sheets?

@Josh,
You don't need to create a style sheet from scratch every time. You can link it directly from Hitskin.com.

See the spoiler in the first post that explains how to link style sheets directly from Hitskin.

44Accespted Re: Forumotion Theme Changer! on Sat Feb 27, 2010 10:29 am

Josh

avatar
Registered Member
Registered Member
Ah, alright. Thanks! Smile

45Accespted Re: Forumotion Theme Changer! on Sat Feb 27, 2010 7:50 pm

Guest


Guest
yes i uploaded the stylesheets. But doesnt work :/
and i tried the direct linking from hitskin :/ both doesnt work in my phpbb2 forum. Work only in my PunBB forum Sad

46Accespted Re: Forumotion Theme Changer! on Sat Feb 27, 2010 9:37 pm

ankillien

avatar
Administrator
Administrator
Where have you put the codes?
Try putting it in your homepage message instead of the templates.

47Accespted Re: Forumotion Theme Changer! on Sat Feb 27, 2010 10:26 pm

Guest


Guest
i tried this too but doesnt work Sad

48Accespted Re: Forumotion Theme Changer! on Sat Feb 27, 2010 11:37 pm

ankillien

avatar
Administrator
Administrator
Can I have a link to the forum where you have installed the theme changer?

49Accespted Re: Forumotion Theme Changer! on Sat Feb 27, 2010 11:54 pm

Guest


Guest

50Accespted Re: Forumotion Theme Changer! on Sun Feb 28, 2010 12:04 am

ankillien

avatar
Administrator
Administrator
There is a bug in your code Wink

Notice that you have forgotten to add inverted coma sign at the end of the URL of the theme1 you added using the <link.../> tag.

Please correct it and see if it works then Very Happy

51Accespted Re: Forumotion Theme Changer! on Sun Feb 28, 2010 12:13 am

Guest


Guest
oh damn :/ i rly should see this myself lol
thank you very much Very Happy it work now.

,
crysis992

Sponsored content


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

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

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