Aussehen der Umfrageergebnisse im Glass Yellow-Style ändern

[LuLa]

Hallo,

könnt Ihr mir mal helfen? Wie kann man beim Glass Yellow-Style die CSS-Definitionen bzw. das Template so ändern, daß bei Umfrageergebnissen hinter dem Optionstext und dem Balken in der selben Zeile (ohne Zeilenumbruch) die Prozentangabe und gleich dahinter die dafür abgegebenen Stimmen erscheinen? Auch wüßte ich gerne, wie man die Breite des Optionstextes ändert, bei langen Texten wird leider x-mal umgebrochen.

Code: Alles auswählen

<dl class="">
	<dt>Optionstext</dt>
</dl>

Ich habe schon einiges versucht, aber nichts hat zufriedenstellend funktioniert.


Viele Dank im voraus.
LG
LuLa

[LuLa]

Bumpi-Pumpi...

[JFooty]

Probiere mal in der content.css diese Stelle:

Code: Alles auswählen

fieldset.polls dd {
	margin-left: 15em;
	border-left-width: 0;
}

so zu ändern:

Code: Alles auswählen

border-left-width:0;
float:left;
margin:0;
width:30%;

Ungetestet, müsste aber funktionieren.

[LuLa]

Ungetestet, müsste aber funktionieren.

Habe es ausprobiert, hat aber leider nicht funktioniert.

[JFooty]

Hast du auch das Theme aktualisiert bzw. den Cache vom Forum geleert?
Falls da nicht das Problem liegen sollte, bitte einen Link zum "Problemforum".

[LuLa]

Hast du auch das Theme aktualisiert bzw. den Cache vom Forum geleert?

Aber selbstverständlich.

Falls da nicht das Problem liegen sollte, bitte einen Link zum "Problemforum".

Das Testforum mit diesem Glass Yellow-Style läuft bei mir bis zur Umstellung von phpBB2 auf phpBB3 lokal unter WAMP.

[JFooty]

Merkwürdig. Also irgendwas läuft da schief.
Bei mir reicht es sogar schon aus, wenn ich das hier:

fieldset.polls dd {
margin-left: 15em;
border-left-width: 0;
}

so abändere:

Code: Alles auswählen

fieldset.polls dd {
   margin-left: 15em;
   border-left-width: 0;
   float:left
}

Hast du die css-Dateien mit einem externen Editor bearbeitet oder nutzt du den Editor im ACP?
Wenn letzteres zutrifft, probiere die erste Variante mal aus.

[LuLa]

Merkwürdig. Also irgendwas läuft da schief.
Bei mir reicht es sogar schon aus, wenn ich das hier:

fieldset.polls dd {
margin-left: 15em;
border-left-width: 0;
}

so abändere:

Code: Alles auswählen

fieldset.polls dd {
   margin-left: 15em;
   border-left-width: 0;
   float:left
}

Hast du die css-Dateien mit einem externen Editor bearbeitet oder nutzt du den Editor im ACP?
Wenn letzteres zutrifft, probiere die erste Variante mal aus.

Sicherheitshalber weise ich mal darauf hin, daß diese Änderungen nicht wie o. a. in der content.css stattfinden müssen, sondern in der forms.css! Um auf Deine Frage zu antworten: ich benutze immer einen externen Editor, lade die veränderte Datei per ftp hoch, lösche den Server-Cache und aktualisiere die Umfrage mit [F5]. Funktioniert wunderbar!

Leider hat der letzte Vorschlag mit

Code: Alles auswählen

float:left

keine Änderung erzielt.

Auf jeden Fall bleibt die Hauptfrage offen, wie hinter dem Optionstext und dem Balken in der selben Zeile (ohne Zeilenumbruch) die Prozentangabe und gleich dahinter die dafür abgegebenen Stimmen erscheinen. Ich habe das mal als Beispielgrafiken zusammengebastelt.

So ist es:
[ externes Bild ]

So soll es sein:
[ externes Bild ]


Vielleicht hat noch jemand eine Idee...

[JFooty]

