Nero - Kategorien gleich darstellen

Hallo liebe Liebenden,

ich habe mal wieder eine Frage bzw. Bitte um den Stil "Nero" den ich für die meisten Anwendungen (Apps) anpassen möchte. Der Marktplatz (VieCode) und die Linkliste (easyLink) sowie das Forum sehen schon mal jetzt gleich aus was die Kategorien betrifft. Nun würde ich gerne die Kategorien des FAQ-System von KittBlog anpassen. Hierbei komme ich leider, trotz der 3 Codevorlagen, einfach nicht weiter. Ich weiß leider nicht ob Tom das FAQ-System kennt bzw. eine Lizenz hat um sich das ansehen zu können. KittBlog hat wahrscheinlich (ich weiß es nicht) den Stil "Nero" nicht auf dem Schirm.

Worum es geht...

Die Kategorien im Forum und anderen Apps sehen so aus:

Die Kategorien im FAQ-System (Häufig gestellte Fragen) sehen leider noch so aus:

Hat jemand vielleicht den Stil installiert und das FAQ-System bereits schon angepasst und könnte mir seinen CSS-Code geben? Oder kannst du ( Tom) mir dabei vielleicht behilflich sein? Mein Dank wird euch immer gewiss sein und immer hinter euch her laufen..

Ja, fast..

Ich habe das mal ausprobiert..

.tabularBox.tabularBoxTitle > header > h2 > a {
    display:inline-flex;
    background-color: $wcfTabularBoxHeadline;
    padding: 5px 10px;
    color: $wcfContentBackground;
    font-size: 16px;
}
.tabularBoxTitle > header > h2 .jsCollapsible {
    margin-right: 0;
}
.tabularBox.tabularBoxTitle > header > h2 {
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
}
.tabularBox.tabularBoxTitle > header a {
    flex: none;
    background-color: $wcfTabularBoxHeadline;
    padding: 5px 10px;
    color: $wcfContentBackground;
    font-size: 16px;
}

Doch damit springt das "Auf- und Zuklappen" Button einfach nicht nach Rechts. Es bleibt stur da stehen..

Hi Tom,

Ich habe diesen Code eingesetzt. Sieht auch schon fast so aus, wie er aussehen sollte...

/* ====== FAQ: Alles ======= */
.faqBox.tabularBox.tabularBoxTitle > header > h2 {
    display: flex;
}
.tabularBoxTitle.tabularBox > header > h2 > a {    
        border-top-left-radius: 5px;    
        border-top-right-radius: 5px;
}
.tabularBox.tabularBoxTitle > header > h2 > a {
    display:inline-flex;
    background-color: $wcfTabularBoxHeadline;
    padding: 5px 10px;
    color: $wcfContentBackground;
    font-size: 16px;
}
.tabularBoxTitle > header > h2 .jsCollapsible {
    margin-right: 0;
}
.tabularBox.tabularBoxTitle > header > h2 {
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
}
.tabularBox.tabularBoxTitle > header a {
    flex: none;
    background-color: $wcfTabularBoxHeadline;
    padding: 5px 10px;
    color: $wcfContentBackground;
    font-size: 16px;
}
.faqQuestion .fa-chevron-right::before {
    content: "\f054";
    color: rgba(240, 130, 50, 1);
}
.faqQuestion .fa-chevron-down::before {
    content: "\f078";
    color: rgba(240, 130, 50, 1);
}
.faqQuestion .faqAnswer {
    margin-top: 15px;
}
.faqAnswer img {
    background-color: rgba(252, 246, 242, 1);
    border: 2px solid rgba(250, 231, 218, 1);    
    padding: 1px;
}
.faqQuestion > h3 > a:not(.pointer) {
    font-weight: 700;
}

Wenn du nun ganz Rechts schaust, werden die Pfeile für das Auf- und Zuklappen durch den Hintergrund verdeckt. Hast du noch einen Rat wie der Hintergrund auf Weiß (#ffffff - $wcfContentBackground) noch gelegt werden kann? Ich Blicke da auch nicht durch was Black Rider das gebaut hat.

P.S.: Wenn du möchtest, lade ich dich gerne zum aktuellen Projekt ein. Es ist zwar im Wartungsmodus, aber kann dich gerne Vor-Ab rein lassen.

Hallo Tom,

Vielen Vielen Dank!

Mit dem CSS-Code aus #6 funktioniert es PERFEKT! Das ist echt Sagenhaft wie du das immer schaffst und du hier den Benutzern hilfst. Meine spontane kleine Anerkennung hast du hoffentlich erhalten.