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 - 02: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 (2261)
am 08.03.2015 - 12: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 - 17: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 (2261)
am 09.03.2015 - 09: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 - 21: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 (2261)
am 09.03.2015 - 22: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 - 21: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

  • Entity Reference - Title Felder werden als Link angezeigt
  • PHP 8.1 - Deprecated function: rtrim()
  • Preloader / Spnner entfernen Menu Link Modal-Modul
  • Schriftgröße standard einstellen
  • Drupal Website gestalten
  • MariaDB 10.6
  • Tokens werden in Viev als Link angezeigt
  • [bug entdeckt & workaround gefunden] benutzerdefinierte Felder vom Userprofil tauchen ungefragt auch in den Forumtopics auf...
  • [gelöst] Mass contact Empfängerliste nach Taxonomy Term statt Rolle
  • Update V. 9.3.12 auf V. 9.4 mit Fehler: Modul mySQL fehlt. Bitte Hilfe.
  • Sprachpfad, in Drupal Korrekt einstellen, auch bei den Meta-Tags
  • Update von Drupal 9.3 auf 9.4 oder bei 9.3 bleiben
Weiter

Neue Kommentare

  • Es ist ein Paragraph
    vor 13 Stunden 34 Minuten
  • Danke fürs Feedback. Gut dass
    vor 3 Tagen 6 Stunden
  • Patch angewandt
    vor 3 Tagen 9 Stunden
  • core_version_requirement: ^8
    vor 5 Tagen 10 Stunden
  • core_version_requirement: ^8
    vor 5 Tagen 10 Stunden
  • ok. Wenn ich das mache
    vor 5 Tagen 10 Stunden
  • Bei gleichem Namen hat das
    vor 5 Tagen 11 Stunden
  • Sorry, dass ich mich hier
    vor 5 Tagen 11 Stunden
  • Habe Patch versucht
    vor 5 Tagen 18 Stunden
  • Hier wird ein Patsch
    vor 5 Tagen 20 Stunden

Statistik

Beiträge im Forum: 247867
Registrierte User: 19593

Neue User:

  • Davidsnins
  • kudes
  • Tkakah

» Alle User anzeigen

User nach Punkten sortiert:
wla9213
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3845
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 4 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