Einen Eigenen "Hinweis" erstellen (CSS)

Wolfseye · May 19th 2021

Hi,

wollte mir für die Hinweise einen eigenen erstellen, also per CSS, und hab auch einiges hier im Forum gefunden. Aber das was ich gefunden hab, kam dann doch irgendwie anders bei mir rüber.

CSS

.hinweis_black {
text-align: center;
background-color: #000000;
color: #ffffff;background-repeat: no-repeat !important;
padding-left: 80px;
min-height: 80px;
}

Das hab ich mir zusammen gesucht, und grundsätzlich funktioniert es auch. Aber z.b. bei den Original WBB Hinweisen, wird der Text in den Boxen direkt auch mittig angezeigt. Hier in dem wird es einfach oben in die Mitte gesetzt, direkt unter den oberen Rand.

Auch würde ich gerne zwischen Hinweisen einen kleinen Abstand haben, allerdings wird hiermit einfach der Hinweis an den darüber geklatscht. Kann man das noch fine tunen, und wenn, wie ?

Danke im Vorraus.

Gruß

norse · May 19th 2021

Schau Dir mal die CSS-Deklarationen für die vorgegebenen Klassen wie ,error, .info etc. an. Dort sind z. B. Innenabstände deklariert. Diese und ggf. weitere Anweisungen musst Du in Dein neues Layout übernehmen, damit das Erscheinungsbild zu den vorhandenen Hinweistypen passt.

Gruß norse

Wolfseye · May 19th 2021

Danke, aber da ist ehrlich gesagt soviel Kram (und ich bin nicht gut mit CSS), das ich nicht weiß was davon ich alles brauche.

Kann mir damit jemand vielleicht helfen, das einzugrenzen ?

CSS

/* ================================================================ Announcement Windows */


