Regeln und nützliche Hinweise
E-Mail-Adressen dürfen nicht veröffentlicht werden!
Lexi Help
Partner
www.forumieren.com

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

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

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

Beitrag von inde am So 11 Dez 2016 - 23:00


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 hitskin_logo 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

  • Admin-Bereich Schritt weiter Module Schritt weiter Templates/HTML-JAVA HTML und JAVASCRIPT Schritt weiterJavascript Codes Verwaltung Schritt weiter
  • Falls noch nicht geschehen aktiviere die Javascript-Code Verwaltung und Klick auf  Absenden .
  • 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 Bestätigen



Anleitung Teil 2

Verändern und anpassen des Scriptes. Durch einen Klick auf das Zahnradsymbol  zahnrad 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:

Nur gültig für Variante A!
Suche Dir bei Hitskin passende Styles für Deine Version des Forums.
Tipp: Nutze dafür die Filterfunktion.



Nach dem Klicken auf eine Version nutze die Vorschau.



Notiere Dir in der aus der Adresszeile Deines Browsers die ID.




Bearbeite nun im Script "Wahlschalter" die 3 Codeabschnitte und ergänze die ID's von Hitskin wie im nachfolgenden Beispiel.
Code:
document.write('<link rel="stylesheet" type="text/css" href="http://URL EURES FORUMS/212193-ltr.css">');


Klick nach der Fertigstellung des Codes auf  Bestätigen
Variante B:

Nur gültig für Variante B!
Für diese Variante kannst Du Dir zunächst auch die eigenen CSS-Dateien erstellen, diese müssen jedoch erst noch auf einem eigenen Webspace geladen werden oder aber bei einem Anbieter der das Hosten der CSS-Dateien für Dich übernimmt.

Für das nachfolgende Beispiel habe ich die CSS-Dateien bei einem Deutschen Anbieter spetools.de hochgeladen. Dieser Anbieter ist derzeit kostenlos und frei von Werbung.
Nach der Registrierung und Anmeldung findest Du das nachfolgende Menü und kannst dort auf den Link CSS-Codes für das Erstellen eines neuen Codes klicken.




  1. Trage eine Bezeichnung für den Style ein.
  2. Trage Dein CSS ein. Hinweis: Das eintragen eines Error-Codes ist nicht notwendig.
  3. Wichtig: Setze den Haken bei "Öffentlich" ein.
  4. Klick auf "CSS Code Cripten"




Über das bereits oben angeführte Menü gelangst Du wieder zurück zu Deinen erstellten CSS-Codes.
Hier findest Du dann auch Möglichkeiten für eine weitere Bearbeitung der CSS-Stylesheets sowei fertig erstellte Codes zum Verlinken.
Kopiere Dir den jeweiligen Link für das Einfügen in Dein Script "Wahlschalter".

Bearbeite nun im Script "Wahlschalter" die 3 Codeabschnitte und ergänze die Links zu Deinen erstellten CSS-Dateien wie im nachfolgenden Beispiel.
Code:
document.write('<link rel="stylesheet" type="text/css" href="http://spetools.de/css/1677.css">');


Klick nach der Fertigstellung des Codes auf  Bestätigen


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:
Nur gültig für phpBB2!
Eingeloggt mit dem Gründeraccount im:

  1. Admin-Bereich Schritt weiter Anzeige Schritt weiter Templates/HTML-JAVA Templates Schritt weiterAllgemeines Schritt weiteroverall_header Schritt weiter
  2. Klick auf das Zahnrad  zahnrad um das Template zu bearbeiten.
  3. Benutze die Suche um schneller die entsprechende Zeile 281 zu finden und bedenke, dass das gesuchte Schlagwort "BEGIN switch_ticker_new" mehrfach im Template vorkommt! *Die Zeilenangaben beziehen sich auf ein unbearbeitetes Template!
  4. Füge nun den vorgefertigten Code ein und Klick auf Absenden. Absenden
  5. Veröffentliche Dein Template durch einen Klick auf den Haken. Veröffentlichen



Nun sollte Dein Wahlschalter bereits im Forum unterhalb der Navigation zu sehen sein.
phpBB3-Template bearbeiten:
Nur gültig für phpBB3!
Eingeloggt mit dem Gründeraccount im:

  1. Admin-Bereich Schritt weiter Anzeige Schritt weiter Templates/HTML-JAVA Templates Schritt weiterAllgemeines Schritt weiteroverall_header Schritt weiter
  2. Klick auf das Zahnrad  zahnrad um das Template zu bearbeiten.
  3. Benutze die Suche um schneller die entsprechende Zeile 284 zu finden und bedenke, dass das gesuchte Schlagwort "BEGIN switch_ticker_new" mehrfach im Template vorkommt! *Die Zeilenangaben beziehen sich auf ein unbearbeitetes Template!
  4. Füge nun den vorgefertigten Code ein und Klick auf Absenden. Absenden
  5. Veröffentliche Dein Template durch einen Klick auf den Haken. Veröffentlichen



Nun sollte Dein Wahlschalter bereits im Forum unterhalb der Navigation zu sehen sein.
PunBB-Template bearbeiten:
Nur gültig für PunBB!
Eingeloggt mit dem Gründeraccount im:

  1. Admin-Bereich Schritt weiter Anzeige Schritt weiter Templates/HTML-JAVA Templates Schritt weiterAllgemeines Schritt weiteroverall_header Schritt weiter
  2. Klick auf das Zahnrad  zahnrad um das Template zu bearbeiten.
  3. Benutze die Suche um schneller die entsprechende Zeile 261 zu finden und bedenke, dass das gesuchte Schlagwort "BEGIN switch_ticker_new" mehrfach im Template vorkommt! *Die Zeilenangaben beziehen sich auf ein unbearbeitetes Template!
  4. Füge nun den vorgefertigten Code ein und Klick auf Absenden. Absenden
  5. Veröffentliche Dein Template durch einen Klick auf den Haken. Veröffentlichen



Nun sollte Dein Wahlschalter bereits im Forum unterhalb der Navigation zu sehen sein.
Invision-Template bearbeiten:
Nur gültig für Invision!
Eingeloggt mit dem Gründeraccount im:

  1. Admin-Bereich Schritt weiter Anzeige Schritt weiter Templates/HTML-JAVA Templates Schritt weiterAllgemeines Schritt weiteroverall_header Schritt weiter
  2. Klick auf das Zahnrad  zahnrad um das Template zu bearbeiten.
  3. Benutze die Suche um schneller die entsprechende Zeile 280 zu finden und bedenke, dass das gesuchte Schlagwort "BEGIN switch_ticker_new" mehrfach im Template vorkommt! *Die Zeilenangaben beziehen sich auf ein unbearbeitetes Template!
  4. Füge nun den vorgefertigten Code ein und Klick auf Absenden. Absenden
  5. Veröffentliche Dein Template durch einen Klick auf den Haken. Veröffentlichen



Nun sollte Dein Wahlschalter bereits im Forum unterhalb der Navigation zu sehen sein.


Anleitung Teil 6

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

  1. Admin-Bereich Schritt weiter Anzeige Schritt weiter Bilder & Farben Schritt weiter Farben Schritt weiter CSS Stylesheet
  2. Nehme einen entsprechenden Eintrag vor und klicke danach auf Annehmen

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 Wink
       
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!



inde
Administrator
Administrator

Männlich Beiträge : 3157
Hinweis : Flash The Scene™
keine
Anmeldedatum : 20.10.11
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten