Jetpack bietet eine saubere Art Share Icons auf seinem Blog einzubauen, aber das Styling ist ein wenig eigen. Ich habe die Icons zum Sharen mit an die Marken Farben angepasst und noch ein wenig optimiert.
- Plugin installieren
- neue CSS Datei
- CSS einfügen
Plugin installieren
Um eine saubere Übersicht von seinen CSS Änderungen zu haben, kann ich das Plugin „Simple Custom CSS and JS“ empfehlen. Diese Anleitung basier auch auf diesem Plugin, ist aber nicht zwangsweise Notwendig.
Download Simple Custom CSS and JS
neue CSS Datei
Im Adminbereich findet ihr nach der Installation den Menüpunkt „Custom CSS & JS“, danach kligt ihr auf „ADD CSS CODE“. Auf der rechten Seite stellt ihr dann noch ein, das der Code im Footer eingetragen werden soll | Where on page -> Footer.
CSS einfügen
Mit diesem CSS Code werden die Buttons ein wenig moderner.
// ### ########################### ###
// ### Buttons im Flat Stil ändern ###
// ### ########################### ###
.sd-sharing a{
padding: 5px 10px !important;
color: #fff !important;
border-radius: 0px !important;
box-shadow: 0 0 0 !important;
border: 0 !important;
}
// ### ################################### ###
// ### Hintergrundfarbe an Marken anpassen ###
// ### ################################### ###
.sd-sharing a.share-twitter{
background-color: #1da1f2 !important;
}
.sd-sharing a.share-facebook {
background-color: #3b5998 !important;
}
.sd-sharing a.share-google-plus-1 {
background-color: #ea4335 !important;
}
.sd-sharing a.share-linkedin {
background-color: #0077b5 !important;
}
.sd-sharing a.share-reddit {
background-color: #ff4500 !important;
}
.sd-sharing a.share-jetpack-whatsapp {
background-color: #25d366 !important;
}
.sd-sharing a.share-email, .sd-sharing a.share-print {
background-color: #000000 !important;
}
.sd-content {
text-align: center;
}
// ### ##################### ###
// ### Sharetext Weiß machen ###
// ### ##################### ###
.share-icon span {
color: #fff;
}
.share-icon::before {
color: #fff;
}