Einen Eigenen "Hinweis" erstellen (CSS)

  • Affected Version
    WoltLab Suite 5.3

    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ß

  • 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

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • 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 ?


    Das wäre sehr nett.

    Gruß

  • 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.

  • 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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!