Use background images for prosilvers pollbar

[Steve]

Lets add some background image instead of the default background colour for the poll results bar for prosilver based styles,creating a more etractive look to the phpBB3 poll results and uses different colours depending on the poll results percentage.

upload these images to prosilver/theme/images/*.*

images.zip

Open styles/prosilver/theme/colours.css
find:

Code: Select all

.pollbar1 {
	background-color: #AA2346;
	border-bottom-color: #74162C;
	border-right-color: #74162C;
}

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

.pollbar2 {
	background-color: #BE1E4A;
	border-bottom-color: #8C1C38;
	border-right-color: #8C1C38;
}

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

.pollbar3 {
	background-color: #D11A4E;
	border-bottom-color: #AA2346;
	border-right-color: #AA2346;
}

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

.pollbar4 {
	background-color: #E41653;
	border-bottom-color: #BE1E4A;
	border-right-color: #BE1E4A;
}

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

.pollbar5 {
	background-color: #F81157;
	border-bottom-color: #D11A4E;
	border-right-color: #D11A4E;
}

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

replace with:

Code: Select all

.pollbar1 {
        background-image: url("{T_THEME_PATH}/images/poll3.png");
	background-color: #AA2346;
	border-bottom-color: #74162C;
	border-right-color: #74162C;
}

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

.pollbar2 {
        background-image: url("{T_THEME_PATH}/images/poll3.png");
	background-color: #BE1E4A;
	border-bottom-color: #8C1C38;
	border-right-color: #8C1C38;
}

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

.pollbar3 {
        background-image: url("{T_THEME_PATH}/images/poll2.png");
	background-color: #FFBF00;
	border-bottom-color: #000000;
	border-right-color: #CCCCCC;
}

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

.pollbar4 {
        background-image: url("{T_THEME_PATH}/images/poll2.png");
	background-color: #FFBF00;
	border-bottom-color: #000000;
	border-right-color: #CCCCCC;
}

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

.pollbar5 {
        background-image: url("{T_THEME_PATH}/images/poll1.png");
	background-color: #F81157;
	border-bottom-color: #000000;
	border-right-color: #004000;
}

You can use any background image

Open styles/prosilver/theme/content.css
find:

Code: Select all

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

replace with:

Code: Select all

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

as you can see all i changed was this line padding: 5px 2px; to give us the height we need for the back ground image adjust it accordingly to the size of image you may use.
Refresh theme for prosilver.
pics:
old poll results.

b4.PNG

some poll percents.

pool1.PNG

pool2.PNG

pool3.PNG

[cisco007]

very nice steve!

[KukY13]

If if remember good, this can be simply done in ACP!
Or is this something else?

[cisco007]

where is that setting at? i can't find it!

[KukY13]

It's in ACP/Styles/Imagesets/Edit/Polling Images.

[Steve]

Doesnt seem to work.But mine does

[cisco007]

you will be editing them on the database Kuky that is not proper, this way i better!

[Igor]

Does this work on another style ?

[Steve]

What style? if prosilver based sure will

[Igor]

What style? if prosilver based sure will

My style is http://demo.phpbb3styles.net/4poziomSEO_blue.