7 replies to this topic

[xaphania]

Hi everyone I'm hoping someone who knows a fair bit about CSS will help me out here. I'm trying to get the new multiple skin selector on The Hogwarts Experience to work, and I've managed to get it to work in so far as the colours change with each skin, however the images do not. I have the CSS for each skin, and so I was wondering if anyone could help me with where to place the image URLs so the images change with each skin change.

If that doesn't make sense, then here's the URL of the test forum: http://skin-test.edi...d.com/index.htm

As you can see, if you change the skin using the dropdown menu, various aspects of it change (colour, backround, bars), but the heder, nav bar and buttons don't.

Here's the CSS for the Deathly Hallows Adult Skin, is it possible to insert the image URLs into it?

Thanks for any help anyone can give - I will be very very grateful!

body {
 background-color: #202020;
 background-image: url("http://illiweb.com/fa/vide.gif");
 scrollbar-face-color: #;
 scrollbar-highlight-color: #;
 scrollbar-shadow-color: #;
 scrollbar-3dlight-color: #;
 scrollbar-arrow-color: #;
 scrollbar-track-color: #;
 scrollbar-darkshadow-color: #;
 }
 font,th,td,p {
  font-family: Verdana, Arial, Helvetica, sans-serif }
 a:link,a:active,a:visited {
  color : #fefefe;
  }
 a:hover{
  text-decoration: underline;
  color : #dd6900;
  }
 hr{
  height: 0px;
  border: solid #232323 0px;
  border-top-width: 1px;
 }
 .bodyline{
  background-color: #424343;
  border: 1px #444444 solid;
 }
 .bodylinewidth {
 width:75%}
 .forumline{
  background-color: #343535;
  border: 2px #131313 solid;
  }
 td.row1{
  background-color: #232323;
  }
 td.row2{
  background-color: #232323;
  }
 td.row3{
  background-color: #232323;
  }
 td.rowpic {
 background-color: #dee3e7;
 background-image: url("http://i11.servimg.com/u/f11/11/02/79/18/bar10.gif");
 }
 th {
 color: #fefefe;
  font-size: 11px;
  font-weight : bold;
 background-color: #9a9a9a;
  height: 25px;
 background-image: url("http://i11.servimg.com/u/f11/11/02/79/18/bar10.gif");
 }
 td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
 background-image: url("http://i11.servimg.com/u/f11/11/02/79/18/bar10.gif");
 background-color:#dee3e7;
  border: #131313;
  border-style: solid;
  height: 28px;
 }
 td.cat,td.catHead,td.catBottom {
 height: 29px;
 border-width: 0px 0px 0px 0px;
 }
 th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.t
