Das Forum der Foren
Willkommen im offiziellen Support-Forum von Forumieren! [Tutorial] Unterschiedliche Kategorien auf dem Index [phpBB3] / [ModernBB] Icon_king

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind, loggen Sie sich ein.

[Tutorial] Unterschiedliche Kategorien auf dem Index [phpBB3] / [ModernBB] Icons-100

Erstellen Sie ein kostenloses Forum wie dieses hier.
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
» [#16375] "Geister-Newsletter" von einem längst verlassenen Forum
von aLonelyGamer Heute um 20:05

» Passwort & Gründeradresse vergessen
von Seremir Do 2 Apr 2020 - 19:18

» [#16316] [phpBB2] Headerlogo - falscher Pfad im Forum
von Tha_Ira Do 2 Apr 2020 - 17:41

» [phpBB3] Emailbenachrichtigung bei Antwort deaktivieren
von Bigtuber Di 31 März 2020 - 8:43

» Black Heaven - Wo Licht ist, ist auch Schatten - Fantasy - FSK 16+
von Black Heaven Mo 30 März 2020 - 20:40

» Admin-Zugangsdaten vergessen
von Bigtuber Mo 30 März 2020 - 4:51

» Öffentlich sichtbare Liste der Mitglieder soll nicht mehr für Gäste sichtbar sei
von mauleselin So 29 März 2020 - 8:16

» Passwort zum Forum vergessen
von Bigtuber Sa 28 März 2020 - 23:11

» Forum baut Seite nicht auf, nur noch Header ist zu sehn.
von camelffm Mi 25 März 2020 - 13:43

» Missbrauchsmeldung mit Zahlungsaufforderung für Domain
von Bigtuber Mi 25 März 2020 - 0:12

» [phpBB3] Umrandung um jeden Beitrag hinzufügen
von Bigtuber Di 24 März 2020 - 23:53

» [phpBB3] Keine Registrierung von Mitgliedern möglich
von EliteGamer Sa 21 März 2020 - 22:28

» [#16248][phpBB2] Fehler beim Einsetzen des Guthabens
von Bigtuber Fr 13 März 2020 - 11:01

» Forum nicht erreichbar/ nicht sicher
von goldhauch Fr 13 März 2020 - 10:33

» [phpBB3] Chatbox - Chatinhalt wird nicht angezeigt
von Bigtuber Mo 9 März 2020 - 11:42

» [phpBB3] Rahmen um den Footer
von *Christina* So 8 März 2020 - 10:13

» [phpBB3] Überschrift des Moduls "Neueste Themen"
von *Christina* So 8 März 2020 - 10:02

» Bitte um Gründerwechsel
von Bigtuber Sa 7 März 2020 - 0:06

[Tutorial] Unterschiedliche Kategorien auf dem Index [phpBB3] / [ModernBB]

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Tutorial [Tutorial] Unterschiedliche Kategorien auf dem Index [phpBB3] / [ModernBB]

Beitrag von inde am Sa 9 Sep 2017 - 17:06

Unterschiedliche Kategorien auf dem Index
[phpBB3] / [ModernBB]
TUTORIAL

Hallo liebe Administratoren, Smile

da bereits nach einer Möglichkeit gefragt wurde die Kategorien auf der Startseite unterschiedlich zu gestalten, möchte ich euch heute eine Möglichkeit für die Versionen [phpBB3] & [ModernBB] vorstellen.

Für die anderen Versionen müsste man unter diesen Bedingungen wahrscheinlich noch eine zusätzliche Deklaration (Klasse) über die Templates einbinden, was zeitlich gesehen unseren Support hier bei weitem übersteigen würde. Deshalb habe ich mich auf die beiden modernen Versionen beschränkt, danke für euer Verständnis.

Hinweis:
Das nachfolgende Tutorial ist nicht für Einsteiger gedacht! Sondern für erfahrene Nutzer die über entsprechende Kenntnisse im Umgang mit -CSS3 besitzen und auch verstehen etwas alleine umzusetzen.

Arbeitet bitte bei der Umsetzung des Tutorials sorgfältig! Unser Team stellt euch zwar die Tutorials zur Verfügung, jedoch bedeutet dies keinesfalls, dass es dafür auch eine Unterstützung im Support-Bereich gibt!

Einleitung

In diesem Tutorial möchte ich euch lediglich eine Möglichkeit aufzeigen und stelle euch auch nur einige mit Kommentaren versehene Codes zur Verfügung. In den Codebeispielen habe ich mich auf 4 Kategorien beschränkt. Ein Ausbau auf weitere Kategorien erfolgt im Script wie auch im CSS nach dem selben Muster und sollte kein Problem darstellen. Unterschiede bei den beiden Versionen gibt es nur bei den CSS-Codes. Achtet deshalb darauf den richtigen CSS-Code für eure Version zu benutzen!
Bei der weiteren Gestaltung ist jedoch eure Fantasie gefragt, sei es die Gestaltung mit einer Grafik oder aber auch anderen Farben ö.ä.. Auch wurden von mir längst nicht alle möglichen Deklarationen in den CSS-Codes aufgeführt.


Für die Umsetzung der nachfolgenden Beispiele für die beiden Versionen müssen...

  1. die Namen der entsprechenden Kategorien verändert werden.
  2. ein Script in die "Javascript Codes Verwaltung" eingetragen werden.
  3. entsprechend der Version CSS-Codes hinzugefügt werden.

Beispiel phpBB3:
[Tutorial] Unterschiedliche Kategorien auf dem Index [phpBB3] / [ModernBB] Variou10
Beispiel ModernBB:
[Tutorial] Unterschiedliche Kategorien auf dem Index [phpBB3] / [ModernBB] Variou11


Namen der Kategorien verändern


  1. Geht in den...Administrations-Bereich > Allgemeines > Forum > Foren und Kategorien > Foren und Kategorien und öffnet die erste Kategorie die ihr bearbeiten möchtet über einen Klick auf das orangefarbene Zahnrad. zahnrad
    [Tutorial] Unterschiedliche Kategorien auf dem Index [phpBB3] / [ModernBB] Variou12
  2. Kopiert euch den nachfolgenden Code und vergebt den Namen der Kategorie nach folgendem Muster.
    Code:
    Kategoriename<img src="https://illiweb.com/fa/empty.gif" title="cat1" />
    Kategoriename<img src="https://illiweb.com/fa/empty.gif" title="cat1" />
  3. Tragt dazu bei Kategoriename, den Namen eurer Kategorie ein, setzt den Code bei "Name der Kategorie" ein und klickt dann auf "ABSENDEN" Absenden
  4. Wiederholt die Schritte für die weiteren Kategorien und erhöht den Zähler hinter "cat" im Wert jeweils um 1. Beispiel: 2, 3, 4 usw.

Tipps zum Erstellen von Kategorien und Foren findet ihr in unserer Anleitung...
Kategorien, Foren, Unterforen erstellen - Befugnisse und Ansichten einstellen


Javascript Code erstellen


  1. Geht in den Administrations-Bereich > Module > HTML und JAVASCRIPT > Javascript Codes Verwaltung
  2. Aktiviert die Javascript-Code Verwaltung und Klickt auf "ABSENDEN". Absenden
  3. Klickt auf den Button "EIN NEUES JAVASCRIPT ERSTELLEN" und erstellt das Script mit den nachfolgenden Einstellungen:
  4. Titel: Kategorie-Selektion
  5. Platzierung: Auf der Startseite
  6. Javascript Code: Fügt an dieser Stelle den nachfolgenden Beispiel-Code ein.
    Code:
    /* Kategorie 1 */
    $(function(){$(".forabg:has(img[title*='cat1'])").addClass("cat1")});
    /* Kategorie 2 */
    $(function(){$(".forabg:has(img[title*='cat2'])").addClass("cat2")});
    /* Kategorie 3 */
    $(function(){$(".forabg:has(img[title*='cat3'])").addClass("cat3")});
    /* Kategorie 4*/
    $(function(){$(".forabg:has(img[title*='cat4'])").addClass("cat4")});
  7. Klickt dann auf den Button "BESTÄTIGEN". Bestätigen

Wir ihr sicherlich im Code erkennen könnt, sollte eine Erweiterung problemlos sein. Ach könnt ihr innerhalb der Kommentare den Kategorienamen in eure Kategorienamen ersetzen.


CSS-Codes einsetzen

Setzt jetzt den nachfolgenden CSS-Code für eure Version des Forums in das CSS eures Forums ein.


Verändere das Aussehen des Forums durch hinzufügen eines CSS-Codes.
Wie mache ich einen Eintrag in das CSS?



  • Für die Version phpBB3

    BB3
    Code:
    /*Beginn - Aussehen der Kategorien auf dem Index - phpBB3*/
    /*Entfernt die störende Rahmenlinie Links & Hover*/
    li.row dd.dterm, li.row dd.dterm:hover {
        border-color: rgba(0, 0, 0, 0) !important;
    }
    /*--Kategorie 1--*/
    /*Hintergrund bzw. Rahmen & Rahmenfarbe*/
    .forabg.cat1 {
        background: #fff none repeat scroll 0 0;
        border-color: #07b;
    }
    /*Hintergrund Header*/
    .cat1 li.header {
    background: #07b;
    }
    /*Kategoriename & Themen etc.*/
    .cat1 .table-title h2, .cat1 li.header dd {
    color: #000;
    }
    /*Hintergrund der Foren & Hover|Rahmenfarbe der Foren oben & Unten|Schriftfarbe*/
    .cat1 ul.forums li.row, .cat1 ul.forums li.row:hover {
        background: #ddd none repeat scroll 0 0;
        border-color: #d70;
        color: #000;
    }
    /*Rahmenlinien Themen etc. & Hover*/
    .cat1 ul.forums dd, .cat1 ul.forums dd:hover {
    border-color: #07b;
    }
    /*Forenlink*/
    .cat1 a.forumtitle {
        color: #07b;
    }
    /*Forenlink:Hover*/
    .cat1 a.forumtitle:hover {
        color: #d70;
    }

    /*--Kategorie 2--*/
    /*Hintergrund bzw. Rahmen & Rahmenfarbe*/
    .forabg.cat2 {
        background: #fff none repeat scroll 0 0;
        border-color: #d70;
    }
    /*Hintergrund Header*/
    .cat2 li.header {
    background: #d70;
    }
    /*Kategoriename & Themen etc.*/
    .cat2 .table-title h2, .cat2 li.header dd {
    color: #fff;
    }
    /*Hintergrund der Foren & Hover|Rahmenfarbe der Foren oben & Unten|Schriftfarbe*/
    .cat2 ul.forums li.row, .cat2 ul.forums li.row:hover {
        background: #ccc none repeat scroll 0 0;
        border-color: #07b;
        color: #000;
    }
    /*Rahmenlinien Themen etc. & Hover*/
    .cat2 ul.forums dd, .cat2 ul.forums dd:hover {
    border-color: #d70;
    }
    /*Forenlink*/
    .cat2 a.forumtitle {
        color: #d70;
    }
    /*Forenlink:Hover*/
    .cat2 a.forumtitle:hover {
        color: #07b;
    }

    /*--Kategorie 3--*/
    /*Hintergrund bzw. Rahmen & Rahmenfarbe*/
    .forabg.cat3 {
        background: #fff none repeat scroll 0 0;
        border-color: #d0c;
    }
    /*Hintergrund Header*/
    .cat3 li.header {
    background: #d0c;
    }
    /*Kategoriename & Themen etc.*/
    .cat3 .table-title h2, .cat3 li.header dd {
    color: #000;
    }
    /*Hintergrund der Foren & Hover|Rahmenfarbe der Foren oben & Unten|Schriftfarbe*/
    .cat3 ul.forums li.row, .cat3 ul.forums li.row:hover {
        background: #bbb none repeat scroll 0 0;
        border-color: #060;
        color: #fff;
    }
    /*Rahmenlinien Themen etc. & Hover*/
    .cat3 ul.forums dd, .cat3 ul.forums dd:hover {
    border-color: #d0c;
    }
    /*Forenlink*/
    .cat3 a.forumtitle {
        color: #d0c;
    }
    /*Forenlink:Hover*/
    .cat3 a.forumtitle:hover {
        color: #d70;
    }

    /*--Kategorie 4--*/
    /*Hintergrund bzw. Rahmen & Rahmenfarbe*/
    .forabg.cat4 {
        background: #fff none repeat scroll 0 0;
        border-color: #060;
    }
    /*Hintergrund Header*/
    .cat4 li.header {
    background: #060;
    }
    /*Kategoriename & Themen etc.*/
    .cat4 .table-title h2, .cat4 li.header dd {
    color: #fff;
    }
    /*Hintergrund der Foren & Hover|Rahmenfarbe der Foren oben & Unten|Schriftfarbe*/
    .cat4 ul.forums li.row, .cat4 ul.forums li.row:hover {
        background: #aaa none repeat scroll 0 0;
        border-color: #d70;
        color: #fff;
    }
    /*Rahmenlinien Themen etc. & Hover*/
    .cat4 ul.forums dd, .cat4 ul.forums dd:hover {
    border-color: #060;
    }
    /*Forenlink*/
    .cat4 a.forumtitle {
        color: #060;
    }
    /*Forenlink:Hover*/
    .cat4 a.forumtitle:hover {
        color: #d70;
    }
    /*Ende - Aussehen der Kategorien auf dem Index - phpBB3*/
  • Für die Version ModernBB

    ModernBB
    Code:
    /*Beginn - Aussehen der Kategorien auf dem Index - ModernBB*/
    /*--Kategorie 1--*/
    /*Rahmen um die Kategorie*/
    .cat1 {
        border: 1px solid #07b;
    }
    /*Kategorieheader*/
    .cat1 .header {
        background: #07b;
    }
    /*Kategoriename, Themen, Beiträge etc. und Schalter*/
    .cat1 h2, .cat1 li.header dd, .cat1 li.header dt, .cat1 .ion-android-remove-circle:before, .cat1 .ion-android-add-circle:before {
        color: #000;
    }
    /*Hintergrund der Foren und Schriftfarbe im Forum*/
    .cat1 li.row {
        background: #ddd;
        color:#000;
    }
    /*Forenlink*/
    .cat1 a.forumtitle {
        color: #07b;
    }
    /*Forenlink:Hover*/
    .cat1 a.forumtitle:hover {
        color: #d70;
    }

    /*--Kategorie 2--*/
    /*Rahmen um die Kategorie*/
    .cat2 {
        border: 1px solid #d70;
    }
    /*Kategorieheader*/
    .cat2 .header {
        background: #d70;
    }
    /*Kategoriename, Themen, Beiträge etc. und Schalter*/
    .cat2 h2, .cat2 li.header dd, .cat2 li.header dt, .cat2 .ion-android-remove-circle:before, .cat2 .ion-android-add-circle:before {
        color: #fff;
    }
    /*Hintergrund der Foren und Schriftfarbe im Forum*/
    .cat2 li.row {
        background: #ccc;
        color:#000;
    }
    /*Forenlink*/
    .cat2 a.forumtitle {
        color: #d70;
    }
    /*Forenlink:Hover*/
    .cat2 a.forumtitle:hover {
        color: #07b;
    }

    /*--Kategorie 3--*/
    /*Rahmen um die Kategorie*/
    .cat3 {
        border: 1px solid #d0c;
    }
    /*Kategorieheader*/
    .cat3 .header {
        background: #d0c;
    }
    /*Kategoriename, Themen, Beiträge etc. und Schalter*/
    .cat3 h2, .cat3 li.header dd, .cat3 li.header dt, .cat3 .ion-android-remove-circle:before, .cat3 .ion-android-add-circle:before {
        color: #000;
    }
    /*Hintergrund der Foren und Schriftfarbe im Forum*/
    .cat3 li.row {
        background: #bbb;
        color:#fff;
    }
    /*Forenlink*/
    .cat3 a.forumtitle {
        color: #d0c;
    }
    /*Forenlink:Hover*/
    .cat3 a.forumtitle:hover {
        color: #d70;
    }

    /*--Kategorie 4--*/
    /*Rahmen um die Kategorie*/
    .cat4 {
        border: 1px solid #060;
    }
    /*Kategorieheader*/
    .cat4 .header {
        background: #060;
    }
    /*Kategoriename, Themen, Beiträge etc. und Schalter*/
    .cat4 h2, .cat4 li.header dd, .cat4 li.header dt, .cat4 .ion-android-remove-circle:before, .cat4 .ion-android-add-circle:before {
        color: #fff;
    }
    /*Hintergrund der Foren und Schriftfarbe im Forum*/
    .cat4 li.row {
        background: #aaa;
        color:#fff;
    }
    /*Forenlink*/
    .cat4 a.forumtitle {
        color: #060;
    }
    /*Forenlink:Hover*/
    .cat4 a.forumtitle:hover {
        color: #d70;
    }
    /*Ende - Aussehen der Kategorien auf dem Index - ModernBB*/

Tipp:
Verändert nun die CSS-Codes um diese an euer Forum individuell anzupassen. Auch empfiehlt es sich die Umsetzung zunächst in einem Testforum o.ä. zu erproben.


Wir hoffen, euch gefällt dieses Tutorial! Smile

Euer Team von Forumieren king
avatar
inde
Admin a.D.
Admin a.D.

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

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