Aussehen der Umfragebalken in prosilver ändern

[FuGu]

Moin Moin,
in meinem alten, auf subsilver basierendem Style habe ich Umfragebalken die wie folgt aussehen:
[ externes Bild ]

Zurzeit bastel ich mir einen neuen Style der auf prosilver aufgebaut ist und würde gerne die Umfragebalken übernehmen.
Die Balken bestehen aus drei Bildchen für Links - Mitte - Rechts.

Mir will es über die colours.css aber nur gelingen das mittlere Bildchen als Hintergrund einzufügen.
Es fehlen mir also noch der abgerundete Anfang sowie das abgerundete Ende des Balkens.
Wie muss ich also die Bildchen für Links und Rechts richtig in der colours.css einfügen?

Sieht bisher wie folgt aus:

Code: Alles auswählen

.pollbar1 {
	background-image: url("{T_THEME_PATH}/images/poll_center.gif");
	background-color: none;
	border-bottom-color: none;
	border-right-color: #000000;
}

.rtl .pollbar1 {
	border-left-color: #74162C;

Danke für die Hilfe!

[Birne94]

Du müsstest die Ecken in der viewtopic_body.html einfügen:

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> 

(hinter <dd class="resultbar">; vor </dd>). Eventuell solltest du, wenn du die Balken nur einfarbig gestalten willst (unabhängig von Prozentzahl), die anderen Elemente entfernen:

Code: Alles auswählen

<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="pollbar1" style="width:{poll_option.POLL_OPTION_PERCENT};">{poll_option.POLL_OPTION_RESULT}</div></dd> 

[FuGu]

So... mal ausprobiert und der Sache schon ein bisschen näher gekommen. Passt aber noch nicht so wirklich, da Anfang und Ende des Balken jetzt über und unter dem
poll_center liegen. Anbei ein Bild das sowas mehr sagt als tausend Worte.

[ externes Bild ]

Der Abschnitt aus der viewtopic sind wie folgt aus:

Code: Alles auswählen

					<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><img src="{T_THEME_PATH}/images/poll_left.gif"/><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><img src="{T_THEME_PATH}/images/poll_right.gif"/></dd>

[Birne94]

Code: Alles auswählen

               <!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><img src="{T_THEME_PATH}/images/poll_left.gif"/><span 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}</span><img src="{T_THEME_PATH}/images/poll_right.gif"/></dd>

probier mal das...
(<div> => <span>)

[FuGu]

Das war... auch nicht besser
Sieht damit so aus:
[ externes Bild ]

[Kirk]

Hallo

So ist es bei mir

colour.ccs Zeile ca. 596

Code: Alles auswählen

/* Post poll styles
----------------------------------------*/

fieldset.polls dl {
	border-top-color: #D3D3D3;
	color: #25ff25;
}

fieldset.polls dl.voted {
	color: #ffa500;
}

fieldset.polls dd div {
	color: #FFFFFF;
}

.rtl .pollbar1, .rtl .pollbar2, .rtl .pollbar3, .rtl .pollbar4, .rtl .pollbar5 {
	border-right-color: transparent;
}

.pollbar1 {
	background-color: #008B45;
	border-bottom-color: #ffa500;
	border-right-color: #ffa500;
}

.rtl .pollbar1 {
	border-left-color: #ffa500;
}

.pollbar2 {
	background-color: #008B45;
	border-bottom-color: #ffa500;
	border-right-color: #ffa500;
}

.rtl .pollbar2 {
	border-left-color: #ffa500;
}

.pollbar3 {
	background-color: #008B45;
	border-bottom-color: #ffa500;
	border-right-color: #ffa500;
}

.rtl .pollbar3 {
	border-left-color: #ffa500;
}

.pollbar4 {
	background-color: #008B45;
	border-bottom-color: #ffa500;
	border-right-color: #ffa500;
}

.rtl .pollbar4 {
	border-left-color: #ffa500;
}

.pollbar5 {
	background-color: #008B45;
	border-bottom-color: #ffa500;
	border-right-color: #ffa500;
}

.rtl .pollbar5 {
	border-left-color: #ffa500;
}

[Talk19zehn]

Hello FuGu,