daß diese Änderungen nicht wie o. a. in der content.css stattfinden müssen, sondern in der forms.css!

Korrekt, bei diesem Style steht das in der forms.css. Beim original prosilver findet man das in der content.css.

keine Änderung erzielt.

Überhaupt keine Änderung?
Bisher haben wir auch aneinander vorbeigeschrieben. Die Screenshots machen das Problem verständlicher.

Dazu wirst du auf jeden Fall ans Template, konkret an die viewtopic_body.html ran müssen.
Da du ja die abgegebenen Stimmen hinter die Prozentzahl bekommen möchtest, musst du diese Stelle ändern:

Code: Alles auswählen

<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="<!-- IF poll_option.POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF poll_option.POLL_OPTION_PCT < 40 -->pollbar2<!-- ELSEIF poll_option.POLL_OPTION_PCT < 60 -->pollbar3<!-- ELSEIF poll_option.POLL_OPTION_PCT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->" style="width:{poll_option.POLL_OPTION_PERCENT};">{poll_option.POLL_OPTION_RESULT}</div></dd>
					<dd><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd><!-- ENDIF -->

Das

Code: Alles auswählen

{poll_option.POLL_OPTION_RESULT}

muss dazu auf jeden Fall schon einmal hinter

Code: Alles auswählen

<!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF -->

erscheinen und das letzte <dd> kann weg, denn das sorgt in diesem Fall für den Zeilenumbruch. Also in etwa so:

Code: Alles auswählen

<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="<!-- IF poll_option.POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF poll_option.POLL_OPTION_PCT < 40 -->pollbar2<!-- ELSEIF poll_option.POLL_OPTION_PCT < 60 -->pollbar3<!-- ELSEIF poll_option.POLL_OPTION_PCT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->" style="width:{poll_option.POLL_OPTION_PERCENT};"></div>
					<!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF -->{poll_option.POLL_OPTION_RESULT}</dd><!-- ENDIF -->

Momentan habe ich leider keine Zeit das zu testen.
Aber vielleicht reicht dir dieser Tipp ja schon aus und du kommst selbst damit klar.
Berichte mal, was mein Vorschlag für (hoffentlich nicht verheerende ) Auswirkungen hat.

[LuLa]

Überhaupt keine Änderung?

Naja, jedenfalls nicht die erwünschte Änderung.

Nochmal ganz ausführlich...
viewtopic_body.html:

Code: Alles auswählen

			<!-- BEGIN poll_option -->
				<dl class="<!-- IF poll_option.POLL_OPTION_VOTED -->voted<!-- ENDIF -->"<!-- IF poll_option.POLL_OPTION_VOTED --> title="{L_POLL_VOTED_OPTION}"<!-- ENDIF -->>
					<dt><!-- IF S_CAN_VOTE --><label for="vote_{poll_option.POLL_OPTION_ID}">{poll_option.POLL_OPTION_CAPTION}</label><!-- ELSE -->{poll_option.POLL_OPTION_CAPTION}<!-- ENDIF --></dt>
					<!-- IF S_CAN_VOTE --><dd><!-- IF S_IS_MULTI_CHOICE --><input type="checkbox" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ELSE --><input type="radio" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ENDIF --></dd><!-- ENDIF -->
					<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="{poll_option.POLL_OPTION_COLOR}" style="width:{poll_option.POLL_OPTION_PERCENT};">{poll_option.POLL_OPTION_RESULT}</div>
					<!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd><!-- ENDIF -->
				</dl>
			<!-- END poll_option -->

{poll_option.POLL_OPTION_COLOR} ist von mir, ermöglicht viele unterschiedliche Farben.

forms.css:

Code: Alles auswählen

/**
* Poll Content
*/
/* reset the font size of the poll pox */
fieldset.polls dl, fieldset.polls .button1 {
	font-size: 1em;
}
fieldset.polls dt {
	width: 15em;
	border-right-width: 0;
}

fieldset.polls dd {
	margin-left: 15em;
	border-left-width: 0;
	float:left
}

Ohne float:left:
[ externes Bild ]

Mit float:left:
[ externes Bild ]