Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» [Invision] Gefällt mir Button erscheint nicht
von Alastor Heute um 18:30

» [Invision] Erklärung PWA Aktivierung + Mobile Version Problem
von Alastor Gestern um 23:41

» Goldhauch´s Plauderforum
von Joost Fr 12 Jul 2024 - 6:34

» [Invision] User Style Änderung - Code geht nicht
von Skouliki Do 11 Jul 2024 - 10:03

» [PunBB] Forum aufsplitten/teilen - ist das möglich?
von Joost Mi 10 Jul 2024 - 4:46

» Technische Wartung in der Zentrale: Montag 1 Juli, und Montag 8 Juli
von Joost Mo 24 Jun 2024 - 4:20

» [phpBB2] Mystic - new beginning RPG
von Raine Kamiya Fr 21 Jun 2024 - 7:52

» Neue Mitarbeiter gesucht
von Joost Fr 21 Jun 2024 - 7:26

» Lange Ladezeiten
von Skouliki Mi 19 Jun 2024 - 6:35

» Gründer E-Mailadresse ändern
von Skouliki Do 6 Jun 2024 - 23:49

» Nach Wartung Datenbankfehler
von Joost So 2 Jun 2024 - 23:34

» Wartung geplant Montag, 3. Juni 2024
von Joost Sa 1 Jun 2024 - 19:04

» Anti-Spam-Prüfung bei Mitgliedern
von Skouliki So 12 Mai 2024 - 5:10

» Die Heidekriger (WaCa) mit Punktesystem
von Rama So 21 Apr 2024 - 7:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Di 9 Apr 2024 - 1:03

» [AwsomeBB] LogIn Farbe Weiß auf weiß
von Skouliki Sa 30 März 2024 - 9:14

» kann man noch Blogs hier erstellen?
von Joost Mi 27 März 2024 - 6:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 0:54

[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 Empty [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum

Beitrag von inde So 11 Dez 2016 - 11:00

[Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Tutori12
Verschiedene Styles per Wahlschalter im Forum
[Alle Versionen]
[Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Tutori10
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.


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

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:
Variante B:


Anleitung Teil 4

Das Script wurde fertig gestellt. Nach dem Absenden kopiere Dir die Adresse Deines Scriptes.
[Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Java10
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. 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!

[Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum Tutori13
avatar
inde
Admin a.D.
Admin a.D.

Männlich Beiträge : 5658
Anmeldedatum : 20.10.11
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

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