XF2.1 Buttons in Themen und Beiträgen - CSS Hack

Dieses Thema im Forum "Style und Design" wurde erstellt von Tamara-Jasmin, 7. Sep. 2018.

  1. Tamara-Jasmin

    Tamara-Jasmin Aktives Mitglied Lizenzinhaber

    Ihr kennt ja alle die langweiligen Links unten ... Bearbeiten, Löschen, Geschichte usw...
    Das hebt sich einfach nicht ab, ja ist sogar richtig langweilig.
    Hab heute Nacht ein wenig gebastelt und auch das Umbruchproblem mit den Symbolen gelöst,

    Im Anhang das neue Design - die Farben müsst ihr halt an eure eigene Umgebung anpassen.

    Wenn es euch gefällt, lasst doch einfach ein Danke da ;)

    Code (einzutragen in extra.less (Templates):

    HTML:

    /* Buttonleiste aufpimpen */
    .message-footer {line-height: 30px;}
    .actionBar-action {white-space: nowrap; background-color: rgba(255,255,20,0.4);box-shadow: 3px 3px 5px #004400;}
    .actionBar-action--inlineMod::before {font-family:FontAwesome; content:"Beitrag markieren: \20";}
    .actionBar-action--report::before {font-family:FontAwesome; content:"\20\f0f3\20"; color: #aaa;font-size:18px;}
    .actionBar-action--edit::before {font-family:FontAwesome; content:"\20\f044\20"; color: green;font-size:18px;}
    .actionBar-action--history::before {font-family:FontAwesome; content:"\20\f1da\20"; color: brown;font-size:18px;}
    .actionBar-action--delete::before {font-family:FontAwesome; content:"\20\f12d\20"; color: orange;font-size:18px;}
    .actionBar-action--warn::before {font-family:FontAwesome; content:"\20\f071\20"; color: #ff3030;font-size:18px;}
     
    Liebe Grüsse:
    Tammy
     

    Anhänge:

    otto gefällt das.
  2. otto

    otto Bekanntes Mitglied Lizenzinhaber

    Bis auf den Farb-gestalterischen Aspekt gelungen - werds die Tage mal testen.
     
  3. Kirby

    Kirby Bekanntes Mitglied Lizenzinhaber

    Meine persönliche Meinung: Viel zu auffällig.

    So lenkst Du nur vom eigentlichen Content, dem Beitrag selbst, ab - die Links (Melden, Bearbeiten, etc.) sind sekundär, werden selten benötigt und sollten daher möglichst dezent sein.
    Das einzige was man etwas herausstellen könnte (und ggf. auch sollte) sind Gefällt mir und Zitieren, denn da interagiert der User - alles andere ist eher lästiger "Verwaltungskram"

    Wirkt (bis auf die Farben) ein wenig wie vBulletin 3 ^.^
     
    Masetrix gefällt das.
  4. otto

    otto Bekanntes Mitglied Lizenzinhaber

    Ich weiß - hier ists für XF2

    Wer das für XF 1.5.x aber auch will:
    Öffnen: Extra.CSS und hinzufügen...
    Code (Text):
    .item.control {background-color: white; padding: 1px 3px; border-radius: 2px; border: 1px solid; border-color: lightgrey; box-shadow: 2px 2px 3px lightgrey}
    Das macht gleich mal ALLE Links zu Buttons. Will man es nur für einzelne Links, dann statt .item.control eben .item.control.delete z.B. um den "Löschen" Link in den Beiträgen zum Button zu machen.

    Und um es, wie Kirby schrieb, nicht zu auffällig zu machen, könnte man einfach folgendes hinzufügen:
    Code (Text):
    /* ausblenden der Beitrags Bearbeitungslinks - einblenden bei Mouseover */
    .message .privateControls, .message .publicControls { opacity: 0.5; transition: all 0.2s ease-in-out; }
    .message:hover .privateControls, .message:hover .publicControls {opacity: 1; }
    Wobei opacity angibt wie "durchsichtig" die die Buttons sind. 1 = voll da, 0.5 = halb durchsichtig. So hab ich das bei mir im www.zetor-forum.de wenns mal wer live sehen mag.

    ohne Mousover:
    upload_2018-9-25_19-31-40.png

    und mit Mouseover:
    upload_2018-9-25_19-32-20.png
     
    Tamara-Jasmin gefällt das.
  5. otto

    otto Bekanntes Mitglied Lizenzinhaber

    Nö - zumindest auch Bearbeiten - da zu viele dies gern übersehen und dann teils X Posts unter ihre eigenen setzen statt zu bearbeiten und zu ergänzen. ;) OK - auch dafür gibts Add-ons zum auto-merge... :D
     
    Tamara-Jasmin gefällt das.
  6. argy

    argy Mitglied Lizenzinhaber

    Ich würd gern einfach nur die Farbe von "Gefällt mir" anpassen. (also ohne Button)
    Hat da jemand nen Tipp dazu?
     
  7. Tamara-Jasmin

    Tamara-Jasmin Aktives Mitglied Lizenzinhaber

    z.B. das hier:
    Code (Text):
    .actionBar-action.actionBar-action--like {color: #3333cc; background-color: #bbb;}
    Musst nur die Farben anpassen, hab nur gerade was zum testen eingetragen ;)

    LG: Tammy[/CODE]
     
    Zuletzt von einem Moderator bearbeitet: 27. Sep. 2018
    Alluidh gefällt das.
  8. argy

    argy Mitglied Lizenzinhaber

    Funktioniert... Den Background hab ich weg gelassen aber so passt es. Vielen Dank.
     
    Masetrix gefällt das.
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden