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

[Tamara-Jasmin]

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):

/* 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

 

[otto]

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

 

[Kirby]

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 ^.^

 

[otto]

Ich weiß - hier ists für XF2

Wer das für XF 1.5.x aber auch will:
Öffnen: Extra.CSS und hinzufügen...

.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:

/* 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:


und mit Mouseover:

 

[otto]

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"

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...

 

[argy]

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

 

[Tamara-Jasmin]

z.B. das hier:

.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]

 

[argy]

Funktioniert... Den Background hab ich weg gelassen aber so passt es. Vielen Dank.