Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Module ›

[gelöst] ShareThis: Wie customize ich meine Chicklets richtig?

Eingetragen von Drupal_Fabe (42)
am 08.03.2015 - 01:20 Uhr in
  • Module
  • Drupal 7.x

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

‹ Hilfe mit dem Modul 'Backup and Migrate' [gelöst] ShareThis: Wie customize ich meine Chicklets richtig? ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Das CSS zum Stylen der

Eingetragen von SteffenR@drupal.org (2262)
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

http://www.twitter.com/_steffenr
Drupal-Initiative e.V.

undpaul

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hi Steffen, besten Dank für

Eingetragen von Drupal_Fabe (42)
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

-----
Fabian
Webmaster von
http://www.kunst-in-bildern.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Warum möchtest du den Pfad

Eingetragen von SteffenR@drupal.org (2262)
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

http://www.twitter.com/_steffenr
Drupal-Initiative e.V.

undpaul

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hallo Steffen, vorab schon

Eingetragen von Drupal_Fabe (42)
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

-----
Fabian
Webmaster von
http://www.kunst-in-bildern.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ohne deine Seite zu kennen /

Eingetragen von SteffenR@drupal.org (2262)
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

http://www.twitter.com/_steffenr
Drupal-Initiative e.V.

undpaul

  • Anmelden oder Registrieren um Kommentare zu schreiben

So, ich bin auf diese Weise

Eingetragen von Drupal_Fabe (42)
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

-----
Fabian
Webmaster von
http://www.kunst-in-bildern.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Wie in hook_views_query_alter() einen join auf Tabelle url_alias durchführen?
  • Theme Classy sei installiert, ist aber nicht bei Themes
  • fbsmp\plugins Hilfe
  • Composer 1 zu Composer 2
  • Migration über feeds von D6 auf D8
  • Bitte um Einschätzung: Upgrade von Drupal 7 auf 9
  • Scroll zu View-Ergebnissen nachdem Filter angewendet ist
  • SQL-Injection? User hat sich Zugriff aufs Admin-Konto geholt und Änderungen vorgenommen.
  • [gelöst] Persönliches Kontaktformular, oder interne User Nachrichten
  • Webform Progress Symbol (Loading icon)?
  • Mehrere freie Mitarbeiter:innen gesucht für Kooperation
  • Webform Submission Eingaben über Views ausgeben?
Weiter

Neue Kommentare

  • Gleiches Problem: bootstrap 4
    vor 18 Stunden 2 Minuten
  • Da wirst Du den Bug wohl
    vor 21 Stunden 2 Minuten
  • Immer noch composer 1 zu 2
    vor 1 Tag 11 Stunden
  • Feed Tamper
    vor 1 Tag 13 Stunden
  • Sorry, dann gab es das bei
    vor 1 Tag 13 Stunden
  • Beziehung Branche Adresse!
    vor 1 Tag 13 Stunden
  • Auf Englisch heißt das
    vor 1 Tag 16 Stunden
  • Composer Upgrade bei bestehendem Projekt
    vor 1 Tag 20 Stunden
  • Du meinst Argument?
    vor 1 Tag 20 Stunden
  • Um die einzelnen Felder der
    vor 1 Tag 22 Stunden

Statistik

Beiträge im Forum: 248393
Registrierte User: 19754

Neue User:

  • Aman_Musani
  • Dustinjex
  • Rickywap

» Alle User anzeigen

User nach Punkten sortiert:
wla9288
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3845
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 6 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association