Eigene Sharebuttons definieren
So sahen früher die Standard-Sharebuttons bei Jimdo aus:
...bei den neuen Layouts gibt es viele weitere Möglichkeiten: farbig, oder rund, oder farbig und rund, oder sechseckig etc.
Wenn die Standard-Sharebuttons für die eigene Webseite immer noch nicht gefallen, können sie geändert werden! Dazu muss nur das Sharebutton-Bild, das Jimdo standardmäßig für die Sharebuttons zur Verfügung steht, durch ein eigenes Bild ersetzt werden.
Eigene Sharebutton-Garfik erstellen
Der erste Schritt ist die Erstellung einer eigenen Grafik für die Sharebuttons. Hiebei ist es wichtig, die Positionswerte der einzelnen Icons einzuhalten.
Dazu können wir uns an den Jimdo-Originalgrafiken orientieren. Von den gibt es mehrere, da Jimdo drei verschieden Größen zur Auswahl anbietet: 16x16, 32x32 und 64x64 Pixel (hier die Grafiken des
alten Jimdo - die neuen Grafiken sehen etwas anders aus, aber die Positionswerte sind gleich geblieben!)
Um eine möglichst genaue Positionierung der Icons auf der eigenen Sharebutton-Grafik hin zu bekommen, empfiehlt es sich, die Jimdo-Original-Grafik für die jeweils benötigte Pixelgröße zu kopieren und als Vorlage zu verwenden.
Die aktuellen Standard-Grafiken für die Sharebuttons findet man, wenn man im Ansichtsmodus mit der rechten Maustaste auf die gewählten Sharebuttons klickt und "Elemente untersuchen" wählt.
Im folgenen Beispiel wurde die Grafik mit den 32px großen Icons gewählt (hier: Standard/Schwarz), da die Sharebuttons der Webseite ebenfalls eine Größe von 32x32 Pixel bekommen sollen:
im CSS-Feld der Entwickler-Werkzeuge steht dann folgender Code:
div.cc-sharebuttons-size-32.cc-sharebuttons-style-black.cc-sharebuttons-design-square a {
background-image: url("/s/img/web/module/sharebuttons/icons32_black_square.png");
}
...der rot markierte String ist der Pfad der Original-Grafik:
Meine neue Sharebutton-Grafiken sehen nach der Überarbeitung so aus:
oder alternativ:
Für das Beispiel habe ich nur die Icons übernommen, die später auch auf der Webseite erscheinen sollen, nämlich: facebook, Twitter, Mail und Google+. Die restlichen Grafiken habe ich mir
gespart, da ich sie nicht verwenden will.
Einbinden der neuen Sharebutton-Grafik
Um die neue Sharebutton-Grafik einzubinden, ist folgendes zu tun:
- Grafik auf die eigene Webseite hochladen (...auf eine versteckte Seite!)
- Kopieren der Grafikadresse (Ansichts-Modus, rechte Maustaste)
Zum Beispiel:
"http://u.jimdo.com/www32/o/s69854fd484825586/img/ib88f00e4f60c855b/1368962963/std/image.gif"
- Einfügen der Grafikadresse als background-URL in folgenden CSS-Code:
div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-1 a {
/*---- altes Jimdo, 32px-Buttons --------------*/
background-image: url("http://u.jimdo.com/www32/o/s69854fd484825586/img/ib88f00e4f60c855b/1368962963/std/image.gif") !important;
}
/*---- neues Jimdo (schwarze 32px-Buttons) -------------------*/
div.cc-sharebuttons-size-32.cc-sharebuttons-style-black.cc-sharebuttons-design-square a {
/*original-Grafik*/
background-image: url("/s/img/web/module/sharebuttons/icons32_black_square.png");
/*eigene Grafik (austauschen oder hinter der orig.Grafik)*/
background-image: url("http://u.jimdo.com/www32/o/s69854fd484825586/img/ib88f00e4f60c855b/1368962963/std/image.gif"};
- Einfügen der CSS-Style-Anweisung in den Head-Bereich der Webseite zwischen
<style type="text/css">
/*hier eigene CSS-Anweisungen einsetzen*/
</style>
Kommentar schreiben
ikkel (Montag, 19 Januar 2015 17:06)
hallo + tolle seite. leider funktioniert dieses tutorial nicht mehr bei den neuen jimdo seiten...
können wir interessierten auf ein update hoffen? grüsse aus berlin, ikkel
redesign-berlin (Montag, 19 Januar 2015 23:20)
Ja, das stimmt! Ich hab es gerade mal etwas überarbeitet.
Das Problem ist der CSS-Selektor, der sich geändert hat (s. einbinden Pkt.3)
Suche Dir den richtigen Selektor, indem Du einfach ein paar Standard-Buttons setzt, dann rechte MT und "Eigenschaften". Hier findest Du in den Selektor und die originalen CSS-Eigenschaften, die Du dann verändern kannst.
LG, az