[ModernBB] Header der Themenliste

URL-Adresse des Forums: https://thestorytellers.forumieren.de
Rang/Funktion im Forum: Admin
Forenversion: ModernBB
Browser: Firefox
Persönliches CSS(Ja/Nein): JA
Templateänderungen(Ja/Nein): JA

Hallo liebes Forumieren-Team,

bisher habe ich es immer geschafft die Lösungen für meine Probleme/Anliegen mittels eurer Suchfunktion zu finden.
Aber jetzt brauche ich doch mal eure direkte Hilfe, da ich kein Thema gefunden habe, dass meiner Frage entspricht.

Ich habe mittels dem Tutorial hier von Inde meine Kategorien separat gestaltet und es dann auch hinbekommen, die jeweiligen Foren damit einzeln zu gestalten.
https://hilfe.forumieren.com/t43156-tutorial-unterschiedliche-kategorien-auf-dem-index-phpbb3-modernbb

Meine Frage ist nun: ist es möglich den Header der Themenlisten in den jeweiligen Foren/Kategorien auch einzeln anzusprechen? (siehe unten gelb umrandet).


Ich habe es schon versucht mittels diesem CSS-Eintrag, allerdings hat das leider nicht geklappt.

Code:

.forum1 .forumbg .header

bzw.

Code:

.cat1 .forumbg .header

Vielen Dank schon mal für Eure Mühe. Ihr macht echt 'nen tollen Job.

Hallo @Kyra,

ja, das ist möglich. Schau mal, so machen wir es hier im Support-Forum:


Wir haben mit

Code: <b id="deineID">Dein Kategorie-Name</b>

es hinbekommen, dass man die Kategorien auch so dann einzeln ansprechen kann.

Beste Grüße
Bigtuber

Hallo Bigtuber,

vielen Dank für deine schnelle Antwort. Ich probiere das dann mal aus und melde mich dann wieder.

Grüße

Edit: also leider, hatte es nicht den gewünschten Effekt. Ich habe den Code von dir in meine erste Kategorie eingetragen und danach mein CSS für die entsprechende Kategorie z.B. von

Code:

.cat1 .forumbg .header

auf

Code:

#cat1 .forumbg .header

geändert (weil jetzt eine id und keine class mehr).
Vielleicht habe ich mein Problem auch nicht genau erklärt:

Es geht mir nicht um die Kategorien-Header sondern um die Themen-Header (topiclist topics). Die Kategorien habe ich ja schon einzeln angesprochen.

Wenn es nicht geht oder es zu kompliziert ist, dann ist das auch ok.


Danke nochmal für deine Hilfe.

Oh, ja. Das könnte schwierig werden. Ich frage mal bei den internationalen Kollegen nach, ob sie eine Idee haben.

Beste Grüße
Bigtuber

Hallo @Bigtuber,

Vielen Dank, das ist sehr nett von dir.

Hallo @Kyra,

Erstelle eine neue JavaScript-Seite mit der Platzierung in den Unteforen und setze Folgendes ein:

Code:

(function($) {
    'use strict';

    $(function() {

        var $themen = $('.topiclist.topics li .icon > dt:contains(\'Themen\')');

        if (!$themen.length) return;

        $themen
            .parent()
            .addClass('forabg-themen');

    });
})(jQuery);

im CSS

Code:

.forabg-themen {
    background-color: tomato;
}

Hallo @pedxz und @Bigtuber,

also es hat insoweit funktioniert, dass der Themen-Header jetzt eingefärbt ist.
Allerdings ist er immer noch überall gleich eingefärbt.

Muss ich in dem Javacode unterschiedliche classes definieren?
Also für den Themen-Header innerhalb Kategorie 1

Code:

(function($) {
    'use strict';

    $(function() {

        var $themen = $('.topiclist.topics li .icon > dt:contains(\'Themen\')');

        if (!$themen.length) return;

        $themen
            .parent()
            .addClass('forabg-themen1');

    });
})(jQuery);

Für den Header innerhalb Kategorie 2 etc.

Code:

(function($) {
    'use strict';

    $(function() {

        var $themen = $('.topiclist.topics li .icon > dt:contains(\'Themen\')');

        if (!$themen.length) return;

        $themen
            .parent()
            .addClass('forabg-themen2');

    });
})(jQuery);

Also hier sollte der Themenheader auch türkis sein


Und hier sollte er auch beige sein


Vielleicht ist es jetzt klarer?
Wie gesagt, wenn es zu kompliziert ist, dann ist es zwar schade aber ok. Alles hat seine Grenzen.

Danke euch.

Der Code fügt nur eine Klasse in "Themen" hinzu!

Ändern Sie den obigen Code in:

Code:

(function($) {
    'use strict';
 
    var header = [{
        forum: 1,
        class: 'forabg-themen'
    }, {
        forum: 3,
        class: 'forabg-themen2'
    } /* Der letzte hat kein Komma */
    ];
 
    $(function() {
 
        $.each(header, function(index, header) {
 
          if(!header.forum || !header.class) return;
            
          var $breadcrumb = $('.sub-header-path').find('a[href^="/f' + header.forum + '-"]');
          var $themen = $('.topiclist.topics li .icon > dt:contains(\'Themen\')');
          
          if (!$breadcrumb.length) return;
          if (!$themen.length) return;
            
            $themen
                .parent()
                .addClass(header.class);
 
        });
 
    });
})(jQuery);

Die Konfiguration:

Code:

var header = [{
        forum: 1, /* Hier geben Sie die Forum-ID ein */
        class: 'forabg-themen' /* und hier die Klasse */
    }, {
        forum: 3,
        class: 'forabg-themen2'
    } /* Der letzte hat kein Komma */
    ];

SUPER!
Vielen Dank, das ist genau das was ich wollte.
Ihr seid spitze!
kann geschlossen werden.