Главная > Хаки / Made by Jerry > Кастомизируем рейтинг iLike by Sander

Кастомизируем рейтинг iLike by Sander


18.07.2012, 11:10. Разместил: Jerry
Вот пример дизайна, который идет в комплекте.
Мне он показался немного унылым, и решил его заменить...
Получилось это:
Кастомизируем рейтинг iLike by Sander
1 - так рейтинг отображается всегда;
2 - так при наведении на него мышкой, если никто ещё не голосовал;
3 - а тут уже проголосовали.

Работает во всех браузерах последних версий, в т.ч. IE 8!

Установка:
В engine/modules/functions.php
После:
function ShowRating($id, $rating, $vote_num, $allow = true) {


Вставляем:
	$rating = ($rating>0)?"+".$rating:0;
	if($allow) return "<span id=\"ilike-{$id}\"><a href=\"#\" onclick=\"ilike({$id});return false;\" title=\"Мне нравится!\"><span class=\"but-icon\"></span>Vote<span class=\"count-vote\"><span>{$rating}</span></span></a></span>";
	else return "<a href=\"#\" onclick=\"return false;\"><span class=\"but-icon\"></span>Vote<span class=\"count-vote\"><span>{$rating}</span></span></a>";


В файл стилей шаблона:

.buttton-media-gray div{
	margin-right:2px;
}

.but-gray-medium{
	background:url("../images/but_gray_media_trasp.png") top repeat-x;
	padding:4px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	behavior: url(PIE.htc);
}

.but-gray-medium a{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	behavior: url(PIE.htc);
	padding:4px 11px 5px 5px;
	color:#787878;
	text-shadow:0px 1px 0px #fff;
	background:url("../images/but_gray_media.png") top repeat-x;
	border:1px solid #a4a9aa;
}

.but-gray-medium span.but-icon{
	height:12px;
	width:14px;	
	margin-right:1px;
	display:inline-block;
	position:relative;
	top:0px;
}

.buttons{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	behavior: url(PIE.htc);
	display:inline-block;
	vertical-align:top;
}

.buttons a{
	display:block;	
}



.vote a{
	position:relative;
}

.vote a:hover{
	background:url("../images/but_vote.png") top repeat-x;
	color:white;
	text-shadow:0px -1px 0px #f14d8a;
	border:1px solid #bb738d;
}

.vote a span.but-icon{
	background:url("../images/vote_icon.png") top no-repeat;
	top:2px;
}

.vote a:hover span.but-icon{
	background:url("../images/vote_icon_hover.png") top no-repeat;
}

.count-vote{
	position:absolute;
	left:60px;
	top:-1px;
	padding-right:0;
	display:none;
	background:url("../images/count_vote.png") top left no-repeat;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	behavior: url(PIE.htc);
	padding: 0;
	height:27px;
	color:#787878;
	text-shadow:0px 1px 0px #fff;
}
.count-vote span{	
	background:url("../images/vote_numb_right.png") right top no-repeat;
	padding: 5px 6px 0 11px;
	height:27px;
	display:block;
	z-index:999;
}

.vote a:hover .count-vote{
	display:inherit;
}


В шаблоне рейтинг выводим так:

<div class="but-gray-medium buttons vote">{rating}</div>


Картинки кидаем в images вашего шаблона.
Остальная инструкция в архиве.
rating-style.7z [10,15 Kb] (cкачиваний: 144)

На всякий случай прилагаю оригинальный рейтинг от Сандера.
ilike.zip [4,52 Kb] (cкачиваний: 94)
Вернуться назад