Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
May 22, 2013 at 10:33 pm #23683
Looking to tweak to progress bars to be a solid color instead of striped. Also, i’d like to make them thinner vertically if possible.
Thanks,
– John
May 23, 2013 at 5:34 am #120773Hi,
Open css > shortcodes.css then find this code
.grey-bar .bar{
background: #555;
background-image: -webkit-linear-gradient(-45deg, #666 25%, #444 25%, #444 50%, #666 50%, #666 75%, #444 75%, #444);
background-image: -moz-linear-gradient(-45deg, #666 25%, #444 25%, #444 50%, #666 50%, #666 75%, #444 75%, #444);
background-image: -o-linear-gradient(-45deg, #666 25%, #444 25%, #444 50%, #666 50%, #666 75%, #444 75%, #444);
background-image: -ms-linear-gradient(-45deg, #666 25%, #444 25%, #444 50%, #666 50%, #666 75%, #444 75%, #444);
background-image: linear-gradient(-45deg, #666 25%, #444 25%, #444 50%, #666 50%, #666 75%, #444 75%, #444);
}
.blue-bar .bar{
background: #7bb0e7;
background-image: -webkit-linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
background-image: -moz-linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
background-image: -o-linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
background-image: -ms-linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
background-image: linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
}
.green-bar .bar{
background: #555;
background-image: -webkit-linear-gradient(-45deg, #A5CA68 25%, #83a846 25%, #83a846 50%, #A5CA68 50%, #A5CA68 75%, #83a846 75%, #83a846);
background-image: -moz-linear-gradient(-45deg, #A5CA68 25%, #83a846 25%, #83a846 50%, #A5CA68 50%, #A5CA68 75%, #83a846 75%, #83a846);
background-image: -o-linear-gradient(-45deg, #A5CA68 25%, #83a846 25%, #83a846 50%, #A5CA68 50%, #A5CA68 75%, #83a846 75%, #83a846);
background-image: -ms-linear-gradient(-45deg, #A5CA68 25%, #83a846 25%, #83a846 50%, #A5CA68 50%, #A5CA68 75%, #83a846 75%, #83a846);
background-image: linear-gradient(-45deg, #A5CA68 25%, #83a846 25%, #83a846 50%, #A5CA68 50%, #A5CA68 75%, #83a846 75%, #83a846);
}
.orange-bar .bar{
background: #EDAE44;
background-image: -webkit-linear-gradient(-45deg, #EDAE44 25%, #FFCF66 25%, #FFCF66 50%, #EDAE44 50%, #EDAE44 75%, #FFCF66 75%, #FFCF66);
background-image: -moz-linear-gradient(-45deg, #EDAE44 25%, #FFCF66 25%, #FFCF66 50%, #EDAE44 50%, #EDAE44 75%, #FFCF66 75%, #FFCF66);
background-image: -o-linear-gradient(-45deg, #EDAE44 25%, #FFCF66 25%, #FFCF66 50%, #EDAE44 50%, #EDAE44 75%, #FFCF66 75%, #FFCF66);
background-image: -ms-linear-gradient(-45deg, #EDAE44 25%, #FFCF66 25%, #FFCF66 50%, #EDAE44 50%, #EDAE44 75%, #FFCF66 75%, #FFCF66);
background-image: linear-gradient(-45deg, #EDAE44 25%, #FFCF66 25%, #FFCF66 50%, #EDAE44 50%, #EDAE44 75%, #FFCF66 75%, #FFCF66);
}
.black-bar .bar{
background: #222;
background-image: -webkit-linear-gradient(-45deg, #222 25%, #444 25%, #444 50%, #222 50%, #222 75%, #444 75%, #444);
background-image: -moz-linear-gradient(-45deg, #222 25%, #444 25%, #444 50%, #222 50%, #222 75%, #444 75%, #444);
background-image: -o-linear-gradient(-45deg, #222 25%, #444 25%, #444 50%, #222 50%, #222 75%, #444 75%, #444);
background-image: -ms-linear-gradient(-45deg, #222 25%, #444 25%, #444 50%, #222 50%, #222 75%, #444 75%, #444);
background-image: linear-gradient(-45deg, #222 25%, #444 25%, #444 50%, #222 50%, #222 75%, #444 75%, #444);
}
.red-bar .bar{
background: #B02B2C;
background-image: -webkit-linear-gradient(-45deg, #B02B2C 25%, #D24D4E 25%, #D24D4E 50%, #B02B2C 50%, #B02B2C 75%, #D24D4E 75%, #D24D4E);
background-image: -moz-linear-gradient(-45deg, #B02B2C 25%, #D24D4E 25%, #D24D4E 50%, #B02B2C 50%, #B02B2C 75%, #D24D4E 75%, #D24D4E);
background-image: -o-linear-gradient(-45deg, #B02B2C 25%, #D24D4E 25%, #D24D4E 50%, #B02B2C 50%, #B02B2C 75%, #D24D4E 75%, #D24D4E);
background-image: -ms-linear-gradient(-45deg, #B02B2C 25%, #D24D4E 25%, #D24D4E 50%, #B02B2C 50%, #B02B2C 75%, #D24D4E 75%, #D24D4E);
background-image: linear-gradient(-45deg, #B02B2C 25%, #D24D4E 25%, #D24D4E 50%, #B02B2C 50%, #B02B2C 75%, #D24D4E 75%, #D24D4E);
}
.teal-bar .bar{
background: #5F8789;
background-image: -webkit-linear-gradient(-45deg, #5F8789 25%, #7FA9AB 25%, #7FA9AB 50%, #5F8789 50%, #5F8789 75%, #7FA9AB 75%, #7FA9AB);
background-image: -moz-linear-gradient(-45deg, #5F8789 25%, #7FA9AB 25%, #7FA9AB 50%, #5F8789 50%, #5F8789 75%, #7FA9AB 75%, #7FA9AB);
background-image: -o-linear-gradient(-45deg, #5F8789 25%, #7FA9AB 25%, #7FA9AB 50%, #5F8789 50%, #5F8789 75%, #7FA9AB 75%, #7FA9AB);
background-image: -ms-linear-gradient(-45deg, #5F8789 25%, #7FA9AB 25%, #7FA9AB 50%, #5F8789 50%, #5F8789 75%, #7FA9AB 75%, #7FA9AB);
background-image: linear-gradient(-45deg, #5F8789 25%, #7FA9AB 25%, #7FA9AB 50%, #5F8789 50%, #5F8789 75%, #7FA9AB 75%, #7FA9AB);
}
.aqua-bar .bar{
background: #4ECAC2;
background-image: -webkit-linear-gradient(-45deg, #4ECAC2 25%, #6FECE4 25%, #6FECE4 50%, #4ECAC2 50%, #4ECAC2 75%, #6FECE4 75%, #6FECE4);
background-image: -moz-linear-gradient(-45deg, #4ECAC2 25%, #6FECE4 25%, #6FECE4 50%, #4ECAC2 50%, #4ECAC2 75%, #6FECE4 75%, #6FECE4);
background-image: -o-linear-gradient(-45deg, #4ECAC2 25%, #6FECE4 25%, #6FECE4 50%, #4ECAC2 50%, #4ECAC2 75%, #6FECE4 75%, #6FECE4);
background-image: -ms-linear-gradient(-45deg, #4ECAC2 25%, #6FECE4 25%, #6FECE4 50%, #4ECAC2 50%, #4ECAC2 75%, #6FECE4 75%, #6FECE4);
background-image: linear-gradient(-45deg, #4ECAC2 25%, #6FECE4 25%, #6FECE4 50%, #4ECAC2 50%, #4ECAC2 75%, #6FECE4 75%, #6FECE4);
}
.purple-bar .bar{
background: #745F7E;
background-image: -webkit-linear-gradient(-45deg, #745F7E 25%, #967F9F 25%, #967F9F 50%, #745F7E 50%, #745F7E 75%, #967F9F 75%, #967F9F);
background-image: -moz-linear-gradient(-45deg, #745F7E 25%, #967F9F 25%, #967F9F 50%, #745F7E 50%, #745F7E 75%, #967F9F 75%, #967F9F);
background-image: -o-linear-gradient(-45deg, #745F7E 25%, #967F9F 25%, #967F9F 50%, #745F7E 50%, #745F7E 75%, #967F9F 75%, #967F9F);
background-image: -ms-linear-gradient(-45deg, #745F7E 25%, #967F9F 25%, #967F9F 50%, #745F7E 50%, #745F7E 75%, #967F9F 75%, #967F9F);
background-image: linear-gradient(-45deg, #745F7E 25%, #967F9F 25%, #967F9F 50%, #745F7E 50%, #745F7E 75%, #967F9F 75%, #967F9F);
}
.pink-bar .bar{
background: #D65799;
background-image: -webkit-linear-gradient(-45deg, #D65799 25%, #F879BB 25%, #F879BB 50%, #D65799 50%, #D65799 75%, #F879BB 75%, #F879BB);
background-image: -moz-linear-gradient(-45deg, #D65799 25%, #F879BB 25%, #F879BB 50%, #D65799 50%, #D65799 75%, #F879BB 75%, #F879BB);
background-image: -o-linear-gradient(-45deg, #D65799 25%, #F879BB 25%, #F879BB 50%, #D65799 50%, #D65799 75%, #F879BB 75%, #F879BB);
background-image: -ms-linear-gradient(-45deg, #D65799 25%, #F879BB 25%, #F879BB 50%, #D65799 50%, #D65799 75%, #F879BB 75%, #F879BB);
background-image: linear-gradient(-45deg, #D65799 25%, #F879BB 25%, #F879BB 50%, #D65799 50%, #D65799 75%, #F879BB 75%, #F879BB);
}
.silver-bar .bar{
background: #D7D7D7;
background-image: -webkit-linear-gradient(-45deg, #D7D7D7 25%, #F9F9F9 25%, #F9F9F9 50%, #D7D7D7 50%, #D7D7D7 75%, #F9F9F9 75%, #F9F9F9);
background-image: -moz-linear-gradient(-45deg, #D7D7D7 25%, #F9F9F9 25%, #F9F9F9 50%, #D7D7D7 50%, #D7D7D7 75%, #F9F9F9 75%, #F9F9F9);
background-image: -o-linear-gradient(-45deg, #D7D7D7 25%, #F9F9F9 25%, #F9F9F9 50%, #D7D7D7 50%, #D7D7D7 75%, #F9F9F9 75%, #F9F9F9);
background-image: -ms-linear-gradient(-45deg, #D7D7D7 25%, #F9F9F9 25%, #F9F9F9 50%, #D7D7D7 50%, #D7D7D7 75%, #F9F9F9 75%, #F9F9F9);
background-image: linear-gradient(-45deg, #D7D7D7 25%, #F9F9F9 25%, #F9F9F9 50%, #D7D7D7 50%, #D7D7D7 75%, #F9F9F9 75%, #F9F9F9);
}Leave the solid background, for example. Grey bar should be like this
.grey-bar .bar{
background: #555;
}Remove the background-image.
Cheers,
Ismael
May 23, 2013 at 6:52 am #120774Ismael, thank you!
May 24, 2013 at 4:38 am #120775 -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- The topic ‘Is it possible to make the progress bar a solid color?’ is closed to new replies.