Skalierung Social Buttons

  • Resolved detoris

    (@detoris)


    9 years, 1 month ago

    Hallo,

    ich bin gerade auf dieses tolle Plugin gesto?en und bin ein wenig am testen. Dabei ist mir folgendes aufgefallen. Ich benutze 4 Buttons (Facebook, Twitter, Google+, Mail). Eingestellt habe ich folgendes:

    Reduziere die Buttongr??e um 30%
    Strecke die Buttons horizontal auf volle Breite
    Aktiviere die Statistik (share counts).

    Wenn das Fenster nun ganz schmal eingestellt ist, sind die Buttons quadratisch und zeigen keinen Z?hler an. Das ist auch so weit o.k. Doch ganz kurz bevor die Buttons rechteckig, aufgrund des breiteren Fensters, werden, haben sie noch mal einen Zustand bei dem sie quadratisch sind und trotzdem einen Z?hler überlappend anzeigen. Das soll so bestimmt nicht sein – oder? Das spielt sich aber wirklich nur in ein paar Pixel Breite ab. Bei der Anzeige auf einem Samsung S4 Handy ist das aber z.B. genau der Fall.

    https://www.ads-software.com/plugins/shariff/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Jan-Peter

    (@starguide)

    Hallo detoris,

    das h?ngt wahrsheinlich auch ein bisschen mit dem “Drumherum” der eigenen Seite zusammen. H?ttest du einmal einen Link zu deiner Seite, damit ich mir das selber ansehen kann?

    Viele Grü?e,
    JP

    Plugin Author Jan-Peter

    (@starguide)

    Hallo detoris,

    ich habe es glaube ich bereits gefunden. Du hast echt gute Augen! Der Fehler tritt ganz exakt nur bei einer einzelnen Pixelanzahl auf, nicht einer mehr, nicht einer weniger. ??

    Werde ich mit dem n?chsten Update beheben! Danke fürs melden.

    Viele Grü?e,
    JP

    Thread Starter detoris

    (@detoris)

    Danke fürs Nachschauen. Das bemerken war Zufall, da das S4 genau diese Aufl?sung benutzt. Ich habe es gerade mal auf meiner eigentlichen Webseite eingebaut.

    Plugin Author Jan-Peter

    (@starguide)

    Hallo detoris,

    der Fehler sollte mit Version 3.4.2 behoben sein. K?nntest du es einmal mit dem S4 testen?

    Viele Grü?e,
    JP

    Thread Starter detoris

    (@detoris)

    Yepp, der Fehler ist nun weg! Vielen Dank!

    Einen minimalen Fehler beim Skalieren habe ich noch entdeckt, sofern das nicht so gewollt ist. Wenn man das Browserfenster so gro? skaliert, dass die Social Buttons einen komplett lesbaren Text bekommen z.B. bei Facebook teilen oder bei Pinterest pinnen und “Aktiviere die Statistik (share counts)” aktiviert ist, wird beim überfahren (hover) mit der Maus der Text unterstrichen und nach einem blank folgt dann wieder ein unterstrich. Das ist aber wie gesagt nur bei den Buttons mir share counts der Fall.

    Das kann man hier nicht so richtig zeigen. Das sieht dann ungef?hr so aus:

    teilen twittern teilen pinnen e-mail
    teilen _ 5 twittern teilen _ 2 pinnen _ e-mail

    Plugin Author Jan-Peter

    (@starguide)

    Das liegt nicht an Shariff, sondern an deinem Theme. Das definiert, dass alle Links unterstrichen werden sollen beim überfahren. Wenn das bei den Shariff Buttons nicht so sein soll, müsstest du das entsprechend definieren, indem du z.B. in einer Custom-CSS-Box oder in der style.css deines Themes folgendes erg?nzt:

    .shariff a:hover {
  text-decoration: none;
}

    Gru?,
    JP

    Thread Starter detoris

    (@detoris)

    Das Unterstreichen ist schon o.k. Wenn “Aktiviere die Statistik (share counts)” nicht aktiviert ist, wird z.B. NUR teilen unterstrichen. Wenn “Aktiviere die Statistik (share counts)” aktiviert ist, wird teilen unterstrichen UND nach einem Leerzeichen noch mal ein Unterstrich gesetzt. Dieser letzte Unterstrich ist eigentlich zu viel und geh?rt da nicht hin, da er ja keinen Text unterstreicht.

    Plugin Author Jan-Peter

    (@starguide)

    Das Leerzeichen muss dahin, weil ansonsten der Z?hler ohne CSS, z.B. bei Tools für Menschen mit Sehschw?chen, direkt am Wort “teilen” h?ngt, wodurch die ins Straucheln geraten, weil “teilen73” kein Wort ist. Für Seiten die auf Barrierefreiheit Wert legen oder dazu gesetzlich verpflichtet sind, ist dieses Leerzeichen daher notwendig. Siehe auch den offiziellen Hinweis bei Heise: https://github.com/heiseonline/shariff/issues/90

    Da das Leerzeichen ansonsten ja auch nicht zu sehen ist und in den Standardeinstellungen von Shariff der Text auch nicht unterstrichen wird, f?llt dies normalerweise nicht auf.

    Dementsprechend würde ich von einer Unterstreichung der Button-Beschriftung absehen.

    Gru?,
    JP

    P.S.: Nur zur Erkl?rung, der abgesetzte Untertrich dort ist in Wirklichkeit das besagte, unterstrichene Leerzeichen, was sich zwischen der “Teilen”-Beschriftung und dem Z?hler befindet.

    Thread Starter detoris

    (@detoris)

    Vielen Dank für die ausführliche Erkl?rung. Ich lerne immer gerne dazu. Somit kann ich nun entsprechend handeln!!!
    Ich habe daher Deine vorgeschlagene CSS Modifikation verwendet.

    Plugin Author Jan-Peter

    (@starguide)

    Sehr gerne ??

    Du glaubst nicht, wie viel ich erst im Laufe der Zeit durch die Entwicklung dieses Plugins gelernt bzw. von erfahren habe. Daher meld dich ruhig, wenn mal wieder eine Frage oder ein Problem auftaucht.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Skalierung Social Buttons’ is closed to new replies.