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

Hello Visitor! | Sign In | Register
WebArtz - The Web Design Forum

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 7 of 9]

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

121Accepted Re: Forumotion Theme Changer! on Fri Aug 27, 2010 10:54 pm

acman


Registered Member
Registered Member
aahh it works after i change my default skin to default version..

thanks for the tip Smile

but where should i put the script if i want to put it as in this forum ?

122Accepted Re: Forumotion Theme Changer! on Fri Aug 27, 2010 11:12 pm

Guest


Guest
The best coder ever been on forumotion! All the best

123Accepted Re: Forumotion Theme Changer! on Sat Aug 28, 2010 7:22 am

ankillien


Administrator
Administrator
@acman,

Glad I could help buddy Very Happy

Here we are using completely different technique for the theme changer and we would not prefer to make it public, sorry.

@Nick,

I am not really the best Razz



Last edited by ankillien on Wed Sep 01, 2010 5:44 pm; edited 1 time in total

124Accepted Re: Forumotion Theme Changer! on Wed Sep 01, 2010 5:26 pm

C.noergaard


Registered Member
Registered Member
Cool very cool i will use that!

125Accepted Re: Forumotion Theme Changer! on Wed Oct 06, 2010 2:19 am

vi3tkid277


Registered Member
Registered Member
need>help. :d
selection not working.
can select from the dropdown menu but nothing happens.
mabi-hs.forumotion.net

126Accepted Re: Forumotion Theme Changer! on Wed Oct 06, 2010 7:27 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

127Accepted Re: Forumotion Theme Changer! on Wed Oct 06, 2010 8:06 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.

128Accepted Re: Forumotion Theme Changer! on Wed Oct 06, 2010 9:10 am

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

129Accepted Re: Forumotion Theme Changer! on Sun Oct 10, 2010 4:05 pm

verrell123


Registered Member
Registered Member
Kratos wrote:I have got a much simpler code for this one

Can you tell us?

http://liquidartz.forumid.net/

130Accepted Re: Forumotion Theme Changer! on Sat Oct 16, 2010 5:22 pm

Guest


Guest
Amazing! tutorial anki! All the best

131Accepted Re: Forumotion Theme Changer! on Sun Nov 28, 2010 2:42 pm

Emilio


Graphic Designer
Graphic Designer
is there a way to add your own skins without hitskin?


_________________

WEBARTZ
The Art of Web Designing

5 Graphic Request Solved










http://www.graphilicious.forumotion.Com

132Accepted Re: Forumotion Theme Changer! on Sun Nov 28, 2010 5:18 pm

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 7:34 pm; edited 1 time in total

133Accepted Re: Forumotion Theme Changer! on Sun Nov 28, 2010 7:17 pm

Guest


Guest
I use webs for that Wink

134Accepted Re: Forumotion Theme Changer! on Thu Dec 16, 2010 12:49 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

135Accepted Re: Forumotion Theme Changer! on Wed Dec 29, 2010 11:46 pm

Guest


Guest
Spam bot!

136Accepted Re: Forumotion Theme Changer! on Sat Mar 05, 2011 7:13 am

PlatinumWata


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

137Accepted Re: Forumotion Theme Changer! on Mon Apr 25, 2011 2:35 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

138Accepted Re: Forumotion Theme Changer! on Mon Apr 25, 2011 5:02 pm

Sanket


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

http://www.webartzforum.com

139Accepted Re: Forumotion Theme Changer! on Mon Apr 25, 2011 5:05 pm

GDoe5


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

140Accepted Re: Forumotion Theme Changer! on Mon Apr 25, 2011 5:11 pm

Sanket


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

http://www.webartzforum.com

141Accepted Re: Forumotion Theme Changer! on Mon Apr 25, 2011 5:11 pm

GDoe5


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

View previous topic View next topic Back to top  Message [Page 7 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

 
  •  

Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forums