1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Um Zugriff auf die Ressourcen sowie auf Teile des Forums zu erhalten, müsst ihr euren XenForo Validation Token an dieser Stelle hinterlegen. Probleme in diesem Umfeld bitte im Forum melden. Danke!
    Information ausblenden

Avatar + Benutzerbanner ändern

Dieses Thema im Forum "Style und Design" wurde erstellt von BFD_Heinerich, 17. Dez. 2017.

  1. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Mich stört schon seit längerer Zeit eine "Kleinigkeit" ...
    Die Beschriftung für das Bild, neben den Beiträgen ist rechtsbündig, die der Beschriftungen für Banner zentriert formatiert.
    Ggf. kann ich eine weitere Änderung, in einem Aufwasch erledigen.
    Da ich ja wenig bis keine Ahnung habe, brauche ich eure Hilfe (vermutlich bei CSS).

    Das will ich machen:
    [​IMG]

    Und nu brächte ich ne Info, wie die CSS-Datei heißt und wo die liegt, damit ich den 1. Schritt hinbekomme.

    Für andere Benutzergruppenbanner müsste ich, wenn ich das richtig verstanden habe, eigene css-Dateien (??) erstellen. Jedenfalls sehe ich, in den Einstellungen der Benutzergruppen, unter "Erscheinungsbild des Banners", ganz am Ende "Andere, individuellen CSS Klassen-Namen verwenden". Ich nehme an, dass ist ein Verweis, auf eine CSS-"Datei" (oder Beschreibung oder was auch immer).

    Sehr, sehr dankbar wäre ich natürlich, wie immer .... ;)
     
  2. McAtze

    McAtze Innendienst Lizenzinhaber

    Zu allererst ist die CSS-Datei IMMER die EXTRA.css und wird nur in deinem Style verändert. Wie Styles am besten angelegt werden findest ganz unten noch einmal..

    1. Wie erwähnt suchst du in das Template EXTRA.css und öffnest diese zum Bearbeiten in deinem Style. Eintragen solltest du diesen Code..
    Code:
    .messageUserBlock a.username,
    .messageUserBlock .userTitle { text-align: center; }
    2. Für eigene Benutzerbanner nimmst du auch die EXTRA.css und erstellst deine eigenen CSS-Klassen. Da hatte, glaube ich, @V0RT3X mal was zu geschrieben.

     
    Lemminator, BFD_Heinerich und V0RT3X gefällt das.
  3. V0RT3X

    V0RT3X Bekanntes Mitglied Lizenzinhaber

  4. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Aaaaaha!
    Dann werde ich mal schauen, ob ich was gebacken bekomme ....

    Daaanke, schon mal!
     
  5. Micky

    Micky Mitglied Lizenzinhaber

    Hallo,

    ich hatte z.B. meine Banners in der extra.css wie folgt:

    /* USER_BANNERS */
    Code:
    .userBanner.bannerDonator { color: black; font-weight: bold; background-color: #ffd700; border-color: #a67c00; }
    .userBanner.bannerDonator.wrapped span { background-color: #a67c00; }
    
    .userBanner.bannerStaff { color: #22229c; font-weight: bold; background-color: #98b5e2; border-color: #cccccc; }
    .userBanner.bannerStaff.wrapped span { background-color: #cccccc; }
    
    .userBanner.bannerAdmin { color: black; font-weight: bold; background-color: black; border-color: #010101; }
    .userBanner.bannerAdmin.wrapped span { background-color: #010101; }
    
    .userBanner.bannerSuperMod { color: black; font-weight: bold; background-color: blue; border-color: #00F; }
    .userBanner.bannerSuperMod.wrapped span { background-color: #00F; }
    
    .userBanner.bannerMod { color: black; background-color: green; font-weight: bold; border-color: #008000; }
    .userBanner.bannerMod.wrapped span { background-color: #008000; }
    
    .userBanner.bannerVerstorben { color: black; background-color: white; font-weight: bold; border-color: #000000; }
    .userBanner.bannerVerstorben.wrapped span { background-color: #000000; }
    
    Und dann muss man noch in der passenden Benutzergruppe (hier mal der Admin):
    Erscheinungsbild des Banners: Andere, individuellen CSS Klassen-Namen verwenden: und im Feld userBanner bannerAdmin eingetragen.
     
    Zuletzt von einem Moderator bearbeitet: 18. Dez. 2017
    BFD_Heinerich, McAtze und Alluidh gefällt das.
  6. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Ich noch einmal! :p
    Wenn ich das richtig erinnere, dann wäre es doch so, dass, bei einem Umstieg auf XF 2.x nix (Style etc.) übernommen wird.
    In dem Fall könnte ich doch einfach versuchen, eines der bestehenden Banner "umzubiegen ....
    Bevor wir nach 2.x rüber gehen, wird es noch dauern und dann könnte man ja die eigenen Banner in einer "extra.css" definieren.
    Wir brauchen momentan max. 2 Banner. Die anderen werden nicht benutzt.
    Da ich mich, in den Innereien von XF (noch) nicht so auskenne, wäre das event eine Lösung, die uns kurzfristig helfen würde.
    Wir brauchen eine kleine Lösung ab dem 1. Januar oder kurz danach ....
     
  7. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Momentan sieht unsere extra.css ziemlich leer aus ..... :rolleyes: (wehe es lacht jemand .... [​IMG] )

    Code:
    <xen:include template="runaway_css.css" />
    Es gibt dann noch einen weiteren Reiter mit "runaway_css.css", in dem wohl unsere Style-Einstellungen stehen .... (wehe es lacht jemand .... [​IMG] )

    Ist das richtig, dass im Feld für die extra.css anschließend folgendes stehen müsste:
    Code:
    <xen:include template="runaway_css.css" />
    .messageUserBlock a.username,
    .messageUserBlock .userTitle { text-align: center; }
    
     
    McAtze gefällt das.
  8. Micky

    Micky Mitglied Lizenzinhaber

    Du kannst doch mit Boardmitteln Banner erstellen, sind dann zwar Rechteckig aber es geht...
    Meine Banner für 2.0 sehen jetzt so aus
    Code:
    /* USER_BANNERS */
    
    .userBanner.bannerDonator { color: black; font-weight: bold; background: linear-gradient(0deg, #ffd700, mix(#ffd700, white, 50%)); border-color: #a67c00; }
    .userBanner.bannerDonator.wrapped span { background-color: #a67c00; }
    .userBanner.bannerStaff { color: #22229c; font-weight: bold; background-color: #98b5e2; border-color: #cccccc; }
    .userBanner.bannerStaff.wrapped span { background-color: #cccccc; }
    .userBanner.bannerAdmin { color: white; font-weight: bold; background: linear-gradient(0deg, black, mix(black, white, 50%)); border-color: #010101; }
    .userBanner.bannerAdmin.wrapped span { background-color: #010101; }
    .userBanner.bannerSuperMod { color: white; font-weight: bold; background: linear-gradient(0deg, blue, mix(blue, white, 50%)); border-color: #00F; }
    .userBanner.bannerSuperMod.wrapped span { background-color: #00F; }
    .userBanner.bannerMod { color: black; background: linear-gradient(0deg, green, mix(green, white, 50%)); font-weight: bold; border-color: #008000; }
    .userBanner.bannerMod.wrapped span { background-color: #008000; }
    .userBanner.bannerVerstorben { color: black; background-color: white; font-weight: bold; border-color: #000000; }
    .userBanner.bannerVerstorben.wrapped span { background-color: #000000; }
    
    Und in den Benutzerrechten stellst Du diese mit z.B. bannerAdmin ein
     
  9. McAtze

    McAtze Innendienst Lizenzinhaber

    Korrekt..
     
    BFD_Heinerich gefällt das.
  10. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    :D:D:D:D
     
  11. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Ich hab jetzt grad aml gesucht und die "user_banner.css" gefunden.
    Gehe ich richtig davon aus, dass das die Banner sind, die im ACP zur Auswahl, bei den Usergruppen, zur Verfügung stehen?

    Dort finde ich, zu Bannern, z.B. einen Eintrag:

    Code:
    .userBanner.bannerOrange     { color: black; background-color: orange; border-color: #FFC520; }
    .userBanner.bannerOrange.wrapped span { background-color: #FFC520; }
    
    ".userBanner.bannerOrange" und ".userBanner.bannerOrange.wrapped span" dürften Namen für die Darstellungsform sein. Welche davon wird eigentlich bevorzugt?

    Bei ".userBanner.bannerOrange" vermute ich folgendes:
    color: = Schriftfarbe
    background-color: = Füllung des Banners
    border-color: = Farbe des Randes

    Könnte ich also, irgendeinen Banner in folgende Definierung verändern:
    .userBanner.bannerBVB { color: black; background-color: #fbdb0c; border-color: black; }

    Würde das bereits ausreichen oder müsste ich folgendes beschreiben:
    .userBanner.bannerBVB { color: black; background-color: #fbdb0c; border-color: black; }
    .userBanner.bannerBVB.wrapped span { background-color: #black; }

    Wenn meine Kombinationsgabe hingehauen haben sollte, müsste das Ganze dann (hoffentlich) so aussehen:

    [​IMG]
     
  12. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Ich schnippsel mir mal ein Beispiel raus!

    Was in etwa so aussieht:

    [​IMG]


    "bannerMod" eingetragenwerden?

    Die Banner-Codes stehen einfach so, ohne irgendwelche Überschriften oder ähnliches, in der "extra.css" rum ....

    Sorry für meine "laxe" Ausdrucksweise. Ist immer so, wenn ich konzentriert herumkombiniere. Schließlich ist der Bereich vollkommenes Neuland für mich.
    Für "euch" ist sowas ganz "geläufig" ....

    - Blindfische - sind eben (noch) anders ..... :rofl:
     
  13. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Ich probiere gez einfach mal aus. Kann ja Code-Schnippsel, in der "extra.css" auch wieder löschen .... :dontmention:
     
  14. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Funktioniert nicht!!??
    Meine "extra.css" sieht jetzt so aus:

    Code:
    <xen:include template="runaway_css.css" />
    .messageUserBlock a.username,
    .messageUserBlock .userTitle { text-align: center; }
    
    .userBanner.bannerVorst { color: black; background-color: #fbdb0c; font-weight: bold; border-color: black; }
    .userBanner.bannerVorst.wrapped span { background-color: black; }
    Ergebniss:

    [​IMG]

    Ich warte dann mal auf Rückmeldungen .... :unsure:
     
  15. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Hab grad bemerkt, dass ich in der "extra.css" des Boardstyles verändert hatte.
    Das hab ich rückgängig gemacht und den Code in die "extra.css" des "default-style" eingefügt. Ergebnis immer noch, wie oben, in der Grafik, angezeigt ....
     
  16. Micky

    Micky Mitglied Lizenzinhaber

    Hast Du auch das in die Benutzerrechte eingetragen? Ich hatte das weiter oben ja beschrieben.
     
  17. Micky

    Micky Mitglied Lizenzinhaber

    Opps, in deinem Fall 'userBanner bannerVorst'
     
  18. BFD_Heinerich

    BFD_Heinerich ~ Blindfisch ~ Lizenzinhaber

    Ich hab jetzt meine "kleine Lösung" hinbekommen.
    In dem Style, den wir installiert haben, habe ich einen Eintrag in der "user_banners.css" modifiziert.
    Wir brauchen die Banner ohnehin ansonsten nicht.

    Sieht jetzt so aus:

    [​IMG]

    Ich weiß, ist ein wenig "Pfuscherei" aber wenigstens ist die dokumentiert .... :rofl:

    Wenn wir irgendwann updaten, können wir das richtig machen.
    Deine Hinweise haben aber trotzdem geholfen! Danke!!! ;)

    Edit: Die 2. Benutzergruppe, die wir brauchen, hat auch hingehauen ..... :D
     
    Zuletzt bearbeitet: 21. Dez. 2017
  19. V0RT3X

    V0RT3X Bekanntes Mitglied Lizenzinhaber

    kleiner tipp: nicht in den originaltemplates rumwerkeln. besser eigene templates/template modifikationen anlegen oder die extra.css/.less, du kannst da auch mit !important arbeiten.
     
    otto gefällt das.
  20. sparkoon

    sparkoon Aktives Mitglied Lizenzinhaber

    nette erklärung aber dann stelle ich mir glatt die frage warum man es nicht machen soll ?

    sind die dann hinfällig wenn man nächste update macht oder werkelt man da was kaputt :D