Tutorial: Forumotion Style Sheet Switcher v1 beta

This Hack Only work for phpbb2 or PunBB versions.
Go to >Display>Templates>General>Overall Footer

Now somewhere add the Theme switcher Button code below.

Code:


<form id="switchform">

<input value="none" name="choice" onclick="chooseStyle(this.value, 60)" type="radio"/>Default Theme<br/>

<input value="custom-theme-1" name="choice" onclick="chooseStyle(this.value, 60)" type="radio"/>Custom Theme 1
</form>


To add more themes you should add similar link href= tags for each of your stylesheet and add the button code for each of them..


Now just below find the following code
</body>

and replace it with:

Code:

<script src='http://templates.bloggerplugins.org/styled-denim/styleswitch.js' type='text/javascript'/>
</script>
<link href='[b]url of default.css[/b]' rel='stylesheet' type='text/css'/>

<link href='[b]url of custom.css[/b]' media='screen' rel='alternate stylesheet' title='custom-theme-1' type='text/css'/>
<script type='text/javascript'>

window.onload=function(){

var formref=document.getElementById("switchform");

indicateSelected(formref.choice);

}


</script>
</body>

(Dont Forget to replace url of default.css and custom.css with its actual urls.)
Read below


Create default style sheet a little complicated thing compared to the other hacks here..
To create your css
Go to >Display>Pictures and Colors>Colors>CSS Stylesheet
example:

Code:

body {background-color: #81a8c4;background-image: url("http://2img.net/i/fa/empty.gif");background-attachment: scroll;}* html {scrollbar-face-color: #;scrollbar-highlight-color: #;scrollbar-shadow-color: #;scrollbar-3dlight-color: #;scrollbar-arrow-color: #;scrollbar-track-color: #;scrollbar-darkshadow-color: #;}*+ html {scrollbar-face-color: #;scrollbar-highlight-color: #;scrollbar-shadow-color: #;scrollbar-3dlight-color: #;scrollbar-arrow-color: #;scrollbar-track-color: #;scrollbar-darkshadow-color: #;}th,td,p { font-family: Verdana,Arial,Helvetica,sans-serif }a img { border: none; }a:link,a:active,a:visited { color : #006699; }a:hover{ text-decoration: underline !important; color : #dd6900; }hr{ height: 0px; border: solid #e6e6e6 0px; border-top-width: 1px;}.bodyline{ background-color: #e6e6e6; border: 1px #dbd8d8 solid;}.bodylinewidth {width:90%}.forumline{ background-color: #88ccff; border: 2px #88ccff solid; }td.row1,td.row3.over:hover { background-color: #e6e6e6; }td.row2,td.row1.over:hover { background-color: #e6e6e6; }td.row3{ background-color: #e6e6e6; }td.rowpic {background-color: #dbd8d8;background-image: url("http://2img.net/i/fa/empty.gif");}th {color: #bfbfbf;font-size: 11px;font-weight : bold;background-color: #88ccff;height: 25px;background-image: url("http://2img.net/i/fa/empty.gif");padding: 2px

Copy everyhing to notepad....

Now your default style sheet is ready.Save this file as default.css


Now make another style sheet(change color..etc) and save it as custom.css.The great thing about this script is that you don't have to make a completely new stylesheet. You only have to define those rules that are different from the default stylesheet (although you can include all the options that are the same too if you want).

Similarly you can make as many style sheets as you want (say custom2.css,custom3.css etc).


Now upload all of your stylesheets somewhere(maybe google pages).

(Dont Forget to replace url of default.css and custom.css with its actual urls.)

The awesome javascript for this hack was developed by Dynamic Drive.

Tutorial much?

Post it Only Topic for Suggesting Tutorials

brb, mod move this

fooart, sorry it can't be moved.

You need to repost it again in the link darren provided.

Locked