Teammitglieder online
Support-Box
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
Regeln und nützliche Hinweise
Neueste Themen
» [Invision] Erklärung PWA Aktivierung + Mobile Version Problem
von Alastor Gestern um 12:41

» Goldhauch´s Plauderforum
von Joost Fr 12 Jul 2024 - 19:34

» [Invision] User Style Änderung - Code geht nicht
von Skouliki Do 11 Jul 2024 - 23:03

» [PunBB] Forum aufsplitten/teilen - ist das möglich?
von Joost Mi 10 Jul 2024 - 17:46

» Technische Wartung in der Zentrale: Montag 1 Juli, und Montag 8 Juli
von Joost Mo 24 Jun 2024 - 17:20

» [phpBB2] Mystic - new beginning RPG
von Raine Kamiya Fr 21 Jun 2024 - 20:52

» Neue Mitarbeiter gesucht
von Joost Fr 21 Jun 2024 - 20:26

» Lange Ladezeiten
von Skouliki Mi 19 Jun 2024 - 19:35

» Gründer E-Mailadresse ändern
von Skouliki Fr 7 Jun 2024 - 12:49

» Nach Wartung Datenbankfehler
von Joost Mo 3 Jun 2024 - 12:34

» Wartung geplant Montag, 3. Juni 2024
von Joost So 2 Jun 2024 - 8:04

» Anti-Spam-Prüfung bei Mitgliedern
von Skouliki So 12 Mai 2024 - 18:10

» Die Heidekriger (WaCa) mit Punktesystem
von Rama So 21 Apr 2024 - 20:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Di 9 Apr 2024 - 14:03

» [AwsomeBB] LogIn Farbe Weiß auf weiß
von Skouliki Sa 30 März 2024 - 21:14

» kann man noch Blogs hier erstellen?
von Joost Mi 27 März 2024 - 18:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54

» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Skouliki in Lange Ladezeiten
( 2 )


» Beitrag von Joost in [Invision] User Style Änderung - Code geht nicht
( 2 )


» Beitrag von Kellytime in [PunBB] Forum aufsplitten/teilen - ist das möglich?
( 1 )


» Beitrag von Skouliki in Lange Ladezeiten
( 1 )


» Beitrag von Skouliki in [Invision] User Style Änderung - Code geht nicht
( 1 )


Ändere das Aussehen deiner Like-/Dislike-Buttons

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

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

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

Ändere das Aussehen deiner Like-/Dislike-ButtonsTUTORIAL



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:


Ändere das Aussehen deiner Like-/Dislike-Buttons Icon_thumleftPunBB
Ändere das Aussehen deiner Like-/Dislike-Buttons Icon_thumleftPhpBB2
Ändere das Aussehen deiner Like-/Dislike-Buttons Icon_thumleftPhpbb3
Ändere das Aussehen deiner Like-/Dislike-Buttons Icon_thumleftInvision
Ändere das Aussehen deiner Like-/Dislike-Buttons Icon_thumleftModernBB
Ändere das Aussehen deiner Like-/Dislike-Buttons Icon_thumleftAwesomeBB

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

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

ADMINISTRATIONS-BEREICH EINSTELLUNGEN


Ändere das Aussehen deiner Like-/Dislike-Buttons N116 Logge dich mit dem Gründeraccount ein und gehe zu:
Administrations-Bereich Ändere das Aussehen deiner Like-/Dislike-Buttons 2924924668 Anzeige Ändere das Aussehen deiner Like-/Dislike-Buttons 2924924668 Bilder und Farben Ändere das Aussehen deiner Like-/Dislike-Buttons 2924924668 Farben Ändere das Aussehen deiner Like-/Dislike-Buttons 2924924668 CSS-Stylesheet Ändere das Aussehen deiner Like-/Dislike-Buttons 2924924668

Ä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
Joost
Joost
Administrator
Administrator

Männlich Beiträge : 1038
Anmeldedatum : 29.12.12
Ändere das Aussehen deiner Like-/Dislike-Buttons Empty
Google Chrome phpBB3

gnadenlos, Vanity und Rama mögen diesen Beitrag

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten