Ändere das Aussehen deiner Like-/Dislike-Buttons

von **Joost** Di 29 März 2022 - 14:09



Ändere das Aussehen deiner Like-/Dislike-Buttons

TUTORIAL

Hallo zusammen. Das folgende Tutorial soll euch helfen das Aussehen der neuen „Gefällt mir“-Buttons zu ändern.

FUNKTIONIERT FÜR DIE FOLGENDEN FOREN-VERSIONEN:

PunBB
PhpBB2
Phpbb3
Invision
ModernBB
AwesomeBB

 Vorher:

Ändere das Aussehen deiner Like-/Dislike-Buttons Captu372

 Nachher:

Ändere das Aussehen deiner Like-/Dislike-Buttons Captu371

ADMINISTRATIONS-BEREICH EINSTELLUNGEN

Logge dich mit dem Gründeraccount ein und gehe zu:

Administrations-Bereich Anzeige  Bilder und Farben Farben CSS-Stylesheet

Ändere das Aussehen deiner Like-/Dislike-Buttons N217

Kopiert den CCS-Code für euer Forum und fügt sie dort ein.

 CSS Codes

PunBB, PhpBB2 & Phpbb3 CSS Code:

Invision CSS Files:

Code:: .fa_like_div {margin-left: 0px;}button.rep-button.fa_like, button.rep-button.fa_dislike,button.rep-button.fa_liked,button.rep-button.fa_disliked{ background: linear-gradient(rgb(49, 49, 49)0%,rgb(49, 49, 49)100%); border: 1px solid #2c2c2c !important; box-shadow: 0 0 0 1px #2B2B2B inset;}.rep-button, .rep-button:active, .rep-button:focus { border: 1px solid #2c2c2c; border-radius: 4px; color: #C2C2C2; cursor: pointer; float: left; font-family: Trebuchet MS; font-size: 12px; font-weight: 700; line-height: 1.5; margin: 3px 11px 0 0; outline: none; padding: 6px 10px 6px 10px; position: relative; text-transform: uppercase; transition: color .4s; background-color: #2e2e2e;} button.rep-button.fa_liked{ color: #4CAF50; border: 1px solid #2c2c2c; border-radius: 4px; float: left; font-family: Trebuchet MS; font-size: 12px; font-weight: 700; line-height: 1.5; margin: 3px 11px 0 0; outline: none; padding: 6px 10px 6px 10px; position: relative; text-transform: uppercase; transition: color .1s; background-color: #2e2e2e; opacity: 1 !important; pointer-events: auto; cursor: pointer;}button.rep-button.fa_dislike{ color: #C2C2C2; border: 1px solid #2c2c2c; border-radius: 4px; float: left; font-family: Trebuchet MS; font-size: 12px; font-weight: 700; line-height: 1.5; margin: 3px 11px 0 0; outline: none; padding: 6px 10px 6px 10px; position: relative; text-transform: uppercase; transition: color .1s; background-color: #2e2e2e; opacity: 1 !important; cursor: pointer;}button.rep-button.fa_disliked{ color: #F44336 !important; border: 1px solid #2c2c2c; border-radius: 4px; float: left; font-family: Trebuchet MS; font-size: 12px; font-weight: 700; line-height: 1.5; margin: 3px 11px 0 0; outline: none; padding: 6px 10px 6px 10px; position: relative; text-transform: uppercase; transition: color .1s; background-color: #2e2e2e; opacity: 1 !important; pointer-events: auto; cursor: pointer;}.fa_liked path { fill: #4CAF50; }.rep-button{ border: 1px solid #2c2c2c; border-radius: 4px; color: #C2C2C2; cursor: pointer; float: left; font-family: Trebuchet MS; font-size: 12px; font-weight: 700; line-height: 1.5; margin: 3px 11px 0 0; outline: none; padding: 6px 10px 6px 10px; position: relative; text-transform: uppercase; transition: color .4s; background-color: #2e2e2e;}.rep-button:hover{opacity: 0.8;transition-duration: .5s;} .rep-button svg { color: #4ab01c; font-size: 20px; text-shadow: 0 0 1px #FFF; padding: 4px 3px 6px 7px; background-color: #e1e1e1; margin: -5px 1px -5px -9px; margin-right: 7px !important; border-radius: 2px 0px 0px 2px;} .rep-button{ height: 32px;}

ModernBB CSS Files:

AwesomeBB CSS Files:

Ihr könnt die Farbe selbst ändern, um sie an eure eigenes Forendesign anzupassen.

Ändere das Aussehen deiner Like-/Dislike-Buttons N316

Vergesst nicht zu speichern 

Wenn Ihr eure Mitglieder davon abhalten möchtet, die Likes oder Dislikes zu entfernen, sobald sie gedrückt wurden, könnt Ihr den folgenden Teil der CSS-Dateien heraussuchen und ändern.
 Findet:

Code:: pointer-events: auto;

 Ersetzt diese mit:

Code:: pointer-events: none;

Wenn Ihr irgendwelche Probleme habt, öffnet bitte ein neues Thema und bittet um Hilfe. Stellet sicher, dass ihr eure Foren-URL und einen Link zu diesem Thema angebt.

Wir hoffen, dass euch dieser tolle kleine Tutorial gefällt, wie Sie die Änderung vornehmen können.

Euer Team von Forumieren king

	Neue Beiträge seit dem letzten Besuch.	
	Textbausteine des MODERATIONSTOOL	
	AB > PFAD > GENERATOR	
	FORUM > PFAD > GENERATOR	
	Unterstützung Lösungs-Probleme	
	Auffällige User	
	Der Runde Tisch	
	HÄUFIG GESTELLTE FRAGEN	