Hallo,
ich hab mal ne Frage (und ich hoffe das ich hier richtig bin ^^). Ich entwickle derzeit einen Stil, und möchte den Forentitel sowie die Seitenbeschreibung, die in der Übersicht angezeift wird, ausblenden, aber nur bei diesem einen Stil. Ich denke mal, das man hier mit css arbeitet, un d da ich davon keine Ahnung habe (ich probiere immer rum und guck obs klappt :D), wollte ich mal eben fragen, ob jemand hierfür einen Codeschnipsel für mich hat. Wäre sehr nett 
Danke!
Liebe Grüße
Patrick
Na wenn du an einem Stil arbeitest dann mach das per CSS in den zusätzlichen Deklarationen des Stils.
.mainHeadline {display: none;}
Beachten das diese Anweisung die große Überschrift auf jeder Seite ausschaltet.
Wenn es nur auf dem "Index" (Forenübersicht) sein soll dann dieses:
#tplIndex .mainHeadline {display: none;}Supi danke
Ist das eigentlich hier der richtige Bereich für so Fragen? Ich hab da nämlich noch mehrere. Oder gibt es irgendwo ein Handbuch oder so etwas ähnliches, wo man sich mit css und möglichen Variablen vertraut machen kann?
Na wenn du an einem Stil arbeitest dann mach das per CSS in den zusätzlichen Deklarationen des Stils.
CSS.mainHeadline {display: none;}
Beachten das diese Anweisung die große Überschrift auf jeder Seite ausschaltet. […]
Wenn dir die Suchmaschinen lieb sind, dann würde ich das niemals über "display: none;" abschalten, denn dann ist die für Suchmaschinen wichtige zweite Hauptüberschrift weg (wird nichtmal mehr im Quelltext erzeugt)! Dann schon besser so:
.mainHeadline {height: 0;}
So ist die Überschrift zwar da, aber unsichtbar (ist auch barrierefreier).
Ist das eigentlich hier der richtige Bereich für so Fragen? […] Oder gibt es irgendwo ein Handbuch oder so etwas ähnliches, wo man sich mit css und möglichen Variablen vertraut machen kann?
Im Prinzip ist hier schon der korrekte Bereich. Es gibt keine Anleitung. Wer CSS kann, weiß was er tun muss. Die Standardeingaben sind nur für Anfänger gedacht. Wer mehr will, sollte sich CSS ansehen.
Aber besser bist du hier aufgehoben:
Fragen zu Anpassungen, Erweiterungen oder Plugins bitte in der WoltLab-Community (WCom) stellen. Hier im WoltLab Supportforum geht es nur direkt um Standardfunktionen unserer eigene Software. Du bist in der WCom bereits registriert, selbe Logindaten wie hier … 
wird nichtmal mehr im Quelltext erzeugt
Natürlich bleibt es im Quelltext. Seit wann können CSS Anweisungen denn statischen Quelltext bearbeiten / ausblenden Welche Suchmaschine das wie interpretiert sind halt immer nur Vermutungen, ich finde display:none und left:-9000px nehmen sich z.B. nix, wobei deine Variante sicher die empfehlenswertere ist da es "nicht so offentsichtlich ist" wenn man mit einem height arbeitet. Allerdings gibt es da wieder Browser die Probleme machen, je nachdem welche innenliegenden Elemente man hat
Natürlich bleibt es im Quelltext. Seit wann können CSS Anweisungen denn statischen Quelltext bearbeiten / ausblenden
Da hast du recht, ich wollte das eigentlich auchanders formulieren:
Also so: "display: block;" wirkt sich so aus, dass es wirkt als ob das HTML-Element nicht mehr im Quelltext enthalten wäre. Dadurch macht man die Seite weniger barrierefrei und Suchmaschinen können den versteckten Text auch nicht mehr indizieren. Also kontraproduktiv. Wir haben es aus diesen Gründen - wo es ging - vermieden, "display: none;" anzuwenden.
Welche Suchmaschine das wie interpretiert sind halt immer nur Vermutungen, ich finde display:none und left:-9000px nehmen sich z.B. nix, wobei deine Variante sicher die empfehlenswertere ist
Es ist keine Vermutung sondern jahrelange Erfahrung, unzählige von durchgelesenen Websites und allgemeine Diskussionen in Blogs und Foren von erstklassigen CSS-Codern.
Allerdings gibt es da wieder Browser die Probleme machen
Ich kennen keinen der da Probleme macht, sonst hätten wir diese Lösung nicht an so vielen Stellen in WBB usw. eingebaut.
---
P.S.: Wachert du hast deine Smileys abgeschaltet
Wenn es nicht das Standarddesign ist interessiert es die SuMas in dem Moment nicht da sie es ja "nicht zu gesicht bekommen" beim Besuch der Seite, andererseits achten SuMas nur Sekundär auf die CSS Angaben sondern primär auf den statischen Inhalt, also deinen "Code".
QuoteAlso so: "display: block;" wirkt sich so aus, dass es wirkt als ob das HTML-Element nicht mehr im Quelltext enthalten wäre. Dadurch macht man die Seite weniger barrierefrei und Suchmaschinen können den versteckten Text auch nicht mehr indizieren. Also kontraproduktiv. Wir haben es aus diesen Gründen - wo es ging - vermieden, "display: none;" anzuwenden.
Ich hab mit display:none zwar noch keine Unterschiede zu anderen Varianten festgestellt was SuMa Indizierung angeht, aber da ist halt wieder das Problem das man 1000 Leute fragt und 1000 Antworten bekommen
QuoteEs ist keine Vermutung sondern jahrelange Erfahrung, unzählige von durchgelesenen Websites und allgemeine Diskussionen in Blogs und Foren von erstklassigen CSS-Codern.
Natürlich gibt es Erfahrungen und Leute die sich jahrelang damit auseinandersetzen allerdings entwickelt sich der Markt täglich das wisst ihr ja nu auch, gerade wenns um die großen SuMas geht, nach jeder neuen PR Berechnung geht der Terz von vorne los Wenn du nach display:none und Suchmaschinenoptimierung googelst wirst du aber halt solche und solche Aussagen finden, von großen bekannten und kleinen Seiten. Leicht ist das halt leider nie. Was vor einem Jahr galt kannst du heute fast immer vergessen.
Eine der besten Quellen für solche Themen ist immer noch:
A List Apart (English)
Bei dem Code von Harald Szekely allerdings wird mir allerdings noch die Seitenbeschreibung angezeigt...
Das war von mir nicht getestet. Ich dachte es ginge so einfach, ich schau mal rasch was da geht.
Also:
.mainHeadline {
height: 0;
min-height: 0;
overflow: hidden;
}
Das geht!
Display MoreEine der besten Quellen für solche Themen ist immer noch:
A List Apart (English)
Das war von mir nicht getestet. Ich dachte es ginge so einfach, ich schau mal rasch was da geht.
Also:CSS.mainHeadline { height: 0; min-height: 0; overflow: hidden; }
Das geht!
Habe es mit dem Code probiert, bei meinem Forum blieb der
Titel aber trotzdem bestehen? // WBB 4.1
/* Special LESS */
.borderRadius (@radius: 0) {
border-radius: @radius;
}
.contentWidth (@useFluidLayout) when (@useFluidLayout = true) {
max-width: @wcfLayoutMaxWidth;
width: @wcfLayoutMinWidth;
}
.contentWidth (@useFluidLayout) when (@useFluidLayout = false) {
width: @wcfLayoutFixedWidth;
}
.linearGradientNormal (@color1, @color2, @direction: 180deg, @position1: 0%, @position2: 100%) {
@oldDirection: @direction - 90deg;
background-color: @color2;
background: -webkit-linear-gradient(@oldDirection, @color1 @position1, @color2 @position2) @color2;
background: -o-linear-gradient(@oldDirection, @color1 @position1, @color2 @position2) @color2;
background: linear-gradient(@direction, @color1 @position1, @color2 @position2) @color2;
}
.lineHeight (@height: 1.28) {
line-height: @height;
}
/* End special LESS */
/* general */
*,
*::after {
text-shadow: none !important;
}
/*
html,
body {
background-image: linear-gradient(fadeout(@wcfSidebarBackgroundColor, 100%) 144px, lighten(@wcfContentBackgroundColor, 2%) 144px), -webkit-radial-gradient(top center, lighten(@wcfSidebarBackgroundColor, 15%), @wcfPageBackgroundColor);
background-image: linear-gradient(fadeout(@wcfSidebarBackgroundColor, 100%) 144px, lighten(@wcfContentBackgroundColor, 2%) 144px), radial-gradient(at top center, lighten(@wcfSidebarBackgroundColor, 15%), @wcfPageBackgroundColor);
} */
/* fix for chrome */
@media screen and (max-width: 800px) {
body {
background: url("@{style_image_path}bg_800.jpg") scroll no-repeat center top @wcfPageBackgroundColor;
}
}
@media screen and (min-width: 801px) and (max-width: 1280px) {
body {
background: url("@{style_image_path}bg_1280.jpg") scroll no-repeat center top @wcfPageBackgroundColor;
}
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
body {
background: url("@{style_image_path}bg_1440.jpg") scroll no-repeat center top @wcfPageBackgroundColor;
}
}
@media screen and (min-width: 1441px) and (max-width: 1600px) {
body {
background: url("@{style_image_path}bg_1600.jpg") scroll no-repeat center top @wcfPageBackgroundColor;
}
}
@media screen and (min-width: 1601px) and (max-width: 1920px) {
body {
background: url("@{style_image_path}bg_1920.jpg") scroll no-repeat center top @wcfPageBackgroundColor;
}
}
@media screen and (min-width: 1921px) {
body {
background: url("@{style_image_path}bg_2560.jpg") scroll no-repeat center top @wcfPageBackgroundColor;
}
}
a:hover {
text-decoration: none;
}
.highlight {
padding: 0 1px;
}
/* selection */
::selection {
background-color: darken(@wcfButtonHoverBackgroundColor, 5%);
color: @wcfButtonHoverColor;
}
::-moz-selection {
background-color: darken(@wcfButtonHoverBackgroundColor, 5%);
color: @wcfButtonHoverColor;
}
/* inputs */
input[type="text"], input[type="search"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], textarea, select[multiple] {
.transition(~"background-color, border-color, color", .2s);
&::-moz-placeholder {
opacity: 1;
}
&:hover {
color: @wcfInputHoverBorderColor;
}
&:focus {
background-color: @wcfInputHoverBackgroundColor;
border-color: @wcfInputHoverBorderColor;
color: @wcfInputHoverBorderColor;
&::-webkit-input-placeholder {
opacity: 0;
}
&::-moz-placeholder {
opacity: 0;
}
&::-ms-input-placeholder {
opacity: 0;
}
}
}
/* badges */
.badge {
.lineHeight;
&.badgeUpdate {
background-color: @wcfUserPanelColor;
color: darken(@wcfPageLinkColor, 20%);
}
}
a.tag {
.lineHeight(1.1);
&:hover {
background-color: @wcfSidebarBackgroundColor;
color: lighten(@wcfPageLinkColor, 60%);
&::before {
border-right-color: @wcfSidebarBackgroundColor;
}
}
}
/* dialogContainer */
.dialogContainer {
.borderRadius;
background-color: @wcfContainerBackgroundColor;
border: 1px solid @wcfContainerBorderColor;
box-shadow: 0 0 2px 1px fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
.dialogTitlebar,
.dialogContent:not(.dialogForm),
.dialogContent .formSubmit {
.borderRadius;
}
}
.dialogOverlay {
background-color: rgba(0, 0, 0, .2);
}
/* dropdownMenu */
.dropdownMenu {
background-color: @wcfContainerBackgroundColor;
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
li > a,
li > span {
.transition(~"background, box-shadow, color", .1s);
&.box24 > .framed > .iconFlag {
.borderRadius;
}
&:hover {
background: none @wcfContainerHoverBackgroundColor;
box-shadow: 0 0 2px 1px fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
color: @wcfColor;
}
}
&::before {
border-bottom-color: @wcfContainerBackgroundColor;
}
}
/* popover */
.popover {
.borderRadius;
background-color: @wcfContainerBackgroundColor;
border: 1px solid @wcfButtonBorderColor;
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
> .icon-spinner {
color: @wcfButtonColor;
}
&.bottom::before {
border-bottom-color: darken(@wcfContentBackgroundColor, 5%);
border-top-width: 0;
top: -13px;
}
&.bottom::after {
border-bottom-color: @wcfContainerBackgroundColor;
}
&.left::before {
right: 9px;
}
&.right::before {
left: 9px;
}
&.top::before {
border-bottom-width: 0;
border-top-color: darken(@wcfContentBackgroundColor, 5%);
bottom: -13px;
}
&.top::after {
border-top-color: @wcfContainerBackgroundColor;
}
&::before {
border: 11px solid rgba(0, 0, 0, 0);
content: "";
display: inline-block;
position: absolute;
}
}
/* spinner */
.spinner {
.borderRadius;
background: none @wcfContainerHoverBackgroundColor;
border-color: @wcfContainerBorderColor;
box-shadow: 0 0 2px 1px fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
color: @wcfColor;
padding: @wcfGapSmall;
> .icon {
color: @wcfColor;
}
}
/* header */
@media screen and (min-width: 801px) {
#pageHeader {
max-width: 100%;
min-width: 0;
> div {
.contentWidth(true);
margin: 0 auto;
position: relative;
}
}
#topMenu {
.lineHeight;
left: auto;
right: @wcfGapLarge;
top: 42px;
> div {
> ul.userPanelItems > li {
float: right;
margin-left: @wcfGapSmall;
> a,
> div:not(.dropdownMenu) {
padding-right: 12px;
position: relative;
> .box24 > .framed {
display: none;
~ * {
margin-left: 0;
}
}
> span:nth-child(2) {
display: none;
}
.icon16 {
.square(24px);
font-size: 22px;
position: relative;
top: -2px;
}
.badge.badgeInverse {
background-color: #b92a2a;
color: @wcfUserPanelColor;
margin-left: -12px;
}
&::after {
content: "\f107";
font-family: FontAwesome;
font-size: 14px;
position: absolute;
right: 0;
top: 13px;
}
}
&.dropdownOpen {
> a,
> div:not(.dropdownMenu) {
&::after {
content: "\f106";
}
}
}
}
}
}
.searchBar {
top: -@wcfGapLarge;
}
#logo {
margin: 0;
> a {
padding: @wcfGapLarge + @wcfGapSmall 0 @wcfGapSmall;
}
}
#mainMenu {
> ul > li {
&:nth-last-child(2) {
margin-bottom: @wcfGapLarge;
}
}
}
.navigationHeader {
background-color: @wcfContainerBackgroundColor;
border-color: @wcfButtonBorderColor;
border-top: 0;
margin: -@wcfGapSmall (-@wcfGapLarge - 1) -@wcfGapSmall -@wcfGapLarge;
padding: 8px (@wcfGapMedium + 1) 8px @wcfGapMedium;
}
}
.searchBar {
position: relative;
form input[type="search"] {
.borderRadius;
-webkit-appearance: none;
background-color: fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
border: 0;
font-size: 1rem;
padding: @wcfGapMedium @wcfGapMedium @wcfGapMedium 26px;
width: 100%;
&::-webkit-input-placeholder {
color: #fff;
}
&::-moz-placeholder {
color: #fff;
}
&::-ms-input-placeholder {
color: #fff;
}
}
&::before {
content: "\f002";
color: #fff;
font-family: FontAwesome;
font-size: 14px;
left: 7px;
position: absolute;
top: 10px;
}
}
#mainMenu {
.lineHeight;
border-bottom: 3px solid fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
margin-bottom: @wcfGapLarge;
> ul {
display: block;
> li {
display: block !important;
font-size: @wcfTitleFontSize;
margin: 0;
padding: 0;
> a {
border-left: 3px solid rgba(0, 0, 0, 0);
border-right: 0;
color: lighten(@wcfPageLinkColor, 60%);
display: block;
padding: 9px 11px;
&:hover {
background-color: fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
border-left-color: fadeout(@wcfLinkHoverColor, 15%);
}
}
&.active > a {
background-color: lighten(@wcfSidebarBackgroundColor, 10%);
border-left-color: @wcfLinkHoverColor;
min-width: 0;
text-align: left;
}
&.dropdown {
display: none !important;
}
}
}
}
/* content */
@media all and (min-width: 801px) {
#main {
background-color: rgba(0, 0, 0, 0) !important;
border-right: 0;
max-width: 100%;
min-width: 0;
> div {
.contentWidth(true);
margin: 0 auto;
> div {
/* content */
> .content {
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
padding-left: @wcfGapLarge;
padding-right: @wcfGapLarge;
}
/* sidebar */
> .sidebar {
width: 250px;
}
}
}
&:not(.sidebarOrientationLeft):not(.sidebarOrientationRight) .sidebar {
display: table-cell;
}
}
}
/* sidebar */
#main > div > div > .sidebar {
color: @wcfDimmedColor;
> span > .collapsibleButton::before {
.lineHeight;
}
> div {
overflow: visible;
width: 250px;
> fieldset,
> div {
> legend {
color: lighten(@wcfPageLinkColor, 60%);
font-size: @wcfSubHeadlineFontSize;
text-transform: none;
> .badge {
top: @wcfGapSmall;
}
}
&:not(:last-child) {
border-bottom: 3px solid fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
margin-bottom: @wcfGapLarge;
padding-bottom: @wcfGapLarge;
}
}
}
.sidebarBoxHeadline > h3 a,
dl.statsDataList > dt > a,
dl.inlineDataList > dt > a,
dl.inlineDataList > dd > a,
.containerHeadline > h3 > a,
li a:not(.button) {
color: lighten(@wcfPageLinkColor, 60%);
&:hover {
color: lighten(@wcfPageLinkHoverColor, 60%);
}
}
dl.inlineDataList {
> dt {
float: none;
text-align: left;
width: 100%;
&::after {
content: ":";
}
}
> dd {
border-bottom: 1px solid fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
margin-bottom: 4px;
margin-left: 0;
padding-bottom: 2px;
text-align: left;
a.externalURL::after {
content: none;
}
}
}
.box24:not(.boxFlag) > :first-child,
.box32 > :first-child {
display: none;
}
.box24:not(.boxFlag) > .framed ~ *,
.box32 > .framed ~ * {
margin-left: 0;
}
.boxFlag > :first-child {
color: @wcfDimmedColor;
}
.framed > canvas,
.framed > img,
.framed > icon {
background-color: @wcfSidebarBackgroundColor;
border-color: fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
}
fieldset {
min-width: 250px;
width: 250px;
> nav ul > li {
border-left: 3px solid rgba(0, 0, 0, 0);
> a {
padding: @wcfGapSmall @wcfGapMedium;
}
&:hover {
background-color: @wcfContentBackgroundColor;
border-left-color: fadeout(@wcfLinkHoverColor, 15%);
> a {
color: @wcfLinkHoverColor !important;
}
}
&.active {
border-left-color: @wcfLinkHoverColor;
> a {
color: @wcfLinkColor;
&:hover {
color: @wcfLinkHoverColor;
}
}
}
}
}
.formSubmit {
width: 250px;
}
}
.tabularBox {
.transition(~"background-color, box-shadow", .1s);
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
> header {
padding: @wcfGapMedium @wcfGapSmall;
> h2 {
font-weight: normal;
text-transform: uppercase;
}
}
> ul > li {
.transition(border-color, .1s);
border-top: 1px solid lighten(@wcfContentBackgroundColor, 1%);
}
div:not(.new) .icon {
color: @wcfColor !important;
}
&:hover {
background-color: @wcfContainerHoverBackgroundColor;
box-shadow: 0 0 2px 1px fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
> ul > li {
border-top-color: darken(@wcfContainerHoverBackgroundColor, 5%);
> div {
background-color: @wcfContainerHoverBackgroundColor;
}
}
}
}
.containerList {
.transition(box-shadow, .1s);
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
> li {
> div > div > .buttonGroupNavigation > .buttonList {
opacity: .7;
}
&:hover {
box-shadow: 0 0 2px 1px fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
position: relative;
z-index: 10;
}
&:not(:first-child) {
border-top: 1px solid lighten(@wcfContentBackgroundColor, 1%);
&:hover {
border-top-color: rgba(0, 0, 0, 0);
}
}
}
&.doubleColumned {
overflow: visible;
}
&.jsGroupedUserList {
> li:not(:last-child) {
border-bottom: 1px solid lighten(@wcfContentBackgroundColor, 1%);
}
}
@media screen and (min-width: 1240px) and (max-width: 1440px) {
&.doubleColumned {
> li {
float: none;
width: 100%;
&:nth-child(even) {
float: none;
}
}
}
}
@media screen and (max-width: 1440px) {
&.doubleColumned {
> li:not(:last-child) {
border-bottom: 1px solid lighten(@wcfContentBackgroundColor, 1%);
}
}
}
}
.table {
th {
background: none @wcfContainerHoverBackgroundColor;
&.active > a {
background-color: @wcfButtonBorderColor;
box-shadow: none;
}
&:hover > a {
background-color: @wcfButtonBorderColor;
}
&:last-child {
border-right-width: 0;
}
}
}
.navigation > ul.navigationIcons > li > a {
padding: 6px 5px 5px;
}
.box24 > .framed > canvas,
.box32 > .framed > canvas,
.box48 > .framed > canvas,
.box24 > .framed > img,
.box32 > .framed > img,
.box48 > .framed > img,
.box48.framed > img,
.box24 > .framed > .icon,
.box32 > .framed > .icon,
.box48 > .framed > .icon,
.messageGroupList .columnAvatar div > p > img,
.userPanel > div > ul.userPanelItems > li > .framed > img {
.borderRadius(28px);
}
.userHeadline > nav.buttonGroupNavigation {
right: 0;
}
.contentNavigation > nav:not(.pageNavigation) > ul:not(.buttonGroup) {
margin-right: 0;
}
/* dashboard */
.dashboardBox {
.lineHeight;
}
/* boardlist */
.wbbBoardList {
.wbbStats > dl > dt,
.wbbStats > dl > dd,
.wbbLastPost,
.wbbSubBoards {
.lineHeight;
}
.wbbUsersOnline {
.lineHeight;
}
.wbbCategory {
.wbbDepth2.wbbBoardContainer > .wbbBoard {
padding-left: @wcfGapLarge;
}
.wbbDepth3.wbbBoardContainer > .wbbBoard {
padding-left: 57px;
}
}
.wbbBoardContainer > .wbbBoardNode1 {
padding-left: @wcfGapLarge;
}
}
.wbbMarkAsDone.icon-check-empty {
color: @wcfErrorBackgroundColor;
}
/* footer */
@media all and (min-width: 801px) {
#pageFooter {
max-width: 100%;
min-width: 100%;
> div {
.contentWidth(true);
margin: 0 auto;
.navigationFooter {
border-top-color: darken(@wcfContentBackgroundColor, 5%);
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
padding: @wcfGapSmall;
> ul.navigationIcons {
margin-right: @wcfGapSmall;
}
}
}
}
}
/* buttons */
.button, input[type="reset"]:not([disabled]), input[type="submit"]:not([disabled]), input[type="button"]:not([disabled]), button:not([disabled]) {
.lineHeight;
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
.icon {
color: @wcfButtonColor;
}
&.active {
border-color: @wcfButtonPrimaryBorderColor;
}
}
.dropdownOpen {
.button {
background-color: @wcfButtonPrimaryBackgroundColor;
border-color: @wcfButtonPrimaryBorderColor;
color: @wcfButtonPrimaryColor;
.icon {
color: @wcfButtonPrimaryColor;
}
}
}
.formSubmit input[type="submit"] {
-webkit-appearance: none;
background-color: @wcfButtonHoverBackgroundColor;
border-color: @wcfButtonHoverBorderColor;
color: @wcfButtonHoverColor;
height: 31px;
}
.buttonGroup > li {
margin-left: @wcfGapSmall;
}
.sidebar button, .sidebar input[type="reset"], .sidebar input[type="submit"], .sidebar input[type="button"], .sidebar .button {
box-shadow: none;
}
/* messages */
.message {
background-color: rgba(0, 0, 0, 0);
.messageSidebar {
.lineHeight;
padding: 0 0 @wcfGapLarge;
width: 120px;
.userAvatar {
img {
.borderRadius(36px);
height: auto !important;
max-height: 64px !important;
max-width: 64px !important;
width: auto !important;
&[src$="avatar-default.svg"] {
height: 64px !important;
width: 64px !important;
}
}
> .badgeOnline {
.borderRadius(9px);
border: 1px solid @wcfContainerBorderColor;
box-shadow: none;
bottom: auto;
height: 9px;
left: 0;
padding: 0;
text-indent: -9999px;
top: 0;
width: 9px;
&::before {
content: none;
}
}
}
.userCredits .dataList {
> dt {
float: none;
text-align: left;
width: 100%;
&::after {
content: ":";
}
}
> dd {
border-bottom: 1px solid darken(@wcfContentBackgroundColor, 5%);
float: none;
margin-bottom: 4px;
margin-left: 0;
padding-bottom: 2px;
text-align: left;
a.externalURL::after {
content: none;
}
}
}
}
.messageContent {
border: 1px solid @wcfContainerBorderColor;
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
.messageHeader {
background-color: @wcfButtonHoverBackgroundColor;
border-bottom: 1px solid @wcfContainerBorderColor;
padding-bottom: @wcfGapMedium;
.messageQuickOptions {
margin-left: @wcfGapSmall;
}
.messageHeadline {
> p > .username,
> p > .datetime,
> h1,
a,
.icon {
color: @wcfButtonHoverColor;
}
}
+ .messageBody {
padding-top: 0;
> div {
border-top: 0;
}
}
.newMessageBadge {
.borderRadius(12px);
background: none @wcfButtonPrimaryBackgroundColor;
border: 1px solid @wcfButtonPrimaryBorderColor;
box-shadow: none;
color: @wcfButtonPrimaryColor;
display: inline-block;
float: right;
margin-top: -19px;
padding: 1px @wcfGapSmall;
position: static;
text-transform: none;
&::before {
content: none;
}
}
}
.messageOptions {
padding: @wcfGapLarge 0;
nav {
bottom: @wcfGapSmall;
opacity: 1;
right: 0;
}
}
}
@media screen and (min-width: 801px) {
&.messageSidebarOrientationLeft {
.messageContent {
margin-left: 143px;
.messageHeader {
.newMessageBadge {
&::before {
border-left: 6px solid rgba(0, 0, 0, 0);
left: 0;
}
}
&::before {
border-color: rgba(0, 0, 0, 0) @wcfContainerBorderColor rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
border-width: 0 11px 17px 0;
left: -11px;
top: -1px;
}
&::after {
border-color: rgba(0, 0, 0, 0) @wcfButtonHoverBackgroundColor rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
border-width: 0 10px 15px 0;
left: -9px;
top: 0;
}
}
}
}
&.messageSidebarOrientationRight {
.messageContent {
margin-right: 143px;
.messageHeader {
.newMessageBadge {
&::before {
border-right: 6px solid rgba(0, 0, 0, 0);
right: 0;
}
}
&::before {
border-color: @wcfContainerBorderColor rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
border-style: solid;
border-width: 17px 11px 0;
right: -11px;
top: -1px;
}
&::after {
border-color: @wcfButtonHoverBackgroundColor rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
border-style: solid;
border-width: 15px 10px 0;
right: -9px;
top: 0;
}
}
}
}
}
}
.messageList .messageGroupStarter > .message::after {
left: 0;
top: @wcfGapLarge;
}
/* bbcodes */
.inlineCode {
background-color: @wcfContainerBackgroundColor;
border-color: @wcfContentBackgroundColor;
}
.pollResultList li .pollMeter {
background-color: @wcfContentBackgroundColor;
}
/* tabMenu */
.tabMenu > ul {
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
> li {
> a {
padding-left: @wcfGapMedium;
padding-right: @wcfGapMedium;
}
&.ui-state-active > a {
font-size: 1.1rem;
margin-top: -4px;
padding: 4px @wcfGapMedium 3px;
}
&:first-child {
margin-left: -5px;
}
}
}
.tabMenuContainer > .menu {
ul li a {
padding: 2px 7px;
}
}
/* pageNavigation */
.pageNavigation ul li {
> a {
.lineHeight;
height: 17px !important;
}
&.skip a {
padding-bottom: 2px;
}
&.active span {
.lineHeight;
}
}
.statusDisplay .pageNavigation ul li {
&:not(:last-child) {
margin-right: @wcfGapTiny;
}
&:not(.skip) a {
height: 14px !important;
padding: 1px 5px;
}
}
/* breadcrumbs */
.breadcrumbs {
.transition(~"background-color, border-color, box-shadow", .1s);
background-color: @wcfContainerBackgroundColor;
border: 1px solid @wcfContainerBorderColor;
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
margin-top: @wcfGapLarge;
> ul > li {
> a {
padding-left: 11px;
padding-right: 6px;
&:hover {
color: @wcfLinkHoverColor;
}
}
> .pointer {
> span {
display: none;
}
&::before {
.square(0);
.transition(border-color, .1s);
border-style: solid;
border-width: 30px 15px 0 0;
border-color: @wcfContainerBorderColor rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
content: "";
display: block;
right: -4px;
position: absolute;
top: 0;
}
&::after {
.square(0);
.transition(border-color, .1s);
border-style: solid;
border-width: 30px 15px 0 0;
border-color: @wcfContainerBackgroundColor rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
content: "";
display: block;
right: -2px;
position: absolute;
top: 0;
}
}
}
&:hover {
background-color: @wcfContainerHoverBackgroundColor;
box-shadow: 0 0 2px 1px fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
border-top-color: darken(@wcfContainerHoverBackgroundColor, 5%);
> ul > li > .pointer {
&::before {
border-top-color: darken(@wcfContainerHoverBackgroundColor, 5%);
}
&::after {
border-top-color: @wcfContainerHoverBackgroundColor;
}
}
}
}
/* dataList */
dl.statsDataList {
> dt {
.lineHeight(1.4);
}
> dd {
.lineHeight(1.4);
font-size: @wcfSmallFontSize;
}
}
/* sitemap list */
.sitemapList li > a {
.borderRadius;
.transition(~"background-color, box-shadow, color", .1s);
&:hover {
background-color: @wcfContainerHoverBackgroundColor;
box-shadow: 0 0 2px 1px fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
}
}
/* error, info, success, warning */
.warning {
box-shadow: 0 1px 1px darken(@wcfWarningBackgroundColor, 20%);
}
.error {
box-shadow: 0 1px 1px darken(@wcfErrorBackgroundColor, 20%);
}
.success {
box-shadow: 0 1px 1px darken(@wcfSuccessBackgroundColor, 20%);
}
.info {
box-shadow: 0 1px 1px darken(@wcfInfoBackgroundColor, 20%);
}
/* errors */
.innerError {
&::before {
top: -5px;
}
&::after {
top: -6px;
}
}
/* conversations */
.conversationUsageBar {
background-color: @wcfContainerHoverBackgroundColor;
box-shadow: none;
height: 12px;
padding: 0;
> span {
background: none fadeout(lighten(@wcfSidebarBackgroundColor, 35%), 30%);
box-shadow: none;
text-indent: -9000px;
}
&.red > span {
background: none #cb0202;
}
}
/* editor */
.redactor-toolbar > li > a {
.lineHeight;
&.redactor-button-disabled {
&,
&::before,
> i::before {
color: @wcfDimmedColor;
}
}
}
/* message tab menu */
.messageTabMenu > div > nav ul li {
a {
color: @wcfLinkColor;
&:hover {
color: @wcfLinkHoverColor;
}
}
&.active a,
&.active a:hover {
color: @wcfColor;
}
}
/* gallery */
.galleryImageList > li > div {
.lineHeight;
}
.gallerySidebarImageList > li > a > img {
width: 72px;
}
.galleryImageHeadline > nav.buttonGroupNavigation {
right: 0;
}
/* mobile */
@media only screen and (max-width: 800px) {
body {
overflow-x: hidden;
position: relative;
}
.userPanel > div > ul.userPanelItems > li {
float: right;
> a,
> div:not(.dropdownMenu) {
padding: 13px 11px 14px;
}
}
.navigation.navigationHeader {
> ul.navigationIcons,
> ul.navigationItems {
display: block;
}
}
#main {
border-right: 0;
position: static;
&.sidebarOrientationLeft,
&.sidebarOrientationRight,
&:not(.sidebarOrientationLeft):not(.sidebarOrientationRight) {
> div > div > .content,
> div > div > .sidebar {
.mobileSidebarToggleButton {
.borderRadius(5px);
background-color: saturate(darken(@wcfPageLinkColor, 10%), 10%);
border: 1px solid darken(@wcfPageLinkColor, 20%);
box-shadow: none;
left: @wcfGapSmall;
right: auto;
top: 8px;
z-index: 300;
> span {
font-size: 21px;
width: 24px;
&::before {
color: @wcfUserPanelColor;
content: "\f03a";
}
}
}
}
> div > div > .content {
.transition(left, .2s);
display: block;
left: 0;
padding-top: @wcfGapSmall;
> .marginTop,
> div:not([class]),
> .messageList,
> section > .dashboardBox > :not(header),
> form > .marginTop {
margin-left: @wcfGapSmall;
margin-right: @wcfGapSmall;
}
}
> div > div > .sidebar {
display: table-cell !important;
overflow: hidden;
width: 0;
> div {
fieldset {
display: block;
}
}
.mobileSidebarToggleButton {
box-shadow: 0 0 5px darken(@wcfPageLinkColor, 25%) inset;
> span::before {
color: @wcfPageColor;
}
}
}
}
&.mobileShowSidebar > div > div {
> .content {
display: inline-block;
left: 250px;
min-width: 300px;
position: absolute;
width: 100%;
.mobileSidebarToggleButton {
display: none;
}
}
> .sidebar {
overflow: visible;
padding-top: 0;
width: 250px;
> div {
height: auto !important;
fieldset {
display: table-column;
}
}
}
}
}
#pageFooter {
background-color: @wcfContentBackgroundColor;
position: relative;
z-index: 200;
}
.content > .breadcrumbs {
.borderRadius;
background-color: @wcfButtonBackgroundColor;
border-color: @wcfButtonBorderColor;
box-shadow: 0 1px 1px darken(@wcfContentBackgroundColor, 5%);
display: inline-block !important;
margin-top: 0;
> ul > li > a {
color: @wcfButtonColor;
&::before {
color: @wcfButtonColor;
}
}
&:hover {
background-color: @wcfButtonHoverBackgroundColor;
border-color: @wcfButtonHoverBorderColor;
> ul > li > a {
color: @wcfButtonHoverColor;
&::before {
color: @wcfButtonHoverColor;
}
}
}
~ .breadcrumbs {
margin-top: @wcfGapMedium;
}
}
.message {
.messageSidebar {
width: 100%;
.userAvatar {
left: 0;
top: -@wcfGapTiny;
img {
.borderRadius(18px);
height: auto !important;
max-height: 32px !important;
max-width: 32px !important;
width: auto !important;
&[src$="avatar-default.svg"] {
height: 32px !important;
width: 32px !important;
}
}
> .badgeOnline {
display: block;
}
}
}
.messageContent {
.messageHeader {
padding: @wcfGapMedium @wcfGapSmall;
}
.messageOptions {
padding: 0;
right: 0;
}
}
.newMessageBadge {
display: inline-block;
}
&.messageSidebarOrientationLeft,
&.messageSidebarOrientationRight {
.messageHeader {
&::before {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) @wcfContainerBorderColor;
border-style: solid;
border-width: 15px 0 0 10px;
display: block;
left: 0;
top: -15px;
}
&::after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) @wcfButtonHoverBackgroundColor;
border-style: solid;
border-width: 15px 0 0 10px;
display: block;
left: 0;
top: -14px;
}
}
}
&.messageReduced {
.messageContent .messageOptions {
right: @wcfGapSmall;
}
.jsMobileButtonGroupNavigation > a.dropdownLabel .icon {
color: @wcfButtonHoverColor;
}
}
}
.containerList.doubleColumned > li {
margin-bottom: -1px;
}
.navigationHeader {
padding: 0;
}
.tabMenu > ul > li > a {
margin-bottom: -3px;
}
#tplUser .userHeadline {
> .invisible {
display: none;
}
> :not(.invisible) {
margin-left: 0;
}
}
.galleryImageContainer {
padding: 0;
}
}
.box24 > .framed > canvas,
.box32 > .framed > canvas,
.box48 > .framed > canvas,
.box24 > .framed > img,
.box32 > .framed > img,
.box48 > .framed > img,
.box48.framed > img,
.box24 > .framed > .icon,
.box32 > .framed > .icon,
.box48 > .framed > .icon,
.messageGroupList .columnAvatar div > p > img,
.userPanel > div > ul.userPanelItems > li > .framed > img {
border-radius: 0;
}
.message .messageSidebar .userAvatar img {
border-radius: 0;
}Wo fügt man den Code den hier ein? Gibt es eine "richtige" Stelle dafür?
Gibt es eine "richtige" Stelle dafür?
Nicht in einem WBB4! Schau mal auf das Datum des zitierten Beitrags. Zu diesem Zeitpunkt gab es die von Dir genutzte Version noch garnicht.
Gruß norse
Der code ist, wie du anhand des alters des Themas erahnen kannst, nicht für das wbb4 gedacht
Hier müsstest du folgendes ganz am ende des individuellen less eintragen:
.boxHeadline {
height: 0;
min-height: 0;
overflow: hidden;
}Der code ist, wie du anhand des alters des Themas erahnen kannst, nicht für das wbb4 gedacht
Hier müsstest du folgendes ganz am ende des individuellen less eintragen:Code.boxHeadline { height: 0; min-height: 0; overflow: hidden; }
Top, vielen Dank! - Hat sofort geklappt
Schönen Abend noch,
Mani
Don’t have an account yet? Register yourself now and be a part of our community!
