XF 1.5 XenForo Informationssystem (Notices) stylen - Anleitung, Tipps und Trick

Dieses Thema im Forum "XenForo Tipps & Tricks" wurde erstellt von otto, 22. September 2015.

  1. otto

    otto AD Lizenznehmer

    2.724
    1.112
    7. Juli 2015
    Fachinformatiker i.A.
    Leipzig
    XenForo Informationssystem (Notices) stylen - Anleitung, Tipps und Trick

    Seit XenForo 1.5.x gibt es ja ein verbessertes Informations-System (Notices, EN) welches unter anderem neuerdings schwimmende Boxen (floating box) unterstützt. Neben 4 Standard Style-Einstellungen gibt es eine 5. um eigenes CSS anzuwenden. Doch wie geht das nun?

    Zunächst erstellt man einen neuen Hinweis: ACP > Informationssystem > Informationen verwalten:

    1. Titel - der Information (wird nur im ACP angezeigt)
    2. Beitrag - Der Text der angezeigt werden soll
    3. Floating - es soll eine schwimmende Box angezeigt werden

    4. Hier nun "Anderen, Individuelle CSS Klassen verwenden" auswählen und z.B. "meinCSS" eintragen
    upload_2015-9-22_13-48-2.png


    5. Information speichern.



    Jetzt die EXTRA.CSS öffnen um deinen eigenen CSS Style festzulegen: Suche > Extra.css

    upload_2015-9-22_13-52-15.png

    Hier nun z.B. folgenden Code eintragen:
    HTML:
    /* Notices */
    
    .floatingItem.meinCSS
    {
    color: #000 !important;
    background: orange !important;
    border-color: #052E40 !important;
    }
    
    /* Notices */
    Erklärung:
    • /* Notoices */
      Stellt nur einen Kommentar dar, der dazu dient das ihr wisst wofür der Code in der Extra.CSS steht, bzw. wo er anfängt und wieder aufhört
    • .floatingItem.meinCSS
      legt die Klasse(n) fest, wobei "meinCSS" frei wählbar ist
    • color: #000 !important;
      legt die Schriftfarbe des Textes der Box auf schwarz (#000) fest, hier ginge auch "white" z.B. um die Schrift weiß zu färben
    • background: orange !important;
      analog zum vorherigen Punkt wird hier die Farbe des Hintergrundes definiert
    • border-color #052E40 !important;
      legt ebenfalls analog die Farbe des Rahmens um die Box fest. Hier ein dunkles Grau

    Das Ganze ist freilich ausbaubar - aber dies reicht als Erklärung um einen Anfang zu finden. :)


    Wäre klasse, wenn du hier deine CSS Code-Beispiele posten würdest. :like
     
    Zuletzt bearbeitet: 22. September 2015
    Maestro2k5 gefällt das.
  2. otto

    otto AD Lizenznehmer

    2.724
    1.112
    7. Juli 2015
    Fachinformatiker i.A.
    Leipzig
    Noch ein Beispiel - besser, weil ohne "!important" auskommend (und damit mich @Hoffi nicht erschlägt ;) ):

    HTML:
    /* Notices */
    
    .FloatingContainer .floatingItem.meinCSS {
        color: black;
        background-color: #000;
        border-color: @secondaryDarker;
    }
    
    /* Notices */
    Probiert einfach mal damit herum... :)
     
    Maestro2k5 gefällt das.
  3. Maestro2k5

    Maestro2k5 Administrator Lizenznehmer

    899
    366
    7. Juli 2015
    Erfurt
    Tolle Funktion.
     
    otto gefällt das.
  4. DRaver

    DRaver Moderator Lizenznehmer

    452
    216
    10. Juli 2015
    Sehr gute Anleitung. Das findet man nicht mal auf xf.com.
     
    otto und Maestro2k5 gefällt das.
OK Mehr Informationen

Diese Seite verwendet Cookies. Mit Deinem Klick auf OK, stimmst Du dem setzen von Cookies zu. Andernfalls werden keine gesetzt, was die Funktionalität einschränkt.