Background Image nicht vollkommen sichtbar

  • Guten tag ihr lieben,

    nach langer Zeit habe ich mich mal wieder in das Werk von Designs etc gesetzt und fange sage und schreibe fast neu mit CSS an. Ich bin derzeit an einem Design dran was ich so von alleine und mit Hilfe der Searchbar hier nicht vollkommen umsetzen kann. Nun frage ich euch gern um folgendes:


    1. Wollte ich den Background des Menüs vom Header (.pageHeaderPanel bzw. .mainMenu) transparent bis nichts haben, sodaa ich erstmal den Main Background sehe und dann durch grafiken den BG des Menüs ändern kann. Das gleiche ist jeweils beim Seitenlogo, Header so und bei der Navigation... wo ich die Farbe einfach nicht weg bekomme und die Breite allgemein zuviel ist.


    2. Kann man die Höhe des Logos auch direkt verändern, denn weder padding oder margin funktioniert dort. Vielleicht hab ich nur nicht den richtigen Ort gefunden :D


    3. Wie kann ich allgemein das ganze dynamischer machen? Denn das ganze hat sich ja in den Jahren gut entwickelt sowie optimiert :D - ich war erstmal verblüfft nachdem ich mir das neue Paket geleistet habe, was ich dann gesehen habe.


    Ich wäre euch sehr dankbar & falls ihr euch das gern ansehen wollt, könnt ihr gern auf dem Testwebspace mal schauen. http://st.freaky-gaming.de/refs/

  • Moin

    Die Transparents die du erwähnt hast kannst du im Farbeditor machen.

    Farbcode rgba, a auf die gewünschte Transparent setzen also zb

    Im unteren Bild steht a auf 10 anstelle von 100.


    Wenn du etwas verschiebst bei dir zb das menu achte auch auf folge Elemente zb


    .interactiveDropdown oder dialogContainer


    Für dein Design wäre das

    Code
    1. .dialogContainer {
    2. top: 335px !important;
    3. }


    Header und Menu würde ich je nach Auflösung verändern, den so hat zb ein Laptop mit kleiner Auflösung nur die Hälfte vom Dialogcontainer.


    Wenn du etwas Transparent machst kann das wo anders Auswirkungen haben, bei dir zb hier


    Code
    1. .dialogContainer > header {
    2. background-color: rgba(63, 111, 156, 0);
    3. color: rgba(255, 255, 255, 0);
    4. }


    Muss du dann selber in das CSS Eintragen.


    Code
    1. .dialogContainer > header {
    2. background-color: rgba(63, 111, 156, 1);
    3. color: rgba(255, 255, 255, 1);
    4. }

    ;)

  • Danke erstmal für die schnelle und einigermaßen ausführliche Hilfe.

    Jedoch ändert sich da nix im Headerbereich, also damit meine ich das es nicht Tranzparent wird sondern nur weiß. Ich habe dann nochmal das ganze wiederholt mit allem, aber leider funktionierte es nicht.


    Ich habe nun versucht mit pageHeaderFacade versucht, das ganze rechts und links neben den Header weg zu bekommen, aber es funktionierte nicht. Das einzige was dann funktionierte war das mit layoutBoundary


    Was ich eigentlich will, ist, dass ich dieses Design im Anhang irwie genau so hinbekomme. Dazu sende ich hier mal mein CSS Code den ich derzeit besitze... vllt gibtes da auch eine optimierte Variante... das wäre sehr lieb :D


    kommpletter Code derzeit:

  • Setze das Bild mal als Background in den Header: (zusätzlich zu .main)

    .pageHeaderContainer {

    background-image: url('../images/saphira/bg.png');

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-size: cover;

    }


    Die komischen Löcher bekommst du weg wenn du die anderen Einstellungen löschst

    Tranzparenz brauchst du nur da einstellen wo der Background nicht durch das Bild ersetzt wurde, wenn es denn durchscheinen soll.



  • Das geht Einfacher. Installiere das hier Angehängte . ;)


    Sieht dann so aus.


    Logo ist schon deines. Ich habe Grelle Farben genommen damit dir keine Links abhanden kommen ;)


    Fang immer erst mit dem Farbeditor an, stelle dort alles so ein wie du es willst(Transparent), erst dann Trage eigenes CSS ein.


    Das Angehängte Design hat natürlich noch Fehler, war nur schnell in der Kaffeepause gemacht ;)


    Hintergrundbild ist von hier

  • erstmal vielen dank nochmal für die nette, schnelle und ausführliche Hilfe. Nachdem Qvip das Design als vereinfachten Anpassung zur Verfügung gestellt hat, fällt es mir klar einwenig leichter. Dafür noch einmal DANKE.


    Nun aber habe ich noch einige Schusseligkeitsprobleme hehe


    1. Wie setze ich das Logo etwas höher, sodass zwischen Logo und mainMenu (pagerHeaderPanel) auch Platz ist und ich das Menü über die Navigation hinsetze. Die Position des Menus ist soweit richtig, jedoch geht das Menü wieder über die ganze Seiten breite, obwohl ich dieses nur so breit wie der content unten selbst ist, haben möchte.


    2. Ich finde absolut keine Möglichkeit den BG vom Content allgemein transparenter zu machen. In der Farbpalette habe ich alles ausprobiert, jedoch änderte sich nix :D - habe mich dann an was anderes begeben hehe


    3. Und zuletzt eine Frage: Ich möchte ja das Forum mit Sidebar, also rechte Seite auch mit Boxen füllen und das Forum an sich sollte dann Links daneben sein. Das bekommt man wie nochmal hin?? :D - SRY aber das ganze hat sich so verändert im ACP das man dort echt richtig einsteigen muss.


    Vorab nochmal die Möglichkeit, das LIVE (http://www.st.freak-gaming.de/refs) zu sehen

  • Hey Qvip,

    danke für die Überarbeitung aber gern würde ich dann schon noch wissen wie man die Punkte oben bearbeiten kann, das es passt.


    des weiteren kann ich das stil leider nicht importieren, wegen folgender Info:

    Das hochgeladene Paket kann nicht installiert werden, bitte beachten Sie das unten stehende Prüfungsergebnis.

    Bei der hochgeladenen Datei handelt es sich um ein Paket, welches einen Stil enthält. Das Paket „transparent“ (installierte Version: „1.0.0“) soll auf Version „1.0.0“ aktualisiert werden, ein Update wird jedoch nicht unterstützt.

  • Gruß norse

    Norse alte socke, der helfer vom Helferdienst vor jahren :D - Und jaa, dachte ich muss nur das stil einfach löschen. Jedoch habe ich nun das alte paket deinstalliert und das neue drauf gehauen.


    Inwie weit kann man aber das Logo oben im Header hoch schieben? Hat da .pageHeader irwas mit zutun?


    danke Qvip :P

  • Inwie weit kann man aber das Logo oben im Header hoch schieben?

    Habe dir extra ein margin-top Eingebunden ;)

    Suche nach .pageHeaderContainer

    ändere die 20 nach belieben margin-top: 20px;

  • alles klar, danke dir. Aber nun noch zu was... ich nerve bestimmt schon aber mir macht es spaß wieder an solchen designs etc. zu arbeiten und mit Hilfe auch selbst sich nochmals in dem bereich zu erweitern hehe.


    ich möchte gern den BG der Foren Container auf Weiß haben... also nur die Container, dazwischen sollte der transparente BG vom Body zusehen sein. Denke das hat wieder mit den Containern 1-4 zutun oder

  • Code
    1. .wbbBoardList .wbbBoard {
    2. background-color: rgba(255, 255, 255, 1);
    3. }

    sollte das sein was du suchst ;)