Bedanksystem - Button wird falsch angezeigt

Hallo,

ich bin dabei mir das Bewertungssystem in ein Bedanksystem umzuändern.

Habe dazu diesen Thread benutzt:

https://hilfe.forumieren.com/t34871-phpbb3bewertungssystem-als-bedanksystem

Habe jetzt ein Problem, der Danke Button wird richtig angezeigt, aber der "bedankt" Button nicht bzw. nur teilweise.



So sieht mein Code im Stylesheet dafür aus:

/* Bewertungssystem zu Bedanksystem BB3 */
.vote-button, .vote-no-bar, .vote-bar-plus, .vote-bar-minus {
display: none;
}
.vote-button:first-child {
background-image: url("https://i.servimg.com/u/f16/17/63/79/66/t582a610.png");
display: block !important;
height: 39px;
width: 40px;
}
.vote {
margin-right: 30px;
}
.vote-button a {
color: transparent;
font-size: 45px;
text-decoration: none !important;
}
.vote-bar {
background-image: url("https://i.servimg.com/u/f16/17/63/79/66/info_i11.png");
border: none !important;
height: 4px !important;
width: 40px !important;
}
/* Bewertungssystem zu Bedanksystem BB3 */


Was habe ich falsch gemacht? Habe ich was vergessen?

Hallo Christian,

zuerst mal darfst du nicht automatisch davon ausgehen, dass CSS-Codes für die Version BB3 (wie es im verlinkten Thread deutlich vermerkt ist) auch gleichzeitig für Invision gelten. Das ist in diesem Fall so, aber in den meisten Fällen nicht.

Der Fehler befindet sich dort:

.vote-bar {
background-image: url("https://i.servimg.com/u/f16/17/63/79/66/info_i11.png");
border: none !important;
height: 4px !important;
width: 40px !important;
}

Du hast der Grafik nur eine Höhe von 4px zugewiesen, sodass sie abgeschnitten angezeigt wird. Diese Grafik besitzt Ausmaße von 32px x 32px, also solltest du sowohl für die Höhe als auch die Breite exakt diesen Wert festlegen.

Liebe Grüße
Günther

Hallo Günther :-)

ach ich bin auch bedeppert dann habe ich beim eintippern
die Null vergessen. Danach hatte ich die Grafik verkleinert auf 32px X 32px.

Sorry mein Fehler.

Zu den Versionen des Forums:
ach ich dachte BB3 und Invision wären fast gleich, meine ich mal gelesen zu haben. Nun gut, man wird immer schlauer.

Danke Günther

Schönen abend noch

Hier mache ich dann gleich zu

Bitteschön.
Das macht nichts, solche kleinen Vertipper können schon mal vorkommen.

joschi1989 schrieb:Zu den Versionen des Forums:
ach ich dachte BB3 und Invision wären fast gleich, meine ich mal gelesen zu haben. Nun gut, man wird immer schlauer.

In vielen Fällen sind CSS-Codes nicht gleichermaßen für beide Versionen zu verwenden. Bei dieser Änderung kannst du die identischen Codes verwenden, auch die Chatbox-Codes gleichen sich z.B. sehr stark - aber in anderen Fällen ist das wiederum gar nicht der Fall.
Das nur als Hinweis, weshalb du grundsätzlich auch die Versionsangaben immer mitbeachten solltest.

Danke, dir ebenfalls eine gute Nacht.
-closed-

Alles klar, dann weiss ich bescheid

Gute nacht

Und danke nochmal

Thread auf Wunsch von Joschi erneut geöffnet

Hallo Günther und vielen dank für´s öffnen.

Ich hab ein Problem bzw. meine User haben ein Problem festgestellt.

Bei dem Danke-Button wird im Hintergrund ein Dickes schwarzes Kreuz angezeigt.
Es scheint aber nicht überall zu sein. Ich benutze den Firefox und da ist es z.B. nicht.
Ein User hatte geschrieben, dass er den neuen IE benutzt da kam es vor.
Ein anderer User wiederum hat den IE9 drauf und dort wird es richtig angezeigt.
Bei manchen werden auch beide Symbole angezeigt.
Cookies/ Chache wurden gelöscht. Was kann ich tun damit das schwarze Kreuz
weg ist?

Hier der Sreen:

Bitte.

Die Ursache liegt darin, dass ich die Verlinkung einfach mit der Textfarbe transparent versehen habe, damit das Plus nicht angezeigt wird:

