Boolie.org

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

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;
}

View Comments

Aktuell keine Kommentare vorhanden.

nächster Beitrag