mit runden Ecken kann ich leider nicht wirklich dienen ( schäm ), da der Aufwand, das gefloatete Element umzubauen, recht hoch ist. Ich verstehe schon, dass du eine "Quasi-3D-Anzeige" möchtest und sich diese ansich recht gut für den Betrachter macht oder gut herüber kommt.

OK, sofern du ohne runde Ecken leben kannst, bin ich mutig:

Content.css ---> hier habe ich

.pollbar ergänzt um background-image und sicherheitshalber background-color ( untersten Farbwert ) mitgegeben. Bilder sollen ja schon mal ausfallen...., sagt man.
Ferner habe ich die Höhe der Grafik angegeben ( height: 30px ).

Code: Alles auswählen

.pollbar1 {
       background-color: #010423;
       background-image: url("{T_THEME_PATH}/images/buttonb010423blankhoriz.gif");
       border-bottom: 1px solid #747474;
       border-right: 1px solid #747474;
       height: 30px;
    }

    .pollbar2 {
       background-color: #010423;
       background-image: url("{T_THEME_PATH}/images/buttonb010423blankhoriz.gif");
       border-bottom: 1px solid #8c8c8c;
       border-right: 1px solid #8c8c8c;
       height: 30px;
    }

    .pollbar3 {
       background-color: #010423;
       background-image: url("{T_THEME_PATH}/images/buttonb010423blankhoriz.gif");
       border-bottom: 1px solid #aaaaaa;
       border-right: 1px solid #aaaaaa;
       height: 30px;
    }

    .pollbar4 {
       background-color: #010423;
       background-image: url("{T_THEME_PATH}/images/buttonb010423blankhoriz.gif");
       border-bottom: 1px solid #bebebe;
       border-right: 1px solid #bebebe;
       height: 30px;
    }

    .pollbar5 {
       background-color: #010423;
       background-image: url("{T_THEME_PATH}/images/buttonb010423blankhoriz.gif");
       border-bottom: 1px solid #D1D1D1;
       border-right: 1px solid #D1D1D1;
       height: 30px;
    }

Um die Ausgabe der Abstimmwerte inhaltlich zu zentrieren, fügte ich die Höhe der Grafik --> vgl. line-height: 30px;

hier:

Code: Alles auswählen

fieldset.polls dd div {
       text-align: right;
       font-family: Arial, Helvetica, sans-serif;
       color: #000000;
       line-height: 30px;
       font-weight: bold;
       padding: 0 2px;
       overflow: visible;
       min-width: 2%;
    }

hinzu.


Ergebnis:

http://img511.imageshack.us/img511/8784 ... grafik.jpg



Viele Grüße

[FuGu]

@ Talk19zehn
Danke für deine Mühe.. aber diesen Schritt von dir habe ich doch schon selbst abgearbeitet. Hab von der alten Grafik ja die poll_center eingearbeitet.
Mir fehlen eben "nur" noch die runden Ecken...

[TW1920]

Wenn ich es richtig verstanden habe, soll der Balken abgerundet sein. Dann versuche es mal, dass du das Bild abrundest und dann muss der rest vom bild (wo es abgerundet ist) nur noch transparent gemacht werden.

Ich hoffe ich konnte helfen bzw. habe das problem richtig verstanden.

[TW1920]

Es gäbe vieleicht eine Alternative:

du kannst ja mal versuchen, das ganze nicht nur über css zu lösen. du musst versuchen die beweglichen balken in eine nach rechts frei erweiterbare taelle einzubinden. links in die spalte das eine bild st einbinden und rechts eine tabele, wo das andere ende ist.

Das könnte dir vieleicht weiterhelfgen:

Code: Alles auswählen

<table border="0">
  <tr>
    <td style="background-image:url(background.bild)" width="" height=""></td>
    <td height="">Hier muss das jetzige script rein</td>
    <td style="background-image:url(background.bild)" width="" height=""></td>
  </tr>
</table>

Dabeiu musst du halt noch alles ausfüllen:
Bei width die Breite in "" reinschreiben, die die bilder haben, bei height halt die höhe.
In der mitte muss du keine breite ageben, da diese variieren soll.

die oberste tdzeile ist für das linek bild,
die untere für die rechte.

background.bild muss durch das jeweilige bild erstezt werden.