Сегодня решил создать чего нибудь новое и приятное для своих посетителей, и сделал очень простую но очень красивую прогресс рейтинга материала через CSS, суть скрипта в том что он показывает количество рейтинга материала в процентах как в скрине, и его цвет можно изменить под свой шаблон, можно и вставить картингу и он поддерживает!
В Для вас я сегодня представляю два вида такого скрипта, один сделан с картинкой а другой с стандартными цветами.
Установка этого скрипта не требует мучении, его просто надо вставить в CSS, и так приступим,
Вставьте нижний код в ваш CSS:
Code
/* progress reted */
.uprogress{
width:216px;
height:41px;
background:url(http://test-ucozon.do.am/files/bg_bar.gif) no-repeat 0 0;
position:relative;
}
.uprogress span{
position:absolute;
display:block;
width:200px;
height:25px;
background: #369; no-repeat 0 0;
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;
}
.uprogress mir{
position:absolute;
display:block;
width:200px;
height:25px;
background:#778899; repeat-x 0 0;
top:0;
}
/* progress reted end */
А этот код на странице материала:
Code
<p class="uprogress">
<span><mir style="left:$RATED$px"></mir>$READS$/$RATED$%</span>
</p>
Настройки: Как видите на скрине я установил синие и серые цвета для прогресса, но вы можете их сменить под свой шаблон, таким образом:
.uprogress span{
position:absolute;
display:block;
width:200px;
height:25px;
background: #369; no-repeat 0 0;
top:8px;
left:8px;
overflow:hidden;
text-indent:-8000px;
Где background: "#369;" измените сам цвет прогресса, то есть линию,
А это уже внутренний фон индикатора
.uprogress mir{
position:absolute;
display:block;
width:200px;
height:25px;
background:#778899; repeat-x 0 0;
top:0;
Где background:#778899; измените под свой вкус!
Автор: мир_младший
Меню сайта
Меню сайта
Ничего не поменялось((
