Fixe breite - Ränder nicht ausfüllen

  • Hallo,

    ich habe folgendes Problem:

    Ich habe eine fixe Breite festgelegt, auch alles so wie es sein soll.

    Doch wenn ich jetzt zum Beispiel die Farbe von wcf content ändere, dann werden die Ränder,

    an denen ja kein Inhalt sein soll mit ausgefüllt. Genau das selbe im Header... Würde für die Seiten gerne

    dann später ein anderes Hintergrundbild einfügen.

    Hab mal ein Foto angehängt wie es momentan ist (ja die extremen Farben sind absicht um es deutlich zu machen :P )

    Und dann ein Foto wie es im alten Board noch aussieht. Hat vielleicht jemand ne Idee?

  • Du müsstest per CSS den Hintergrund des jeweiligen Abschnitts transparent setzen und dann die Stilvariable auf den Abschnitt mit Erweiterung .layoutBoundary coden.

    Beispiel:

    Code
    .pageHeaderPanel {
        background-color: transparent;
    }
    Code
    .pageHeaderPanel > .layoutBoundary {
        background-color: $wcfHeaderMenuBackground;
    }
    Code
    .pageHeaderContainer {
        background-color: transparent;
    }
    Code
    .pageHeaderFacade > .layoutBoundary {
        background-color: $wcfHeaderBackground;
    }
    Code
    .pageNavigation {
        background-color: transparent;
        padding: 0px 0;
    }
    Code
    .pageNavigation > div {
        background-color: $wcfNavigationBackground;
    }
    Code
    .main {
        background-color: transparent;
        padding: 0px 0;
    }
    Code
    .main > div {
        background-color: $wcfContentBackground;
    }

    ... und so weiter. Der body muss transparent gesetzt werden:

    Code
    body {
        background-color: transparent;
    }

    - Wenn bei Dummheit & Arroganz Federn wachsen sollten, so würden hier einige wie Vögel durch die Luft fliegen -

    - Powerstylez.de -

  • Du müsstest per CSS den Hintergrund des jeweiligen Abschnitts transparent setzen und dann die Stilvariable auf den Abschnitt mit Erweiterung .layoutBoundary coden.

    Beispiel:

    Code
    .pageHeaderPanel {
        background-color: transparent;
    }
    Code
    .pageHeaderPanel > .layoutBoundary {
        background-color: $wcfHeaderMenuBackground;
    }
    Code
    .pageHeaderContainer {
        background-color: transparent;
    }
    Code
    .pageHeaderFacade > .layoutBoundary {
        background-color: $wcfHeaderBackground;
    }
    Code
    .pageNavigation {
        background-color: transparent;
        padding: 0px 0;
    }
    Code
    .pageNavigation > div {
        background-color: $wcfNavigationBackground;
    }
    Code
    .main {
        background-color: transparent;
        padding: 0px 0;
    }
    Code
    .main > div {
        background-color: $wcfContentBackground;
    }

    ... und so weiter. Der body muss transparent gesetzt werden:

    Code
    body {
        background-color: transparent;
    }

    Super! Hat mir schonmal sehr geholfen...

    Eine Frage noch hab den Header nun so angepasst:

    Code
    .pageHeaderFacade > .layoutBoundary {
        background-image: url("http://royalsoccersim.de/kadercreator/backgroundbanner.png");
        min-height: 384px;
    }

    klappt am PC auch super. Allerdings hätte ich nun gerne, dass der Banner am Handy nicht erscheint, weil das das Design am Handy sprengt.

  • Super! Hat mir schonmal sehr geholfen...

    Eine Frage noch hab den Header nun so angepasst:

    Code
    .pageHeaderFacade > .layoutBoundary {
        background-image: url("http://royalsoccersim.de/kadercreator/backgroundbanner.png");
        min-height: 384px;
    }

    klappt am PC auch super. Allerdings hätte ich nun gerne, dass der Banner am Handy nicht erscheint, weil das das Design am Handy sprengt.

    https://docs.woltlab.com/view_css.html#available-breakpoints

  • Danke schonmal für eure Hilfe...

    Du müsstest per CSS den Hintergrund des jeweiligen Abschnitts transparent setzen und dann die Stilvariable auf den Abschnitt mit Erweiterung .layoutBoundary coden.

    Beispiel:

    Code
    .pageHeaderPanel {
        background-color: transparent;
    }
    Code
    .pageHeaderPanel > .layoutBoundary {
        background-color: $wcfHeaderMenuBackground;
    }
    Code
    .pageHeaderContainer {
        background-color: transparent;
    }
    Code
    .pageHeaderFacade > .layoutBoundary {
        background-color: $wcfHeaderBackground;
    }
    Code
    .pageNavigation {
        background-color: transparent;
        padding: 0px 0;
    }
    Code
    .pageNavigation > div {
        background-color: $wcfNavigationBackground;
    }
    Code
    .main {
        background-color: transparent;
        padding: 0px 0;
    }
    Code
    .main > div {
        background-color: $wcfContentBackground;
    }

    ... und so weiter. Der body muss transparent gesetzt werden:

    Code
    body {
        background-color: transparent;
    }

    Klappt das auch, mit dem footer? Der erstreckt sich weiter über die ganze Seite, hab schon die ganze zeit versucht das auch irgendwie nach dem Schema zu machen, aber irgendwie will das leider nicht funktionieren :D

  • Code
    .boxesFooterBoxes {
        background-color: transparent;
    }
    Code
    .boxesFooterBoxes .layoutBoundary {
        background-color: $wcfFooterBoxBackground;
    }
    Code
    .boxesFooter {
        background-color: transparent;
        padding: 0px;
    }
    Code
    .boxesFooter .layoutBoundary {
        background-color: $wcfFooterBackground;
    }
    Code
    .pageFooterCopyright {
        background-color: transparent;
        padding: 0px;
    }
    Code
    .pageFooterCopyright .layoutBoundary {
        background-color: $wcfFooterCopyrightBackground;
        padding: 6px 20px;
    }

    - Wenn bei Dummheit & Arroganz Federn wachsen sollten, so würden hier einige wie Vögel durch die Luft fliegen -

    - Powerstylez.de -

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!