.vote-button a {
color: transparent;
font-size: 45px;
text-decoration: none !important;
}

Unter allen aktuellen Browsern (IE9, FF, Chrome) wird dieser Wert auch bestens angenommen. Dass manche ältere IE-Versionen damit Probleme hatten, ist bekannt, aber wir müssen schon vom aktuellsten IE ausgehen.
Du sagst mir nun, dass der IE10 diesen Wert offenbar wieder nicht mehr interpretiert. Der IE10 ist derzeit nur als Preversion erhältlich, aber es gefällt mir nicht, dass dort wieder dieses Problem besteht.

Ich habe diese Stelle nun so angepasst, dass auch der neue IE10 sie interpretieren wird. Dazu habe ich die Schriftgröße auf 0 festgelegt und stattdessen mit einem Innenabstandswert erzielt, dass die Verlinkung so groß wie die eingesetzte Garfik ist:

Code:

.vote-button a {
  font-size: 0;
  padding: 45px;
  text-decoration: none !important;
}

Diese Stelle kannst du also austauschen. Hier nochmal der gesamte Code in der Rohfassung, der auch unter dem IE10 interpretiert werden wird:

Code:

/* Bewertungssystem zu Bedanksystem BB3 & Invision */
.vote-button, .vote-no-bar, .vote-bar-plus, .vote-bar-minus {
  display: none;
}
.vote-button:first-child {
  background-image: url("BILDURL");
  display: block !important;
  height: 48px;
  width: 48px;
}
.vote {
  margin-right: 30px;
}
.vote-button a {
  font-size: 0;
  padding: 45px;
  text-decoration: none !important;
}
.vote-bar {
  background-image: url("BILDURL");
  border: none !important;
  height: 48px !important;
  width: 48px !important;
}
/* Bewertungssystem zu Bedanksystem BB3 & Invision */

Danke Günther

Nun sehe ich aber im Firefox beide Symbole, ( danke und bedankt )

Wenn man sich bedankt hat kommt auch nur das "bedankt Symbol"
Aber beim "Danke" Button stehen beide drin




EDIT:

Auch beim IE ist es noch so wo man sich schon bedankt hat, sehe ich 2 Symbole

Hier mal mein geänderter Code

/* Bewertungssystem zu Bedanksystem BB3 & Invision */
.vote-button, .vote-no-bar, .vote-bar-plus, .vote-bar-minus {
display: none;
}
.vote-button:first-child {
background-image: url("https://i.servimg.com/u/f16/17/63/79/66/t582a610.png");
display: block !important;
height: 39px;
width: 40px;
}
.vote {
margin-right: 30px;
}
.vote-button a {
font-size: 0;
padding: 45px;
text-decoration: none !important;
}
.vote-bar {
background-image: url("https://i.servimg.com/u/f16/17/63/79/66/info_i11.png");
border: none !important;
height: 32px !important;
width: 32px !important;
}
/* Bewertungssystem zu Bedanksystem BB3 & Invision */

joschi1989 schrieb:Nun sehe ich aber im Firefox beide Symbole, ( danke und bedankt )

Das hat mit der aktuellen Veränderung überhaupt nichts zu tun, war bisher schon so und ist auch so gewollt.

Solange man bei einem Beitrag noch nicht auf den Danke-Button geklickt hat, wird dieser angezeigt. Danach nicht mehr.
Der Bedankt-Button gibt bei einem Mouseover im Tooltip die Anzahl der Dankeklicks an und wird angezeigt, sobald sich jemand für diesen Beitrag bedankt hat.
Das ist so gewollt und hat seine Berechtigung.

Verstehe ich grad nich so

Schau Dir mal mein Screen unten an, bei dem oberen Beitrag "Danke-Button" sieht man 2 Symbole (den Danke und bedankt Button) dort wurde sich noch
nicht bedankt.

Bei dem unteren Beitrag sieht man nur den "Danke Button" dort wurde sich auch noch nicht begankt.

Müssen nicht beide Beiträge das gleiche anzeigen? Also den gelben Daumen (Danke-Button)

EDIT:

Das habe ich schon verstanden und das ist auch richtig so.

joschi1989 schrieb:bei dem oberen Beitrag "Danke-Button" sieht man 2 Symbole (den Danke und bedankt Button) dort wurde sich noch nicht bedankt.

Dort hast zwar du dich nicht bedankt, aber jemand anders schon.

