[gelöst] ShareThis: Wie customize ich meine Chicklets richtig?
Eingetragen von Drupal_Fabe (42)am 08.03.2015 - 01:20 Uhr in
Ich habe einen blinden Fleck in Bezug auf ShareThis. Kann mir jemand kurz helfen und sagen, wie ich meine eigenen Chicklets einfügen kann?
Auf der ShareThis Settings-Seite innerhalb von Drupal gibt es zwar den Punkt "Custom Buttons via CSS".
Aber wenn ich diesen nun auswähle, in welcher CSS-Datei muss ich dann die Pfade zu meinen eigenen Icons angeben und welche CSS-Befehle benutze ich dafür korrekterweise?
Richtig dokumentiert ist das meiner Meinung nach nicht und die Angaben hier http://support.sharethis.com/customer/portal/articles/446596-chicklets
helfen mir leider auch nicht weiter.
Bisher habe ich Folgendes in der Datei "ShareThisForm.css" versucht:
.st_facebook_custom {
background-image: url("pfad-zum-eigenen-bild.png");
}Leider ohne jeden Erfolg.
Vielen Dank für Tipps!
Fabian
- Anmelden oder Registrieren um Kommentare zu schreiben
Das CSS zum Stylen der
am 08.03.2015 - 11:42 Uhr
Das CSS zum Stylen der Sharethis Buttons kannst du - wie üblich - in die CSS Datei deines Themes schreiben. Bei Contrib Themes solltest du hier ein Sub Theme anlegen und im Subtheme entsprechend das CSS per .info Datei zufügen.
Wenn dies korrekt geschehen ist, wäre es wohl am Einfachsten mithilfe der Chrome Developer Tools oder eben in Firefox (gibt da ja auch die Option ein DOM Element zu untersuchen) zu schauen, wie der Klassenname deines Facebookbuttons ist. Diesen kannst du dann in deinem CSS überschreiben.
Das Beispiel http://support.sharethis.com/customer/portal/articles/446558-custom-butt... zeigt dies eigentlich recht anschaulich.
Mit Ausnahme der Facebook Like Buttons und der Google Plus Buttons, kannst du dann die Share Widgets per CSS anpassen. Dabei ist zu beachten, dass bei Umstellung auf "Use custom CSS" im Sharethis Drupal Modul initial erstmal keine Ausgabe erfolgt.
Im Screenshot siehst du, wie man die Buttons stylen könnte (auf Bild klicken für größere Ansicht):
Wenn ich mir dein CSS so anschaue, fehlen hier noch wesentliche CSS Properties, um die Anzeige des Hintergrundbildes hier korrekt zu ermöglichen (display, width, height).
SteffenR
Hi Steffen, besten Dank für
am 08.03.2015 - 16:57 Uhr
Hi Steffen,
besten Dank für deine schnelle und umfassende Antwort.
Deine Erklärungen habe ich verstanden. Mein Problem ist aber nach wie vor: wo teile ich ShareThis den korrekten Pfad zu meinen eigenen Icons mit?
Bei dir im Screenshot ist dies dein localhost Folder. Wo hast du dies geändert?
Viele Grüße
Fabian
Warum möchtest du den Pfad
am 09.03.2015 - 08:41 Uhr
Warum möchtest du den Pfad denn Sharethis mitteilen?
Das Styling erfolgt in deinem Theme - also bei dir auf der Seite. Sharethis braucht davon nix "wissen". Wie du im Screenshot siehst, baut dir das Drupal Modul hier nur das Markup auf und du hast im Styling dann alle Möglichkeiten. Die Pfade selbst brauchst du nicht "anpacken" - die macht das Share This Modul alles automatisch.
Wichtig ist hierbei eigentlich nur, dass du das Share This Modul entsprechend konfigurierst:
admin/config/services/sharethis -> Custom Buttons via CSS
Screenshot: http://bit.ly/18u3mmQ
SteffenR
Hallo Steffen, vorab schon
am 09.03.2015 - 20:57 Uhr
Hallo Steffen,
vorab schon mal Danke für deine Geduld!
Nimm es mir nicht übel – aber ich stehe hier voll auf dem Schlauch. Wahrscheinlich mache ich einen Denkfehler. Also, ich gehe mal alles Schritt für Schritt aus meiner Sicht durch:
1) Ich gehe in die ShareThis-Konfiguration und wähle „Custom Buttons via CSS“
2) Nun sind bei mir bis auf den g+1 und den Like-Button alle ShareThis-Icons weg.
3) Dann gehe ich in das CSS-File meines Templates und binde diesen Code ein:
.st_facebook_custom {
background: url("Pfad\*.png") no-repeat scroll left top transparent;
width:32px;
height:32px;
display:block;
}
.st_pinterest_custom {
background: url("Pfad\*.png") no-repeat scroll left top transparent;
width:32px;
height:32px;
display:block;
}
4) Nun leere ich den Cache und schaue mir die Seite an.
5) Leider sind nach wie vor alle ShareThis-Icons weg (bis auf g+1 und den Like-Button).
Wo also liegt mein Fehler?
Ist mein CSS-Code also falsch?
Beste Grüße
Fabian
Ohne deine Seite zu kennen /
am 09.03.2015 - 21:01 Uhr
Ohne deine Seite zu kennen / dein Theme kann man hier nicht wirklich etwas dazu sagen.
Schau dir das Ganze doch mal in den Chrome Developer Tools oder per Firefox im Kontextmenu Element untersuchen an. Dort siehst du dann, ob die Selektoren im CSS korrekt sind und auch, ob die CSS Anweisungen auch wirklich in deinem Theme ankommen. Einen anderen Weg sehe ich da gerade nicht.
SteffenR
So, ich bin auf diese Weise
am 10.03.2015 - 20:48 Uhr
So, ich bin auf diese Weise keinen Schritt weiter gekommen.
Daher habe ich einen Block erstellt und füge den Code nun manuell ein,
dann kann ich auch alles nach Belieben anpassen :)
Ich setze den Beitrag nun auf [gelöst]
Viele Grüße
Fabian