Beiträge von marc-andree

marc-andree · 5. Juni 2014

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.

CSS

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


#tplBoardList .wbbCategory[data-board-id="3"] > header {
    background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
 height: 350px;
 padding: 0px;
}
#tplBoardList .wbbCategory[data-board-id="4"] > header {
background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
height: 350px;
padding: 0px;
}
#tplBoardList .wbbCategory[data-board-id="94"] > header {
background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
height: 350px;
padding: 0px;
}
#tplBoardList .wbbCategory[data-board-id="95"] > header {
background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
height: 350px;
padding: 0px;
}
#tplBoardList .wbbCategory[data-board-id="6"] > header {
background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
height: 350px;
padding: 0px;
}
#tplBoardList .wbbCategory[data-board-id="5"] > header {
background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
height: 350px;
padding: 0px;
}


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


#tplBoard .wbbCategory[data-board-id="15"] > header {
background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
height: 350px;
padding: 0px;
}
#tplBoard .wbbCategory[data-board-id="20"] > header {
background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
height: 350px;
padding: 0px;
}
#tplBoard .wbbCategory[data-board-id="54"] > header {
background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
height: 350px;
padding: 0px;
}
#tplBoard .wbbCategory[data-board-id="57"] > header {
background: url('@{style_image_path}/kategorien/banner_neutral.png') no-repeat scroll right center #000000;
height: 350px;
padding: 0px;
}

Alles anzeigen

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.

marc-andree · 5. Juni 2014

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.

Code

var unreadCount;
    var $wbbParentCategories = $("#tplBoardList .wbbDepth1");    


    $wbbParentCategories.removeClass("wbbCollapsibleCategory");
    $wbbParentCategories.each(function(k, v) {
        unreadCount = 0;
        var $category = $(v);


        $category.find(".badge:not(.label)").each(function(i, e) {
            unreadCount += parseInt($(e).text());
        });

        if (unreadCount > 0) $category.find("header a").first().after("<span class='badge badgeUpdate'>" + unreadCount + "</span>")
    });

Alles anzeigen

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.

marc-andree · 21. Februar 2014

Hallo,

Zitat von shisha559

Den Voverom Stil hab ich hier schon gekauft in der Hoffnung das der LH Orange auch dabei ist wie im Link zu sehen. War er aber nicht, daher ja auch meine Frage wo man ihn kaufen kann.

die orange Variante ist doch aber in dem Paket drin. Ich würde mich da nicht so auf das "LH" versteifen.

Ich habe mir den Stil mal angeschaut und mit dem im Showroom auch vorhandenem "brown" verglichen und die sind identisch.

Einziger Unterschied ist halt die Farbe und das im LH schon ein Banner eingebaut ist. Wenn Du das raus nimmst sieht er aus wie der Braune.

Beiträge von marc-andree

Kategorien als Kacheln darstellen

Kategorien als Kacheln darstellen

Wo kann ich diesen Stil kaufen?

cls-design

Informationen

Demoinstallationen

Hilfe