Add multi-themes to my forum
+4
Raze
Diana
flyingfisch
Empire_1
8 posters
Page 1 of 1
Add multi-themes to my forum
Hello, I've read this tutorial https://help.forumotion.com/t71484-add-multi-themes-to-your-forum and I wish to add a another theme to my forum. However, I guess my knowledge is CSS isn't good enough because I don't comprehend half of the tutorial.
I was hoping that some really kind Forumotion staff member (who could possibly spare me 10 or 15 minutes) could go into my forum (I will give them an admin account) and make it for me. I have the multi-theme I want to add ready in my Temporary Themes. I will greatly appreciate it and I will be grateful for any help!!
I was hoping that some really kind Forumotion staff member (who could possibly spare me 10 or 15 minutes) could go into my forum (I will give them an admin account) and make it for me. I have the multi-theme I want to add ready in my Temporary Themes. I will greatly appreciate it and I will be grateful for any help!!
Empire_1- Active Poster
- Posts : 1391
Reputation : 125
Language : English, Spanish, Mandarin, C++
Location : Summoner's Rift
Re: Add multi-themes to my forum
flyingfisch wrote:Is the idea I gave here working for you?
No, I'm trying to do the harder way.
*bump*
Empire_1- Active Poster
- Posts : 1391
Reputation : 125
Language : English, Spanish, Mandarin, C++
Location : Summoner's Rift
Empire_1- Active Poster
- Posts : 1391
Reputation : 125
Language : English, Spanish, Mandarin, C++
Location : Summoner's Rift
Re: Add multi-themes to my forum
Um, I tried it and it didn't work. So I'd say don't bother going through the trouble cause... in the end I was told to work on the coding myself. "Very helpful"
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Add multi-themes to my forum
rhe wrote:Um, I tried it and it didn't work. So I'd say don't bother going through the trouble cause... in the end I was told to work on the coding myself. "Very helpful"
I've contacted Base, but he isn't really sure how to work it. I think there are a few people out there though, that could help us
Empire_1- Active Poster
- Posts : 1391
Reputation : 125
Language : English, Spanish, Mandarin, C++
Location : Summoner's Rift
Re: Add multi-themes to my forum
Few months ago I didn't get it the first time but then when I watch the video for a bit I figured it out.
So keep trying or do you want me to spare you a code saying where forum name goes and images?
So keep trying or do you want me to spare you a code saying where forum name goes and images?
Raze- Forumember
- Posts : 406
Reputation : 12
Language : English, HTML, CSS
Re: Add multi-themes to my forum
Can you provide the link to the video? And did you get the images to come over aswell?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Add multi-themes to my forum
Why don't someone suggest this and to have an easy setup for it.
!_NICK_!- Active Poster
- Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: Add multi-themes to my forum
Raze wrote:Few months ago I didn't get it the first time but then when I watch the video for a bit I figured it out.
So keep trying or do you want me to spare you a code saying where forum name goes and images?
Please please anyone give me a code (and/or tutorial) that is easier to use then the one Forumotion provided. Thanks!!
Empire_1- Active Poster
- Posts : 1391
Reputation : 125
Language : English, Spanish, Mandarin, C++
Location : Summoner's Rift
Re: Add multi-themes to my forum
~bump~
C'mon guys! Help!
C'mon guys! Help!
Empire_1- Active Poster
- Posts : 1391
Reputation : 125
Language : English, Spanish, Mandarin, C++
Location : Summoner's Rift
Re: Add multi-themes to my forum
That tutorial is a terrible way to make a theme changer.
The best way to do this is to first find a CSS host. Host every theme as an individual stylesheet.
Now get the URLs of the Stylesheets you have ready. Find the overall_header template and In the <head></head> portion of the code paste the default one where it says "CSS1," and then the other two URLs where it says CSS2 and 3.
Now go to your JS Management, create a new page, and paste this in there.
Now go back to the overall_header template. Directly below the previous code you put in there, paste this one. Then get the URL of the JS page you created and paste it where it says "JSADDRESHERE."
Now you make the actual "switches" for the theme changer. You can put this wherever you want, but I'd recommend putting somewhere in the <body></body> potion of the code. Only change the theme names here, nothing else. You can add more stylesheets, just remember to change the value if you do.
Your theme changer should now be working. Feel free to ask any questions you may have.
The best way to do this is to first find a CSS host. Host every theme as an individual stylesheet.
Now get the URLs of the Stylesheets you have ready. Find the overall_header template and In the <head></head> portion of the code paste the default one where it says "CSS1," and then the other two URLs where it says CSS2 and 3.
- Code:
<link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="CSS1" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="CSS2" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="theme3" href="CSS3 />
Now go to your JS Management, create a new page, and paste this in there.
- Code:
//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm
var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
//////No need to edit beyond here//////////////
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document·cookie.match(re)) //if cookie found
return document·cookie.match(re)[0].split("=")[1] //return its value
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document·cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}
function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}
if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document·cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
Now go back to the overall_header template. Directly below the previous code you put in there, paste this one. Then get the URL of the JS page you created and paste it where it says "JSADDRESHERE."
- Code:
<script src="JSADDRESSHERE" type="text/javascript"></script>
Now you make the actual "switches" for the theme changer. You can put this wherever you want, but I'd recommend putting somewhere in the <body></body> potion of the code. Only change the theme names here, nothing else. You can add more stylesheets, just remember to change the value if you do.
- Code:
<form id="switchform">
<!-- Theme 1 -->
<input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Theme 1 Name
<!-- Theme 2 -->
<input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Theme 2 Name
<!-- Theme 3 -->
<input type="radio" name="choice" value="theme3" onClick="chooseStyle(this.value, 60)">Theme 3 Name
</form>
Your theme changer should now be working. Feel free to ask any questions you may have.
LH Justin- Hyperactive
- Posts : 3686
Reputation : 121
Language : English
Location : United States
Re: Add multi-themes to my forum
LH Justin wrote:That tutorial is a terrible way to make a theme changer.
The best way to do this is to first find a CSS host. Host every theme as an individual stylesheet.
Now get the URLs of the Stylesheets you have ready. Find the overall_header template and In the <head></head> portion of the code paste the default one where it says "CSS1," and then the other two URLs where it says CSS2 and 3.
- Code:
<link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="CSS1" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="CSS2" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="theme3" href="CSS3 />
Now go to your JS Management, create a new page, and paste this in there.
- Code:
//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm
var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
//////No need to edit beyond here//////////////
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document·cookie.match(re)) //if cookie found
return document·cookie.match(re)[0].split("=")[1] //return its value
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document·cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}
function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}
if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document·cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
Now go back to the overall_header template. Directly below the previous code you put in there, paste this one. Then get the URL of the JS page you created and paste it where it says "JSADDRESHERE."
- Code:
<script src="JSADDRESSHERE" type="text/javascript"></script>
Now you make the actual "switches" for the theme changer. You can put this wherever you want, but I'd recommend putting somewhere in the <body></body> potion of the code. Only change the theme names here, nothing else. You can add more stylesheets, just remember to change the value if you do.
- Code:
<form id="switchform">
<!-- Theme 1 -->
<input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Theme 1 Name
<!-- Theme 2 -->
<input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Theme 2 Name
<!-- Theme 3 -->
<input type="radio" name="choice" value="theme3" onClick="chooseStyle(this.value, 60)">Theme 3 Name
</form>
Your theme changer should now be working. Feel free to ask any questions you may have.
Wait a sec, you mentioned Templates! I'm not sure I can do that. I have a phpBB3 forum
Empire_1- Active Poster
- Posts : 1391
Reputation : 125
Language : English, Spanish, Mandarin, C++
Location : Summoner's Rift
Re: Add multi-themes to my forum
Well you can't use that method.The Divine Clutch wrote:Wait a sec, you mentioned Templates! I'm not sure I can do that. I have a phpBB3 forum
LH Justin- Hyperactive
- Posts : 3686
Reputation : 121
Language : English
Location : United States
Re: Add multi-themes to my forum
It's not something I've wanted to do on forumotion, but as I see it, using the the techniques you outline LH, he could either put the buttons to change the theme in his navbar, footer, or better yet a widget?
coco moco- Forumember
- Posts : 118
Reputation : 50
Language : English
Re: Add multi-themes to my forum
Last edited by yamasaki4 on August 11th 2011, 1:09 pm; edited 2 times in total
yamasaki4- New Member
- Posts : 3
Reputation : 0
Language : THAI
Re: Add multi-themes to my forum
I may be being dim here, as I often am with jscript , but surely if the following code goes into jscript management and is made available for all pages it's being linked to in the head? Therefore, on phpbb3 you just need to put in the jscript management?
The links for the alternate CSS need to go somewhere, so why can't they go in the homepage message? The div that get's activated can be over-ridden with an inline style.
The form itself is down to personal preference where it goes, but it should be able to go straight in a widget, or the homepage message, or a footer, with a little tweaking a drop down menu in the navbar, with a little more jscript, it could be added to the linklist/replace the linklist/replace the search that lives under the navbar.
My preference would be a widget, but only because of ease of styling the form (instead of radials, you could have pictures and things )
I'm probably missing something very obvious, though.
- Code:
//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm
var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.
//////No need to edit beyond here//////////////
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document·cookie.match(re)) //if cookie found
return document·cookie.match(re)[0].split("=")[1] //return its value
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document·cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}
function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}
function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}
if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document·cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
}
}
The links for the alternate CSS need to go somewhere, so why can't they go in the homepage message? The div that get's activated can be over-ridden with an inline style.
- Code:
<link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="CSS1" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="CSS2" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="theme3" href="CSS3 />
The form itself is down to personal preference where it goes, but it should be able to go straight in a widget, or the homepage message, or a footer, with a little tweaking a drop down menu in the navbar, with a little more jscript, it could be added to the linklist/replace the linklist/replace the search that lives under the navbar.
- Code:
<form id="switchform">
<!-- Theme 1 -->
<input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Theme 1 Name
<!-- Theme 2 -->
<input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Theme 2 Name
<!-- Theme 3 -->
<input type="radio" name="choice" value="theme3" onClick="chooseStyle(this.value, 60)">Theme 3 Name
</form>
My preference would be a widget, but only because of ease of styling the form (instead of radials, you could have pictures and things )
I'm probably missing something very obvious, though.
coco moco- Forumember
- Posts : 118
Reputation : 50
Language : English
Similar topics
» Split: Add multi-themes to your forum
» Trouble with the 'add multi-themes to your forum' tip/trick
» Multi themes help
» Multi-themes
» Multi Themes
» Trouble with the 'add multi-themes to your forum' tip/trick
» Multi themes help
» Multi-themes
» Multi Themes
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum