Hintergrund Grafik

  • Hallo,


    Viele werden jetzt wahrscheinlich wieder nörgeln, aber ich habe es dieses mal selbst probiert und bin auch glaube ich auf dem richtigen Weg und zwar will ich das Hintergrundbild im Woltlab Suite Forum ändern.

    Also habe ich es so wie ReeN   norse es mir schon 1000 mal gesagt haben versucht selbst zu helfen und habe mir die Klassen und IDS raus gesucht dabei kam das raus und ich habe ein unverändertes Hintergrundbild. Kann mir wer helfen?


    Code
    1. #main.main {
    2. background-color: rgba(52, 73, 94, 1);
    3. background-image: url(images/übungsdesign/bg1.png);
    4. color: rgba(175, 193, 210, 1);
    5. font-family: "Open Sans", "Lucida Sans", "Lucida Grande", Monaco, Geneva, sans-serif;
    6. position: relative;
    7. width: 100%;
    8. word-wrap: break-word;
    9. }

    Gruß

    Unkl.

  • Also um ein Bild als Hintergrund zu bekommen musst du es so machen im WSC


    CSS
    1. .main {
    2. background-image: url('#{$style_image_path}kotet.jpg');
    3. background-repeat: no-repeat;
    4. background-attachment: fixed;
    5. background-size: cover;
    6. background-color: #131313;
    7. }

    Einmal Main reicht.

    It's not a trick, it's a Zoni


    This is 10% Egg
    20% Milk
    15% Chocolate that is softer than silk
    5% Love
    50% Bake
    Thats 100% reason to make a cake

  • Wie bist du denn auf diese ganzen Eigenschaften gestoßen ... Also alles außer background-color und background-image kannst du schon mal direkt rausstreichen.


    Ansonsten ersetz mal background-image: url(images/übungsdesign/bg1.png); durch background-image: url('#{$style_image_path}bg1.png');. Das hat was mit den Pfadangaben zu tun. Das kompilierte CSS liegt und wcf/style, das heißt images/übungsdesign/bg1.png wird dann zu wcf/style/images/übungsdesign/bg1.png und das ist ja falsch. Mit #{$style_image_path} kommst du an den richtigen Pfad und dann wird das Bild auch angezeigt.

  • Ja diese dieses verweist auf den zugehörigen Ordner des Stils.

    Also einfach in den Ordner packen und das System weiß durch dieses Deklaration das dort das Bild zu finden ist.


    Im WCF aka Wbb4.1 hieß es noch background-image: url('@{style_image_path}bild.png');


    Ups sorry nein falsch verstanden. Das hier #{$style_image_path} sagt aus das es in deinem Ordner ist der zum Stil gehört. Daran musst du nichts verändern. Du musst nur den Namen des Bildes ändern.

    It's not a trick, it's a Zoni


    This is 10% Egg
    20% Milk
    15% Chocolate that is softer than silk
    5% Love
    50% Bake
    Thats 100% reason to make a cake

  • Ok dankeschön.

    Aber wie komme ich auf diese Pfade ? Wo kann ich diese finden?

    oder ist das immer der gleiche @{style_image_path} wenn ich beispielsweiße eins in den header einfügen will.

  • Das ändert sich nicht. Das ist die Anweisung das das System im Stile Ordner nach dem genannten Bild suchen muss.

    Jedem Stil ist ein Ordner zugeteilt. Mit diesem Befehl sagst du in der CSS des jeweiligen Stil halt das er nur in seinen Ordner schauen soll und dort das Bild findet :)

    It's not a trick, it's a Zoni


    This is 10% Egg
    20% Milk
    15% Chocolate that is softer than silk
    5% Love
    50% Bake
    Thats 100% reason to make a cake

  • Also um ein Bild als Hintergrund zu bekommen musst du es so machen im WSC

    Man muss es nicht so machen. Wenn der Pfad stimmt, dann passt es auch so, wie Unkl. es gemacht hat. Zumindest sehe ich da kein Problem. Wenn er das Bild in einem bestimmten Ordner hat, kann er es ja einfach so verwenden. Wahrscheinlich stimmte bei ihm einfach der Pfad nicht.


    Unkl. Ob der Pfad stimmt, kannst du übrigens auch gut selbst testen. Wenn du in den Browsertools bist, hast du dort ja deine CSS Anweisung stehen. Der Pfad vom background-image müsste als Link dargestellt werden und via Rechtsklick -> open in new tab (zumindest in Chrome) lässt sich der Pfad öffnen. Wenn du dann nicht dein Bild siehst, stimmt der Pfad so nicht. Der Vorteil ist auch, dass du in der URL Leiste oben dann siehst, was genau aufgerufen wurde und ggf siehst, was am Pfad falsch war.

  • Nein man muss nicht ABER so ist es sicherer ;) Wie schnell verhaspelt man sich mal mit einem Ordner. Oder man macht mal einen Slash zuviel.


    So musst du nur den Bildnamen plus Endung angeben. Es vereinfacht es doch um einiges.


    Und wenn ich es recht im Kopf habe geht er mit seinem Befehl in den Images Ordner der oberhalb vom ACP liegt. Der eigentliche Stil liegt aber im wcf Ordner.

    Müsste es da nicht ../images/ordner_vom_stil_/mein_bild.png heissen? So wie T1N0 es schon richtig postete?


    Womit wir eine Fehlerquelle mehr hätten :)

    It's not a trick, it's a Zoni


    This is 10% Egg
    20% Milk
    15% Chocolate that is softer than silk
    5% Love
    50% Bake
    Thats 100% reason to make a cake

  • Man muss es nicht so machen. Wenn der Pfad stimmt, dann passt es auch so, wie Unkl. es gemacht hat. Zumindest sehe ich da kein Problem. Wenn er das Bild in einem bestimmten Ordner hat, kann er es ja einfach so verwenden. Wahrscheinlich stimmte bei ihm einfach der Pfad nicht.


    Unkl. Ob der Pfad stimmt, kannst du übrigens auch gut selbst testen. Wenn du in den Browsertools bist, hast du dort ja deine CSS Anweisung stehen. Der Pfad vom background-image müsste als Link dargestellt werden und via Rechtsklick -> open in new tab (zumindest in Chrome) lässt sich der Pfad öffnen. Wenn du dann nicht dein Bild siehst, stimmt der Pfad so nicht. Der Vorteil ist auch, dass du in der URL Leiste oben dann siehst, was genau aufgerufen wurde und ggf siehst, was am Pfad falsch war.

    Ahhh ok, jetzt habe ich es verstanden. Simpel eigentlich!


    Das ../ davor hatte nur gefehlt.

    Ich dachte es mir das es an so etwas gelegen hat! :D


    Danke an euch!


    Gruß

    Unkl.

  • Weil es im WCF mit der anderen Schreibweise eingeführt wurde und ich es mir angewöhnt habe.


    UND ich zitiere mich mal selbst


    Nein man muss nicht ABER so ist es sicherer Wie schnell verhaspelt man sich mal mit einem Ordner. Oder man macht mal einen Slash zuviel.


    So musst du nur den Bildnamen plus Endung angeben. Es vereinfacht es doch um einiges.

    It's not a trick, it's a Zoni


    This is 10% Egg
    20% Milk
    15% Chocolate that is softer than silk
    5% Love
    50% Bake
    Thats 100% reason to make a cake

  • Wie gesagt es werden Ordner mit den Stilen geliefert. Also mache ich dort alles rein was zum Stil gehört, so mit habe ich alles an einem Ort und nicht wild verstreut in mehren Ordnern wenn ich einen Stil nach bearbeite zum Beispiel.

    It's not a trick, it's a Zoni


    This is 10% Egg
    20% Milk
    15% Chocolate that is softer than silk
    5% Love
    50% Bake
    Thats 100% reason to make a cake

  • kurzes Update da ich am probieren bin eben wird vielleicht ReeN freuen da er mir in den letzten tagen beigestanden hat, ich habe es mal mit dem Header versucht und es hat auf Anhieb geklappt mit folgendem Code:


    Code
    1. .pageHeaderFacade {
    2. background-image: url('#{$style_image_path}bg2.jpg');
    3. }

    Gruß

    Unkl.

  • Mir ist es einfach lieber, das Bild unter einem mir geeignet erscheinenden Pfad abzulegen

    Dem kann ich mich nur anschließen. Ich hab auch lieber meine eigene Struktur. Manchmal nutze ich das mit dem Stil-Ordner zwar, aber oft mache ich es lieber anders. Das ist ein nettes Feature, aber zum Glück kein Muss oder Zwang.


    ich habe es mal mit dem Header versucht und es hat auf Anhieb geklappt

    Sehr gut. Immer weiter so ;)

  • Es mag sein mit der eigene Struktur. Aber da sollte man erst anfangen wenn man ein wenig mehr sich damit auskennt. Das System ist nun mal so konzipiert das es so geht.


    Wie es jeder am Ende macht ist seine Sache. Aber auch mein Weg ist korrekt und muss hier nicht in eine Diskussion ausarten.

    It's not a trick, it's a Zoni


    This is 10% Egg
    20% Milk
    15% Chocolate that is softer than silk
    5% Love
    50% Bake
    Thats 100% reason to make a cake