#systemNotification {
padding: 0px;
}
#systemNotification > p {
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: 10px 20px;
}
#systemNotification > p.info::before, #systemNotification > p.error::before, #systemNotification > p.success::before, #systemNotification > p.warning::before {
display: none;
}
.info, .error, .success, .warning {
padding: 12px 30px 12px 60px;
line-height: 1.1;
border: none !important;
min-height: 50px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, .9);
}
.info a, .error a, .success a {
color: #FFFFFF;
font-weight: 700;
border-bottom: 1px dotted;
}
.warning a {
color: #333;
font-weight: 700;
border-bottom: 1px dotted;
}
.info span.icon, .success span.icon, .error span.icon {
color: #FFFFFF;
}
.warning span.icon {
color: #333;
}
.info.notice.noticeDismissible.active .icon, .success.notice.noticeDismissible.active .icon, .error.notice.noticeDismissible.active .icon, .warning.notice.noticeDismissible.active .icon {
float: right;
margin-right: -20px;
margin-top: -10px;
}
.info::before, .error::before, .success::before, .warning::before {
font-family: FontAwesome;
font-size: 28px;
display: block;
height: 32px;
left: -43px;
margin-top: -25px;
position: relative;
top: 23px;
width: 32px;
}
.success::before {
content: "\f00c";
}
.warning::before {
content: "\f12a";
margin-left: 9px;
}
.info::before {
content: "\f129";
margin-left: 8px;
}
.error::before {
content: "\f05e";
}
.pageFooterStickyNotice .error, .pageFooterStickyNotice .info, .pageFooterStickyNotice .success, .pageFooterStickyNotice .warning {
min-height: auto;
padding: 10px 10px;
}
.pageFooterStickyNotice .info::before, .pageFooterStickyNotice .error::before, .pageFooterStickyNotice .success::before, .pageFooterStickyNotice .warning::before {
display: none;
}
.pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeMoreInformation, .pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeDismiss {
padding: 4px 10px;
border-bottom: none;
}
#errorMessage {
border: none;
background-color: $wcfStatusErrorBackground;
box-shadow: 0px 1px 2px rgba(0, 0, 0, .9);
padding: 12px 30px 12px 60px;
line-height: 1.1;
min-height: 50px;
color: $wcfStatusErrorText;
}
#errorMessage a {
color: $wcfStatusErrorLink;
font-weight: 700;
border-bottom: 1px dotted;
}
#errorMessage a:hover {
color: $wcfStatusErrorLinkActive;
}
#errorMessage::before {
content: "\f05e";
font-family: FontAwesome;
font-size: 28px;
display: block;
height: 32px;
left: -43px;
margin-top: -25px;
position: relative;
top: 23px;
width: 32px;
}
#tpl_wcf_permissionDenied .main > div {
min-height: 350px;
}
.boxesContentTop .boxInfo, .boxesContentBottom .boxInfo {
border-radius: 0px;
padding: 20px;
}
.boxesContentTop .boxInfo a:not(.button), .boxesContentBottom .boxInfo a:not(.button),
.boxesContentTop .box.info a:not(.button), .boxesContentBottom .box.info a:not(.button) {
font-weight: 400;
border-bottom: 1px dotted;
text-decoration: none;
}
.boxesContentTop .boxInfo a.button.buttonPrimary, .boxesContentBottom .boxInfo a.button.buttonPrimary {
background-color: #0a4b79;
background-image: linear-gradient( #115c94, #05395f);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9), 0px 0px 1px #196298 inset, 0px 1px 0px #3c8cc8 inset;
}
.boxesContentTop .boxInfo a.button.buttonPrimary:hover, .boxesContentBottom .boxInfo a.button.buttonPrimary:hover {
background-color: #0b5386;
background-image: linear-gradient( #1367a5, #094c7c);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 0px 1px #1f73b1 inset, 0px 1px 0px #489ede inset;
color: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, .8);
}
.boxesContentTop .boxTitle, .boxesContentBottom .boxTitle {
font-weight: 600;
letter-spacing: -1px;
}
.boxesContentTop .box.info a.button.buttonPrimary, .boxesContentBottom .box.info a.button.buttonPrimary {
background-color: #0a4b79;
background-image: linear-gradient( #115c94, #05395f);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9), 0px 0px 1px #196298 inset, 0px 1px 0px #3c8cc8 inset;
border: none !important;
}
.boxesContentTop .box.info a.button.buttonPrimary:hover, .boxesContentBottom .box.info a.button.buttonPrimary:hover {
background-color: #0b5386;
background-image: linear-gradient( #1367a5, #094c7c);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 0px 1px #1f73b1 inset, 0px 1px 0px #489ede inset;
color: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 0.8);
}
.boxesContentTop .box.info, .boxesContentBottom .box.info {
text-align: center;
border: none !important;
padding: 20px;
}
.boxesContentTop .box.info::before, .boxesContentBottom .box.info::before {
display: none;
}
.boxesContentTop .box.info .boxTitle, .boxesContentBottom .box.info .boxTitle,
.boxesContentTop .boxInfo .boxTitle, .boxesContentBottom .boxInfo .boxTitle {
background-color: transparent !important;
background-image: none !important;
color: #ffffff !important;
font-size: 22px !important;
font-weight: 600;
}
.boxesContentTop .box.info .boxTitle::before, .boxesContentBottom .box.info .boxTitle::before,
.boxesContentTop .boxInfo .boxTitle::before, .boxesContentBottom .boxInfo .boxTitle::before {
display: none !important;
}


/* ================================================================ Access denied Icon Fix */


.box64.userException.box64 > :first-child:not(:last-child) {
display: none;
}
.box64.userException.box64 > :last-child {
overflow: visible;
}


/* ================================================================ Woltlab Suite 3 Image Viewer Modification Dark */

Display More

Das wäre sehr nett.

Gruß

LoStisWorld · May 19th 2021

Quote from Wolfseye

Aber z.b. bei den Original WBB Hinweisen, wird der Text in den Boxen direkt auch mittig angezeigt. Hier in dem wird es einfach oben in die Mitte gesetzt, direkt unter den oberen Rand.

Ne, das ist eigentlich immer linksbündig.

Wenn du alles mittig haben möchtest, könntest du Flexbox verwenden....

Code

.hinweis_black {
    display: flex;
    justify-content: center;
    align-items: center;

    // Dein restlicher Code
}

Warum du background-repeat & padding-left verwendet hast, verstehe ich allerdings nicht.

Wolfseye · May 19th 2021

Danke vielmals LoStisWorld , das funktioniert jetzt. Aber gibt es noch eine Möglichkeit, das der Hinweis nicht direkt unter einem anderen klebt, sondern das da ein paar Pixel Abstand sind, zwischen dem Hinweis von mir, und den Standard Hinweisen ?

Gruß

Wolf

LoStisWorld · May 20th 2021

klar, das kannst du mit margin-top machen.

Einen Eigenen "Hinweis" erstellen (CSS)

Participate now!

Share

Similar Threads

HTML & CSS - Box-Überschrift auf HTML Seite mit Bild versehen

Hinweis auf neue Berechtigungen im Rahmen von Updates

CSS Informationen unter "Vorgegebene Deklarationen" nach Import entfernen

E-Mail Versand an alle Benutzer in Woltlab Cloud

Blog mit mehreren Autoren: Nur die eigenen Artikel bearbeiten/löschen

Hinweis für Foren einblenden