Habe eine Frage an euch.

Schritt 1


Zuerst brauchst du den CSS-Code von deinem Forum. Natürlich sollte der Style des Forums schon so fertig sein, wie du ihn gerne haben möchtest. Um an den CSS-Code ran zu kommen gehst du so vor:

Admin-Bereich -> Anzeige -> Farben ->CSS-Gerüst des Forums ansehen

Daraufhin öffnet sich ein neues Fenster mit dem CSS-Code, den du dann kopierst

https://i.servimg.com/u/f49/15/59/34/57/schrit10.jpg


Diesen Code speicherst du nun auf deinem Desktop als Textdokument ab:
https://i.servimg.com/u/f49/15/59/34/57/schrit11.jpg
https://i.servimg.com/u/f32/15/12/19/48/schrit10.jpg

Wie schon im Bild steht: Die Endung des Namens muss .css sein. Das ist genauso wie bei einem Bild ( .jpg oder .png etc), sonst ist es nicht richtig!




Schritt 2

So, nun hast du schon einmal den CSS-Code, allerdings ist da das Problem, dass die Bilder (Header, Wer ist online) nicht enthalten sind. Hintergrund ist aber dabei! Also brauchst du folgende Codes, damit alles drin ist (:


Für den Header:

Code:

#i_logo {
background-image: url('BILDADRESSE');
height:300px; /*Höhe des Bildes */
width:600px; /*Breite des Bildes*/
}

Für die "Wer ist online"-Anzeige:

Code:

#i_whosonline{
background-image: url('BILDADRESSE');
height:211px; /*Höhe des Bildes*/
width:194px; /*Breite des Bildes*/
}

Diese Codes kannst du einfach so einfügen. Ich mache es meist direkt unter dem Code vom Hintergrund:

https://i.servimg.com/u/f49/15/59/34/57/schrit13.jpg

Dort wo "BILDADRESSE" steht muss die URL des jeweiligen Bildes hin. Du musst daran denken die richtigen Maße des Bildes anzugeben. Dabei gibt "height" die Höhe und "width" die Breite an. Für gewöhnlich haben wir es hier aber Breite mal Höhe, also die Zahlen einfach umdrehen


Das Ganze dann speichern und auf dieser Seite hochladen:
http://www.fileden.com/

Ist die einzige Seite, wo es klappt. Zumindest geht es bei deutschen Seiten bei mir nicht.
Wichtig! Den Code, den du da erhälst brauchst du nachher noch! Kopiere nur den Code, ohne irgendwelchen Schnick-Schnack (Als ich den Code für das Tutorial hier hochgeladen habe, habe ich gesehen, dass um den Code, den ich brauche noch dieses [img*] Zeug war. Das nicht kopieren!)




Schritt 3

So, der Codes ist gespeichert. Du hast nun also den ersten Style drin. Als nächstes bereitest du dein Forum darauf vor (sozusagen^^)

Du gehst nun so vor:

Admin-Bereich -> Module -> HTML-Seiten-Verwaltung (ganz unten) -> eine neue HTML-Seite erstellen

https://i.servimg.com/u/f49/15/59/34/57/schrit14.jpg

Du kannst dem Ding irgendeinen Titel geben, das ist egal. Dann noch die beiden Optionen da auf "Nein" stellen (dürfte so automatisch sein) und folgenden Code in den leeren Kasten einfügen (ist im Bild dort schon drin):

Code:

var type = getCookie('Vorlage1');
var sugar = document.getElementById('sugar');
sugar.innerHTML ='<select onchange="changeskin(this.options[this.selectedIndex].value);window.location.reload();"><option> Wechsel den Style </option><option value="wert1"> Style1 </option><option value="wert2"> Style2 </option><option value="wert3"> Style3 </option></select>';




if (type == 'wert1')
{
   document.write('<link rel="stylesheet" type="text/css" href="ADRESSE DES CSS">');
}
else if (type == 'wert2')
{
   document.write('<link rel="stylesheet" type="text/css" href="ADRESSE DES CSS">');
}
else if (type == 'wert3')
{
   document.write('<link rel="stylesheet" type="text/css" href="ADRESSE DES CSS">');
}


