Template auswählen

[incendium]

hi @ all,
ich habe schon auf vielen Seiten in der navi ein Dropdownfeld gesehn mit dem man das template der seite ändern kann.

Kann mir mal jemand sagen wie das gemacht wurde??

 

[Commodore]

<select>
  <option>Template 1</option>
  <option>Template 2</option>
</select>

Selbstverständlich noch verpackt in ein Formular



*scnr*



Du hast deine verschiedenen Templates und setzt dort Platzhalten ein, beispielsweise:

<div id="navi">{navi}</di>

Das wird dann mit PHP geöffnet (fopen) und die Platzhalter durch Werte ersetzt (str_replace bzw. für komplexeres preg_replace).

Abhängig von dem gewählten Template wird dann eine andere Datei geöffnet.

 

[Sn0opy]

Wird meisten mit Javascript und CSS gemacht. Durch Javascript wird dann einfach (ohne dass die Seite neu laden muss) eine andere CSS Datei geladen.

Im Head:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="alternate stylesheet" href="stylegreen.css" type="text/css" media="screen" title="green" />
<link rel="alternate stylesheet" href="styleblue.css" type="text/css" media="screen" title="blue" />
<link rel="alternate stylesheet" href="styleorange.css" type="text/css" media="screen" title="orange" />
<link rel="alternate stylesheet" href="stylepink.css" type="text/css" media="screen" title="pink" />
<link rel="alternate stylesheet" href="stylered.css" type="text/css" media="screen" title="red" />

In Meiner Navigation stand dann:

<ul>
	<li><a href="#" onclick="setBackgroundColor('green');return false;" title="Green">Green</a></li>
	<li><a href="#" onclick="setBackgroundColor('blue');return false;" title="Blue">Blue</a></li>
	<li><a href="#" onclick="setBackgroundColor('orange');return false;" title="Orange">Orange</a></li>
	<li><a href="#" onclick="setBackgroundColor('pink');return false;" title="Orange">Pink</a></li>
	<li><a href="#" onclick="setBackgroundColor('red');return false;" title="Red">Red</a></li>
</ul>

var defaultBackgroundColor = "orange";
var currentBackgroundColor;

function setBackgroundColor(color) {
  var i, a;
  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") == color) a.disabled = false;
    }
  }
  
  currentBackgroundColor = color;
}

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("backgroundColor");
  var bgColor = cookie ? cookie : defaultBackgroundColor;
  setBackgroundColor(bgColor);
}

window.onunload = function(e) {
  createCookie("backgroundColor", currentBackgroundColor, 365);
}

var cookie = readCookie("backgroundColor");
var bgColor = cookie ? cookie : defaultBackgroundColor;
setBackgroundColor(bgColor);

Den Javascript Code machste auch einfach in den Head (natürlich in die Javascript Tags eingebunden) oder du packst den Code in ne .js Datei und lädst ihn dann von dort aus.

Auf Wunsch kann ich das ganze an meiner Seite mal vorzeigen, dann änder ich den Theme von meinem Blog schnell.


//Edit: Merke grad erst, dass das ja im PHP Bereich ist. Meine Variante enthällt demnach rein gar kein PHP, sondern ausschließlich JavaScript, HTML und CSS