Use background images for prosilvers pollbar
Posted: 23 Aug 2010, 16:34
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/*.* Open styles/prosilver/theme/colours.css
find:
replace with:
You can use any background image
Open styles/prosilver/theme/content.css
find:
replace with:
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. some poll percents.
upload these images to prosilver/theme/images/*.* 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;
}
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;
}
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%;
}
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%;
}
Refresh theme for prosilver.
pics:
old poll results. some poll percents.