hCornerR {
 font-weight: bold;
  border: #ffffff;
  border-style: solid;
  height: 28px;
 }
 td.row3Right,td.spaceRow {
 background-color: #232323;
  border: #131313;
  border-style: solid;
 }
 td.pourcentback {
  background-color : #202020;
  }
 th.thHead,td.catHead {
  font-size: 12px;
  border-width: 1px 1px 0px 1px;
  }
 th.thSides,td.catSides,td.spaceRow {
  border-width: 0px 1px 0px 1px;
  }
 th.thRight,td.catRight,td.row3Right {
  border-width: 0px 1px 0px 0px;
  }
 th.thLeft,td.catLeft {
  border-width: 0px 0px 0px 1px;
  }
 th.thBottom,td.catBottom {
  border-width: 0px 1px 1px 1px;
  }
 th.thTop {
  border-width: 1px 0px 0px 0px;
  }
 th.thCornerL {
  border-width: 1px 0px 0px 1px;
  }
 th.thCornerR {
  border-width: 1px 1px 0px 0px;
  }
 .maintitle{
 font-weight: bold;
  font-size: 22px;
  font-family: Trebuchet MS,Verdana, Arial, Helvetica, sans-serif;
 text-decoration: none;
  line-height : 120%;
  color : #606060;
 }
 .gen {
  font-size : 12px;
  }
 .genmed {
  font-size : 11px;
  }
 .gensmall {
  font-size : 10px;
  }
 .gen,.genmed,.gensmall {
  color : #606060;
  }
 a.gen,a.genmed,a.gensmall {
  color: #fefefe;
  text-decoration: none;
  }
 a.gen:hover,a.genmed:hover,a.gensmall:hover{
  color: #dd6900;
  text-decoration: underline;
  }
 .mainmenu{
  font-size : 11px;
  color : #606060 }
 a.mainmenu{
  text-decoration: none;
  color : #fefefe;
 }
 a.mainmenu:hover{
  text-decoration: underline;
  color : #dd6900;
  }
 .cattitle{
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  color : #fefefe}
 a.cattitle{
  text-decoration: none;
  color : #fefefe;
  }
 a.cattitle:hover{
  text-decoration: underline;
  }
 .forumlink{
  font-weight: bold;
  font-size: 12px;
  color : #fefefe;
  }
 a.forumlink {
  text-decoration: none;
  color : #fefefe;
  }
 a.forumlink:hover{
  text-decoration: underline;
  color : #dd6900;
  }
 .nav{
  font-weight: bold;
  font-size: 11px;
  color : #606060;
  }
 a.nav{
  text-decoration: none;
  color : #fefefe;
  }
 a.nav:hover{
  text-decoration: underline;
  }
 .topictitle,h1,h2{
  font-weight: bold;
  font-size: 11px;
  color : #606060;
  }
 a.topictitle:link{
  text-decoration: none;
  color : #fefefe;
  }
 a.topictitle:visited{
  text-decoration: none;
  color : #5493b4;
  }
 a.topictitle:hover{
  text-decoration: underline;
  color : #dd6900;
  }
 .name{
  font-size : 11px;
  color : #606060;
 }
 .postdetails{
  font-size : 10px;
  color : #606060;
  }
 .postbody{
  font-size : 12px;
  line-height: 18px}
 a.postlink:link{
  text-decoration: none;
  color : #fefefe }
 a.postlink:visited{
  text-decoration: none;
  color : #5493b4;
  }
 a.postlink:hover{
  text-decoration: underline;
  color : #dd6900}
 .code{
  font-family: Courier, 'Courier New', monospace, sans-serif;
  font-size: 11px;
  color: #006600;
 background-color: #fafafa;
  border: #232323;
  border-style: solid;
 border-left-width: 1px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px}
 .quote{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #444444;
  line-height: 125%;
 background-color: #fafafa;
  border: #232323;
  border-style: solid;
 border-left-width: 1px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px}
 .copyright{
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #444444;
  letter-spacing: -1px;
 }
 a.copyright{
  color: #444444;
  text-decoration: none;
 }
 a.copyright:hover {
  color: #606060;
  text-decoration: underline;
 }
 .coloradmin {
  color: #5e0d69}
 .colormod {
  color: #006600}
 img{
 border:0}
 input,textarea, select {
 color : #606060;
 font: normal 11px Verdana, Arial, Helvetica, sans-serif;
 border-color : #606060;
 }
 input.post, textarea.post, select {
 background-color : #ffffff;
 }
 input {
  text-indent : 2px;
  }
 input.button {
 background-color : #232323;
 color : #606060;
 font-size: 11px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
 }
 input.mainoption {
 background-color : #fafafa;
 font-weight : bold;
 }
 input.liteoption {
 background-color : #fafafa;
 font-weight : normal;
 }
 .helpline {
  background-color: #232323;
  border-style: none;
  }
 input {
  background-color: #232323;
  }
 @import url("form_ie.css");

Edited by Big_Red2009, 12 May 2007 - 02:03 PM.
Added CodeBox

[Kevin]

I'm guessing you've inserted some type of Java Script code for the skin changer. This could be done with CSS, as long as the images are contained in ids or classes. The only problem is, it wouldn't be worth the trouble. I've seen some skin changers that have the ability to change images as well, but they were for Invision Free forums. This is a Java Script issue. Maybe you could refer us to where you got the Skin Changer code, and even posting it would be a large help. JS isn't my best language, but I can try and help out.

Since that probably makes no sense, in short, you would either have to have images that matched all skins, or do it with Java Script... I can clarify if you need it.

[xaphania]

I think I understand

This is the Javascript code they've given us:

http://www.freewebto...a/scriptnew2.js

Thanks

[Kevin]

It doesn't seem to want to work for me, probably my firewall. Would you mind posting the contents of the code? That would be really helpful. I'll keep trying to download it and I'll let you know if I get it.

[xaphania]

No problem

document.write('<style>body {margin-top:50px !important;}</style>');
document.write('<div style="position: absolute; width: 304px; height: 38px; z-index: 1; left: -60px; top: 15px" id="skinselector"><form><select onchange="changeskin(this.options[this.selectedIndex].value); window.location.reload();"><option> Change Skin </option><option value="ADULT"> Deathly Hallows Adult </option><option value="UK"> Deathly Hallows UK </option><option value="US"> Deathly Hallows US skin</option></select></form></div>');
var scheme = getCookie('template1');
if (scheme == 'ADULT') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.freewebtown.com/xaphania/adult.css">');
} else if (scheme == 'UK') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.freewebtown.com/xaphania/UK.css">');
} else if (scheme == 'US') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.freewebtown.com/xaphania/US.css">');
}

function changeskin(change) {
var scheme = change;
var name = 'template1';
var pathname = location.pathname;
var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
var ExpDate = new Date ();
ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
setCookie(name,scheme,ExpDate,myDomain);
}
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}

function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}

Thanks again for trying to help!

[Kevin]

Ok, so basically that finds which you choose, picks it, sets a cookie and reloads the current page. Pretty straightforward.

I can't see anywhere in that a way to change the images as well. It must just be a skin changer. There would have to be some more code written, but I'm not really sure how it would work. Maybe there will be a code somewhere that may help you. I'm not very experienced in PHPBB or javascript, otherwise I would try and figure something out for you.

Well, I don't think I will be able to help you any more, sorry. Hopefully someone will. Good luck with it.

[Pritthish]

Instead of this skin changer, maybe you could consider an easier one i found at ALA

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
	  a.disabled = true;
	  if(a.getAttribute("title") == title) a.disabled = false;
	}
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
	if(a.getAttribute("rel").indexOf("style") != -1
	   && a.getAttribute("rel").indexOf("alt") == -1
	   && a.getAttribute("title")
	   ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title); 

insert this and remember to put all your style sheets as alternative stylesheets and name them. ex:

<link rel="stylesheet" type="text/css" media="screen" href="http://hpbeyond.net/hpb/hpdh.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="HPDH" href="/hpdh.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="OOTP" href="ootp.css" />

Where the first one is your default style sheet and the rest is a list of all the alternative style sheets you have

then use something like this to change the stylesheets

<a href="#" 
onclick="setActiveStyleSheet('style_default'); 
return false;">Change style to OotP Movie</a>

if you are still confused, check this script out in action at my site http://hpbeyond.net      and yes, instead of having your main banner as a image, put it as a blank div or span with an id and use the image as the background image for the div or span, or, if you are into semantic coding, put it in a h1 tag like i did in my site

[AlbusDumbledore]

Topic Closed.