Nichts ist so quälend wie die Suche nach den richten CSS-Codes um alle weiteren Anwendungen wie das WoltLab Suite Forum aussehen zu lassen. Ich habe dem lieben Tom viele Fragen gestellt um Kategorien und Icons so darstellen zu können wie ich es im Forum habe. Das war für ihn sicher nicht einfach, auch wenn es oft so aussieht als würde er die CSS-Codes nur so aus dem Ärmel schütteln. Damit aber alle etwas davon haben, möchte ich die Code-Blöcke euch hier zur Verfügung stellen. Nero ist ein kostenloser Stil und von daher ist es jedem selbst überlassen ob man die Codes nutzen möchte oder nicht.
FAQ-System (KittBlog)
CSS
/* ====== FAQ: Alles ======= */
.faqBox.tabularBox.tabularBoxTitle > header > h2 {
display: flex;
}
.tabularBoxTitle.tabularBox > header > h2 > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.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:not(.jsCollapsible) {
flex: none;
background-color: $wcfTabularBoxHeadline;
padding: 5px 10px;
color: $wcfContentBackground;
font-size: 16px;
display:inline-flex;
}
.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;
}easyLink
CSS
/* ====== easyLink: Linkliste ======= */
.easylinkArea > ul {
border-left: 1px solid $wcfContentBorderInner;
border-right: 1px solid $wcfContentBorderInner;
}
.easylinkArea.easylinkCollapsibleCategory > header > h2 {
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
}
.easylinkArea.easylinkCollapsibleCategory > header > h2 > a {
flex: none;
background-color: $wcfTabularBoxHeadline;
padding: 5px 10px;
color: $wcfContentBackground;
font-size: 16px;
}
.easylinkArea.easylinkCollapsibleCategory > header > h2 + small {
background-color: $wcfTabularBoxHeadline;
padding: 1px 10px;
color: $wcfContentBackground;
margin-left: 0;
}
.easylinkArea.easylinkCollapsibleCategory > header > h2 > .collapsibleButton {
margin-right: 0px;
}
.easylinkArea.easylinkCollapsibleCategory > header > h2 > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.easylinkCategory .fa-link:before {
color: rgba(240, 130, 50, 1);
}Marktplatz (VieCode)
CSS
/* ====== Marktplatz: Alles ======= */
.marketplaceMainCategory > ul {
border-left: 1px solid $wcfContentBorderInner;
border-right: 1px solid $wcfContentBorderInner;
}
.marketplaceMainCategory.tabularBox > header > h2 {
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
}
.marketplaceMainCategory.tabularBox > header > h2 > a {
display:inline-flex;
background-color: $wcfTabularBoxHeadline;
padding: 5px 10px;
color: $wcfContentBackground;
font-size: 16px;
}
.marketplaceMainCategory.tabularBox > header > h2 + small {
background-color: $wcfTabularBoxHeadline;
padding: 1px 10px;
color: $wcfContentBackground;
margin-left: 0;
}
.marketplaceMainCategory.tabularBox > header > h2 > .collapsibleButton {
margin-right: 0px;
}
.marketplaceMainCategory.tabularBox > ul {
border-left: 1px solid $wcfContentBorderInner;
border-right: 1px solid $wcfContentBorderInner;
}
.marketplaceMainCategory.tabularBox > header > h2 > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.marketplaceCategory .fa-folder-o:before {
color: rgba(240, 130, 50, 1);
}
