Logo versetzen

  • Folgendes JavaScript:


    Und dann benötigt man einfach nur noch die CSS-Klasse minifiedLogo, die das Hintergrundbild aus/einblendet :)

  • Schau dir mal mein CSS dazu an. Das Logo muss natürlich noch kleiner werden.


    Code
    1. background-size: 125px;
    2. background-repeat: no-repeat;
    3. background-position-y: 5px;
    4. background-position-x: 35px;
  • Folgendes JavaScript:


    Und dann benötigt man einfach nur noch die CSS-Klasse minifiedLogo, die das Hintergrundbild aus/einblendet :)

    huhu, danke erstmal für die nette erklärung. Nun hier auf eurem Forum ist mein Problem nicht eures (da ihr es linksbündig habt ^^), dennoch habe ich eine Frage :)


    Und zwar habe ich es zentriert ausgerichtet, klappt wunderbar, nur mein Problem ist nun dass wenn man das fenster kleiner zieht dieses pageHeaderLogoSmall standardmäßig eingeblendet wird. Da dieses was ich einblende teilweise transparent ist, überschneiden sich diese dann im falle von fenster verkleinern + scrollen. Habe folgendes versucht, jedoch ohne Erfolg.



    scrollscroll.png


    Bitte um Hilfe. Vorschau http://www.itin.at (wichtig: das fenster schmal ziehen und scrollen)


  • habe es nun so gelöst

  • Tante Edit:

    Die Anleitung hier bezieht sich auf den Standard Style.

    Da die Position unter anderem oben, mittig dargestellt wird.

    Wie sich das auf andere Style auswirkt weiß ich nicht, da ich das

    1. Nicht getestet habe und 2. Auch nicht testen kann. :)


    Habe den CSS Code noch etwas verfeinert.

    Und schreibe mal eine kleine Anleitung für diejenigen die nicht so bewandert sind. ;)


    ACP --> Konfiguration --> Allgemein dort dann im Reiter Seite in der Spalte Footer-Code folgenden Code Eintragen.

    Danach geht es dann weiter an die Stil Anpassung, dazu wie folgt vorgehen:

    ACP --> Anpassung --> Stile dort dann euren Aktiven Stil Auswählen (Einfach auf den Stil Namen klicken) danach dann zum Reiter Erweiterte Einstellungen und auf den Unter Reiter Eigene Deklarationen dort dann folgendes ganz oben Eintragen

    CSS
    1. @include screen-lg {
    2. .minifiedLogo {
    3. background-image: url("hier kommt die Logo URL rein siehe dazu unter diesem CSS Code das geschriebene");
    4. background-size: 250px;
    5. background-repeat: no-repeat;
    6. background-attachment: fixed;
    7. background-position: center top;
    8. }
    9. }

    Bei background-image: url kann man sich zwischen zwei Verschiedenen Logos entscheiden.

    Entweder die small Version oder die Large.


    Die unterschiedlichen Versionen findet man wie folgt:

    ACP --> Anpassung --> Stile --> (Stil Auswählen) --> Globale Einstellungen


    Dort kann man unter Seitenlogo die beiden Verschiedenen Versionen finden zum Eintragen.

    (Ich Persönlich bevorzuge das Normale zu nehmen, und dies einfach nur zu Verkleinern ;) - Muss aber jeder selbst wissen)


    Wenn man nun zb. die Normale Version nimmt dann trägt man diese bei background-image: url zwischen den beiden "einfach ein.


    Das war es auch schon. :)

    Das Logo wird dann beim runterscrollen mittig Angezeigt in der Oberen Leiste.


    Bitte tut mir ein Gefallen und kopiert diese Anleitung nicht einfach, und Verbreitet diese, immerhin ist das meine Freizeit die ich hier mit dem Schreiben usw. geopfert habe, Respektiert dies bitte, danke.

    Ihr könnt ja gerne den Beitrag hier Verlinken, falls ihr diese Anleitung teilen wollt.


    Wer Rechtschreibfehler findet darf diese gerne behalten. 8o

    Für Anregung und Kritik bin ich offen, und die ist auch gerne Erwünscht.


    Beste Grüße

  • zeromatick ändere mal deinen CSS Code so ab.


    Erklärung dazu: Artikel nebeneinander auch mobil gut lesbar machen


    CSS
    1. @include screen-sm-up {
    2. .minifiedLogo {
    3. background-image: url("hier kommt die Logo URL rein siehe dazu unter diesem CSS Code das geschriebene");
    4. background-size: 250px;
    5. background-repeat: no-repeat;
    6. background-attachment: fixed;
    7. background-position: center top;
    8. }
    9. }


    oder


    CSS
    1. @include screen-lg {
    2. .minifiedLogo {
    3. background-image: url("hier kommt die Logo URL rein siehe dazu unter diesem CSS Code das geschriebene");
    4. background-size: 250px;
    5. background-repeat: no-repeat;
    6. background-attachment: fixed;
    7. background-position: center top;
    8. }
    9. }


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