[Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum

[inde]

Verschiedene Styles per Wahlschalter im Forum [Alle Versionen]

Hinweis: Dieses Tutorial basiert auf dem Script einer älteren Anleitung von ZP. Da es in der letzten Zeit gehäuft zu Problemen bei der Anzeige des Wahlschalters in den verschiedenen Browsern wegen des Lesens von CSS-Dateien sowie Scripten gekommen ist, möchte ich euch hier eine neue ....jedoch auch etwas kompliziertere Lösung anbieten. Die Anleitung wurde lediglich umgebaut und deshalb neu eingestellt.

---

Du möchtest verschiedene Styles Deinen Usern im Forum per Wahlschalter anbieten? So wie auf der Grafik abgebildet könnte auch Dein Forum mit eingebautem Wahlschalter funktionieren.

---

Die folgende Anleitung ist nicht geeignet für User welche keine Erfahrungen haben mit dem Umgang in HTML, CSS, Scripten sowie Templates.

Auch haben wir im Support nicht die Zeit für Anfragen wegen Fehlfunktionen o.ä. bei Deiner Umsetzung zu beantworten, dies ist nicht die Aufgabe des Supports. Mehr dazu hier!

Nehme Dir deshalb die nötige Zeit für eine funktionierende Umsetzung. Lese und befolge auch ganz genau die einzelnen Arbeitsschritte in der nachfolgenden Anleitung. Sollte es beim ersten Mal nicht funktionieren, dann arbeite die Schritte entsprechend der Anleitung nochmals ab.
Du hast keinerlei Erfahrungen mit dem Umgang solcher Sachen bzw. bekommst es nicht umgesetzt, dann solltest Du vielleicht einmal auf etwas verzichten, schließlich kann man nicht alles haben.

---

Grundsätzlich stehen Dir 2 Varianten für eine Umsetzung zur Verfügung.

• Variante A: Die Umsetzung des Wechselschalters wird ausschließlich mit vorgefertigten Styles von umgesetzt.
  
• Variante B: Für die Umsetzung werden eigene Styles mit Hilfe von CSS-Dateien erstellt, welche extern gehostet werden müssen.
  

Entscheide Dich deshalb zunächst für eine der beiden Varianten, bevor Du mit der Ausarbeitung fortfährst.

Tipp:
Für die Ausarbeitung ist es zwingend notwendig einige Codes in einer Textdatei zwischen zu speichern. Dafür sollte jedoch ein Editor und kein Schreibprogramm o.ä. verwendet werden, da dadurch die Codes verfälscht werden.
Den Editor findest Du in Windows unter -> Start -> Alle Programme -> (Ordner) Zubehör -> Editor

Die Anleitung besteht im wesentlichen aus 7 Teilen, wobei die Anleitungen 6 und 7 nur optional als Ergänzung zu verstehen sind.

1. Script erstellen
   
2. Script bearbeiten (Namensgebung der Styles)
   
3. Script bearbeiten (ID bzw. CSS der Styles erstellen und eintragen)
   
4. Code für den Eintrag in die Templates vorbereiten
   
5. Code in das Template einsetzen
   
6. Ausrichtung des Wahlschalters - *optional
   
7. Ausbau des Wahlschalters mit mehr Optionen/Styles - *optional
   

---

Anleitung Teil 1

Kopiere Dir den nachfolgenden Code. Der Code ist für einen Wahlschalter für 3 Optionen/Styles vorgefertigt.

Code:

var type = getCookie('Vorlage1');
        var wahl = document.getElementById('wahl');
        wahl.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");
        }

---

Öffne den

• HTML und JAVASCRIPT Javascript Codes Verwaltung
  
• Falls noch nicht geschehen aktiviere die Javascript-Code Verwaltung und Klick auf   .
  
• Klick auf "Ein neues Javascript erstellen"
  
• Gebe dem Script den Namen "Wahlschalter"
  
• Markiere die Platzierung "Auf allen Seiten"
  
• Füge nun den oben angeführten Code dort ein und Klick auf
  

---

Anleitung Teil 2

Verändern und anpassen des Scriptes. Durch einen Klick auf das Zahnradsymbol   könnt ihr das Script jeder Zeit bearbeiten.
Dort wo innerhalb des Codes "WECHSEL DEN STYLE" steht, könnt ihr dem Wahlschalter einen eigenen Namen geben.
Bei Style1, Style2, etc. könnt ihr einen Namen für den entsprechenden Style vergeben.

---

Anleitung Teil 3

Im nachfolgenden Teil des Codes werden die ID's der Hitskin-Styles oder aber der extern geladenen CSS-Stylesheet eingefügt.

Code: document.write('<link rel="stylesheet" type="text/css" href="http://ADRESSE_DES_CSS-ltr.css">');

Variante A:

Variante B:

---

Anleitung Teil 4

Das Script wurde fertig gestellt. Nach dem Absenden kopiere Dir die Adresse Deines Scriptes.

Setze dann den Link zu Deinem erstellten Script wie im nachfolgenden Beispiel in einem Code ein und kopiere Dir diesen.

Code: <div id=wahl></div><script type=text/javascript src=http://ADRESSE_DES_ SCRIPTS.js></script>

---

Anleitung Teil 5

Nun muss das Script in das Templates overall_header eingebunden werden.

---

Für die verschieden Forenversionen gibt es unterschiedliche Stellen bei denen der Code eingefügt werden muss. Achte bitte darauf die richtige Version für Dein Forum auszuwählen.

phpBB2-Template bearbeiten:

phpBB3-Template bearbeiten:

PunBB-Template bearbeiten:

Invision-Template bearbeiten:

---

Anleitung Teil 6

Weiterhin hast Du über einen Eintrag in Dein persönliches CSS die Möglichkeit den Wahlschalter auszurichten.

1. Bilder & Farben Farben CSS Stylesheet
   
2. Nehme einen entsprechenden Eintrag vor und klicke danach auf
   

Codebeispiel:

Code:

/*Ausrichtung des Wahlschalters*/
#wahl {
    display: block;
    margin-bottom: 8px;
    margin-top: 8px;
    text-align: center;/*left, center, right möglich*/
}

---

Anleitung Teil 7

Wenn Du den originalen Style Deines Forums der vor dem Einbau des Wahlschalters im Forum installiert war behalten möchtest, dann genügt es im ersten Eintrag die URL-Adresse Deines Forums wie in den beiden nachfolgenden Codes angezeigt einzusetzen.

Code:

<option value="Wert1">ORGINALSTYLE </option>

Code:

document.write('<link rel="stylesheet" type="text/css" href="http://www.URL DES FORUMS/">');

---

Weiterhin besteht die Möglichkeit durch die Bearbeitung des Scripts Optionen zu entfernen oder hinzuzufügen, indem einige Bestandteile wie im nachfolgenden Beispiel entfernt oder aber hinzufügt. Achte dabei auf die jeweiligen Nummerierungen.

Code:

<option value="Wert4">Style4 </option>

Code:

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

---

Have Fun
       

Dieses Tutorial stammt von inde. Das Tutorial unterliegt dem Copyright von hilfe.forumieren.com. Eine Veröffentlichung außerhalb von hilfe.forumieren.com ist nicht gestattet!