Fortschrittsbalken für Leser

gr3g0r · Mitglied · Oktober 2, 2013 at 8:45 pm
Link kopieren

Thema zu Favoriten hinzufügen
Hallo, ich habe gesehen, dass es so ein Plugin für WordPress gibt, was ist denn nun mit uns?
Bekommen wir auch sowas?
Grüße, Gregor

Der Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).
iqatrophie · Moderator · Oktober 3, 2013 at 7:50 pm
Link kopieren
Die Installation von Plugins ist hier auf WordPress.com für Benutzer nicht möglich sondern liegt ganz im Ermessen von Automattic. Du kannst es gerne im englischen Ideen Unterforum vorschlagen. Erfahrungsgemäß würde ich mir aber wenig Hoffnung machen.

Von welchem Plugin sprichst du eigentlich? Wozu genau benötigst du einen Fortschrittsbalken? Beschreibe doch mal das Szenario.

Es gäbe nämlich die Möglichkeit mit etwas HTML Code und Inline-CSS etwas zusammenzubasteln. Habe das mal auf meinem Testblog ausprobiert:
http://wpcomsandbox.wordpress.com/2013/10/03/fortschrittsbalken/

Die Lösung hat natürlich Nachteile. Der Balken passt sich z.B. nicht dynamisch an. Den Fortschritt musst du per Änderung der ‚width‘ Angabe im zweiten ‚div‘ jedesmal manuell ändern.

Gruß
Martin(IQ)
gr3g0r · Mitglied · Oktober 4, 2013 at 11:55 pm
Link kopieren
Schade.
Ich würde es gerne für mein Lesefortschritt nutzen :)
Wie bei blogspot ich mal gesehen habe.
Ich habe glücklicherweise ein HTML-Code gefunden, siehe mein Blog, links unten.
Sonst danke für den Link, ist auch nicht schlecht!
Hmm, könntest Du mir nicht den selben Code geben, wie im Link, nur dass ich drunter noch die zahl stehen habe, oder kann man die Zahl auch drin in dem Balken haben?
Kann man bei deinem Fortschrittsbalken auch die Farben ändern, also den Border und das Innen? Und wie?
Vielen Dank!
Gruß
Gregor
iqatrophie · Moderator · Oktober 5, 2013 at 5:02 pm
Link kopieren
Was meinst du mit „selben Code… , wie im Link“? Wenn du damit auf den Link zu meinem Testblog anspielst, ist der doch unter jedem Beispiel aufgeführt. Nachdem der HTML-Code in deinem Fortschrittbalken aber recht ähnlich ist, kannst du die Änderungen auch gleich dort vornehmen.

Die Zahl in den Balken zu bekommen, wäre kompliziert. Da ist deine Lösung darunter einfacher und geschickter.

Die Farbe als auch die Border lässt sich problemlos bei meinem wie auch bei deinem HTML Code ändern. Der Einfachkeit halber nehmen wir gleich deinen.

<div style="border:1px solid #000000;width:150px;height:15px;text-align:left;margin:auto;"> <div id="balken" style="background-color:#1a4782;width:50%;height:15px;"></div> <div style="line-height:15px;margin-top:- 15px;text-align:center;"><font size="-2" face="Arial" color="#111111">Lesefortschritt: 50%</font></div> </div>

Wie du siehst, besteht auch dein Beispiel aus zwei div-Elementen. Die Farbe der Border änderst du im ersten div, in dem du den Wert ‚#000000‘ durch deinen gewünschten HTML Farbcode ersetzt.

Die Farbe des Balkens änderst du folgerichtig im zweiten div-Element. Hier änderst du den Farbcode ‚#1a4782‘ auf deinen Wunschwert.

Gruß
Martin(IQ)
gr3g0r · Mitglied · Oktober 5, 2013 at 8:01 pm
Link kopieren
Ich habe etwas rum experimentiert, habe alles wie gewünscht, nur ich hätte jetzt gerne die Schrift also Lesefortchritt und die Zahl in der Mitte.
Ich weiss, irgendwas mit align, aber so kenn ich mich auch nicht aus.
Kannst du mir da nicht etwas helfen?
```
<div><font size="-2" face="Arial" color="#111111">Lesefortschritt</font></div>
<div style="border:1px solid #F5D0A9;width:165px;background:white;margin:5px 0;padding:1px;"><div style="width:50%;background-color:#DF7401;height:12px;"><font size="-2" face="Arial" color="#111111">50%</font></div></div>
```
Gibts hier eigentlich keine Vorschau?
Gruß, Gregor
iqatrophie · Moderator · Oktober 7, 2013 at 12:57 pm
Link kopieren
Was den „Lesefortschritt“ angeht, versuche es mal mit text-align:center.

<div style="text-align:center;"><font size="-2" face="Arial" color="#111111">Lesefortschritt</font></div>

Das ‚font‘ Element ist übrigens veraltet, und sollte nicht mehr verwendet werden. Nutze doch einfach ein ’span‘ Element und formatiere es ebenfalls per Inline-CSS.
```
<div style="text-align:center;">
<span style="color:#111;font-size:10px;font-family:arial, sans-serif;">
Lesefortschritt</span></div>
```
Was die Zahl im Balken angeht, funktioniert das ebenfalls per text-align.
```
<div style="width:90%;background-color:#DF7401;height:12px;text-align:center;"><span style="color:#111;font-size:10px;font-family:arial, sans-serif;">
90%</span></div>
```
Statt ‚text-align:center‘ könntest du es auch mal mit ‚text-align:right‘ versuchen. Dann wandert die Zahl sozusagen mit dem Balken. In beiden Fällen weiß ich allerdings nicht, wie die Darstellung aussieht, wenn der Balken kleiner ist als die angezeigte Prozentzahl. Also z.B. im Bereich 1% bis 10%.

Im Firefox wird die Zahl dann zwar dennoch angezeigt, aber ob das in anderen Browsers wie IE, Safari, Opera, Chrome ebenfalls der Fall ist, müsste man testen.

Ansonsten bliebe ja immer noch der Ausweg, den Fortschritt in einem weiteren div-Element unterhalb des Balkens anzuzeigen.
iqatrophie · Moderator · Oktober 7, 2013 at 1:02 pm
Link kopieren
Noch ein kleiner Nachtrag. Ich würde die margin (Außenabstand) im weißen Balken, also das äußere ‚div‘ des Fortschrittsbalken links und rechts auf ‚auto‘ stellen, damit der Balken innerhalb der Seitenleiste schön zentriert wird. Statt ‚margin: 5px 0‘ also ‚margin: 5px auto;‘

<div style="border:1px solid #F5D0A9;width:165px;background:white;margin:5px auto;padding:1px;"><div style="width:90%;background-color:#DF7401;height:12px;"><font size="-2" face="Arial" color="#111111">90%</font></div></div>
gr3g0r · Mitglied · Oktober 11, 2013 at 12:40 am
Link kopieren
Hey,
vielen vielen Dank!
Jetzt siehts super aus !
iqatrophie · Moderator · Oktober 11, 2013 at 1:20 am
Link kopieren
Freut mich, wenn ich helfen konnte. :)