function changeskin(change) {
   var scheme = change;
   var name = 'Vorlage1';
   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,'/');
}
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");
}

Du darfst vorerst nichts daran ändern!!!!!


Dort wo "Style 1" oder "Style 2" etc steht kommt der Titel des Styles rein. Den darfst du dir selber aussuchen. Wenn du den Code überfliegst, siehst du, dass dort auch einmal "Wechsel den Style" steht. Das ist der Text, der angezeigt wird, wenn man ganz normal so auf der Seite ist (kann das nicht beschreiben). Den kannst du auch beliebig ändern.
So, dort wo "ADRESSE DES CSS" steht muss der Code rein, den du erhälst, wenn du bei fileden.com deinen CSS-Code hochlädtst. Das ganze kann dann so aussehen:

https://i.servimg.com/u/f49/15/59/34/57/schrit16.jpg

Das rote gehört zum roten, das grüne zum grünen (:




Schritt 4

Das, was du nun hast musst du bestätigen (unten links). So speicherst du alles ab. Du kannst natürlich auch noch einen dritten Style einfügen oder auch 5 oder einfach nur 2. Je nach Lust und Laune. Du musst nur folgende Codes löschen bzw hinzufügen

Beispiel für 2 Styles:

Code:

<option value="Wert3">Style3 </option>

Code:

else if (type == 'Wert3')
{
  document.write('<link rel="stylesheet" type="text/css" href="http://ADRESSE_DES_ CSS-ltr.css">');
}

Die obrigen Codes müsstest du dann löschen. Wenn du aber noch einen vierten Style haben willst musst du diese Codes hinzufügen und "Wert 3" durch "Wert 4" ersetzten usw


So, zurück zu unseren Wahlschalter. Du hast ihn nun also abgespeichert und willst jetzt, dass man ihn sieht. Dazu kopierst du die Adresse des Wahlschalters bzw öffnest sie in einem neuen Tapp, sodass du auf sie zurück greifen kannst:

https://i.servimg.com/u/f49/15/59/34/57/schrit17.jpg
(die markierte Adresse)

Dann brauchst du noch folgenden Code:

Code:

<div id=sugar></div><script type=text/javascript src=http://URL EURER HTML-SEITE></script>

Dort wo "URL EURER HTML-SEITE" steht muss... ja, die URL davon hin^^
Das würde bei dir dann so aussehen (bzw sieht es bei dir so aus):

Code:

<div id=sugar></div><script type=text/javascript src=http://testme.forumieren.com/h1-wahlschalter></script>

Diesen Code fügst du dann hier ein:

Admin-Bereich -> Allgemeines -> Einstellungen -> Beschreibung der Website

In den Kasten muss der Code rein, abschicken, fertig



Wichtig! Du hast auf die Buttons (neuer Beitrag etc) keinen Zugriff! Die solltest du also möglichst neutral gestalten. Ich weiß nicht, wie man die Bilder der Kategorien so genau ändert. Du kannst ruhig ein Bild einfügen, wenn du den Style machst, allerdings musst du den Text dann extra machen, wenn du ihn immer anders haben willst (Erklärung folgt).


Bei Sedinata habe ich das Bild des Katers mit dem Auge ganz normal bei den Kategoriebildern eingefügt, ohne den Text darauf. Den Text habe ich zusätzlich gemacht und wie du jetzt hier als Überschrift einer Kategorie angegeben (ich hoffe, du verstehst, was ich meine^^)
Oben, die Buttons (Ocean, Clan etc) dürften nicht mit im CSS enthalten sein. Da müsstest du also den Code noch suchen. Außerdem daran denken, die Codes der Bilder von Header, Hintergrund und Wer ist online sowie der Kategorien raus nehmen, da diese sonst die Codes der Bilder des Wahlschalters überdecken!

Ok, ich hoffe, du hast das alles verstanden ^^