Kategorien als Kacheln darstellen

    Hallo,


    ich würde gerne die Kategorien und die externen Verweise auf der Seite "BoardList" als Kacheln darstellen.


    Versucht habe ich es bislang mit dem Code von Okan Esen versucht.



    und


    CSS
    #tplBoardList .wbbCategory { display: inline-block; width: 49%; vertical-align: top; }
#tplBoardList .wbbDepth1 > header + ul, .wbbBoardList .wbbDepth1 .collapsibleButton { display: none; }


    Der Quellcode wird dabei als Footer-Code unter Optionen/Allgemein eingefügt.


    Das ist auch soweit schon ganz OK, aber noch nicht ganz so wie ich es gerne hätte.


    1. Problem: Die Kacheln sind nur Zeilen und ich hätte sie gerne als Quadratische Kacheln(sprich die Höhe der Kacheln müsste angepasst werden.
    2. Problem: Es werden nur in der obersten Ebene die Kategorien als Kacheln angezeigt nicht mehr in der zweiten Ebene.
    3. Problem: Die externen Verweise werden noch nicht berücksichtigt.


    Gibt es auch eine Möglichkeit die Kacheln mit einem Foto als BG zu versehen?


    So, das war es glaube ich erst einmal. :S

    • Teambeitrag

    Hi,


    ein paar Details wären schon noch nett, oder auch ein Link zu einer Live-Ansicht.


    Würde dir zudem raten hier eher im allgemeinen Bereich oder gar beim Ersteller des Codes nachzufragen, da hier nur wenige User Zugriff haben und es doch eher wenig mit dem Stil selber zu tun hat.


    Mfg Cr@@gle

    Hallo,


    ich möchte es ja gerne selber schaffen, brauche aber wohl etwas Unterstützung.


    Bin gerade auch schon ein ganzes Stück weiter gekommen, denn ich habe die Kachelgröße mittlerweile angepasst.


    Auch in der zweiten Ebene habe ich jetzt die Optik auf Kacheln umgestellt.
    Die Graphiken für die Kacheln muss ich zwar erst noch bauen, aber hinzugefügt sind sie schon(muss dann nur die Links korrigieren).


    Den Code dafür habe ich zwar wieder nicht selbst geschrieben, sondern im WoltLabForum gefunden, aber das ist ja auch schon etwas.
    Die Anpassung für die zweite Ebene ist aber von mir.


    Derzeit ist es noch doof, dass nur die Schrift als Link funktioniert und nicht der ganze Button, darüber hinaus muss ich das noch für die externen Verweise umsetzen. ;)


    So sieht derzeit meine CSS-Deklaration aus.


    Ich hoffe, der Code ist so in Ordnung.


    EDIT: Mittlerweile habe ich auch die Fläche des Links auf die ganze Kachel gelegt.
    Etwas unsicher bin ich mir bei den externen Verweisen,glaube aber,dass die ebenfalls über

    Code
    #tplBoard .wbbCategory[data-board-id="XX"] > header

    anspreche.


    Du kannst den Thread gerne in den allgemeinen Bereich verschieben.

    • Teambeitrag

    Hi,


    ich verschiebe das Thema wirklich mal in den öffentlichen Bereich, da du dir doch auch sehr viel Mühe gibst und es eventuell auch für andere User von Bedeutung sein könnte? :)


    Zu deiner Frage mit externen Forenlinks: die haben auch eine BoardID, zusätzlich steht auch noch die CSS-Klasse .wbbExternalLink zum separaten Ansprechen zur Verfügung.


    Mfg Cr@@gle

    Hallo,


    vielen Dank für die schnelle Antwort. :thumbsup:


    Funktioniert prima und war super easy(hätte ich auch alleine drauf kommen können/müssen), ich habe einfach nur das

    CSS
    border: 0px !important;

    an den jeweiligen Code angehängt und weg war der Rahmen. :D


    Sieht jetzt für jede Kategorie so aus:

    CSS
    #tplBoardList .wbbCategory[data-board-id="6"] > header {
background: url('@{style_image_path}/kategorien/filmforum_300.jpg') no-repeat scroll  center !important;
height: 300px;
padding: 0px;
border: 0px !important;

    Hallo,


    So sieht es derzeit aus:



    Folgende Codes nutze ich dafür:



    Dann braucht man noch folgendes JavaScript, welches im ACP unter Optionen/Allgemein/Seite/Footer-Code eingefügt wird.



    Verbesserungshinweise und Hinweise auf Fehler sind durchaus erwünscht.