joschi1989 schrieb:Bei dem unteren Beitrag sieht man nur den "Danke Button" dort wurde sich auch noch nicht begankt.

Dort hat sich noch niemand bedankt.

Das ist ja gerade der Sinn hinter dem Dankesystem, zu dem wir das Bewertungssystem umgewandelt haben:
Habe ich selbst mich noch nicht bedankt, wird mir der Dankebutton angezeigt. Sobald ich mich bedankt habe, wird dieser nicht mehr angezeigt.
Hat sich bei einem Beitrag noch niemand bedankt, wird die Bedanktgrafik nicht angezeigt. Hat sich dort bereits jemand/mehrere bedankt, wird sie angezeigt und gibt bei einem Mouseover im Tooltip die Anzahl der Danke an.
Du siehst also, dass je nach Ausgangslage nur eine oder auch beide Grafiken angezeigt werden. Das ist der Sinn hinter dieser Veränderung und entspricht dem, das uns das Bewertungssystem ermöglicht.


Alles klar?

Klar aber im ober Beitrag werden bedankt und Danke Symbol angezeigt.
Das kann doch nicht richtig sein.

Daanke sagen = Gelber Daumen
Bedankt: blauer Kreis mit Ausrufezeichen

Aber beide werden teilweise angezeigt wenn sich niemand bedankt hat

joschi1989 schrieb:Aber beide werden teilweise angezeigt wenn sich niemand bedankt hat

Da hat sich also doch schon jemand bedankt, richtig? Meine Erklärung stimmt schon und genau so kann ich das auch in deinem Thread nachvollziehen.

Also heißt das, wenn 2 Symbole gleichzeitig angezeigt wird ,
dass ich noch bewerten kann, sich aber bereits jemand bedankt hat.
Richtig? Dann habe ich es verstanden wenn es so ist.

Wenn das so ist dann ist ok, die Zeichen sind aber dann nicht parallel untereinander liegt das an den verschiedenen Größen der Symbole?

joschi1989 schrieb:Also heißt das, wenn 2 Symbole gleichzeitig angezeigt wird ,
dass ich noch bewerten kann, sich aber bereits jemand bedankt hat.

Genau, das hast du richtig verstanden.

Dass die Gafiken nicht exakt untereinander sind, hängt von ihnen selbst ab. Du kannst deine Daumengrafik rechts z.B. mit einem schmalen transparenten Hintergrund versehen o.ä. Wenn du die Grafiken selbst anpasst (sofern dich die aktuelle Anzeige überhaupt stört), ist das einfacher und sinnvoller, als im Code diese Unterschiede zwischen den beiden Grafiken auszugleichen.
Dann ist das hier wieder mal erledigt?

Super dann habe ich es jetzt verstanden

Das mit dem Transparent weiss ich leider nicht wie das geht, aber vielleicht kann ich das ja auch mit der Grösse erreichen? Stören tut mich das schon, wenn will ich auch alles gerade habe. Alles andere sieht Anfängerhaft aus oder?
Jetzt aber noch ne Kleinigkeit, der Abstand der beiden Button ist sehr eng, kann man diesen etwas vergrössern?

Und Schau mir hier, wenn ein Zitierfeld besteht liegt der Danke Button direkt darauf, das sieht etwas doof aus.Was kann man machen, verschieben? Vielleicht nach unten wo der Pfeil hinzeigt?Dort würde doch nie ein Zitierfeld sein und somit nie stören

CSS-Code wegen der Zitatbox:

Code:

.post-entry blockquote {
  margin-right: 50px;
}

Wie gesagt solltest du eher zwei identisch ausgemessene Grafiken verwenden, statt das im Code auszugleichen. Aber wenn du dich diesbezüglich nicht recht aussiehst, dann kann ich dir noch einen zusätzlichen CSS-Code erstellen, der gleich dazu noch den Abstand zwischen den beiden Grafiken erhöht. Diesen Code habe ich auf deine aktuellen Grafiken genau zugeschnitten, sodass er nur für diesen Fall gilt und du die Grafiken nun nicht mehr austauschen solltest.

Code:

.vote-button:first-child {
  margin-bottom: 10px;
  margin-left: -5px;
}

Super Günther so wollte ich das alles haben,
wie immer perfekte Arbeit.

Vielen lieben Dank, bis demnächst mal.

Hier kann dann wieder zu


LG

Christian

Danke für deine schöne Rückmeldung, das freut mich.

Bitteschön und noch einen angenehmen Abend, Christian.
-closed-