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

Вот пример дизайна, который идет в комплекте.
Мне он показался немного унылым, и решил его заменить...
Получилось это:
Кастомизируем рейтинг 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качиваний: 142)

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


Добавить комментарий

25 Комментариев

  1. mir
    Спасибо. Было бы неплохо слегка подправить доработку. При запрете изменять рейтинг гостю постоянно выводится: Ты уже голосовал.
  2. Jerry Пользователь offline автор
    Цитата: mir
    Спасибо. Было бы неплохо слегка подправить доработку. При запрете изменять рейтинг гостю постоянно выводится: Ты уже голосовал.


    Внимательнее смотрим последние строчки новости!!
    Именно это и было изменено!
  3. mir
    Сразу не заметил - сонный был, очевидно)) Но после исправления, если уже проголосовал, при повторном клике не показывается, что уже голосовал. Как я понимаю, это уже окончательный вариант?
  4. Jerry Пользователь offline автор
    mir, ну так как и в обычном рейтинге Дле.
    да, окончательный.
  5. mir
    Я к тому спросил, что было бы здорово если при повторном клике во всплывающем окне выводилось: Ты уже голосовал.
  6. Jerry Пользователь offline автор
    mir, для этого, на сколько я знаю, необходимо хранить всю информацию о каждом проголосовавшем в куках или бд.
    Мне ради такой фигни лень ковыряться в коде :))
  7. Владислав
    У меня +1 съезжает, и получается вверху плюс, а снизу число лайков.) тут тестирую _mp3x3.ru
    ps: хороший сайт

    браузер опера. в гугл хроме все нормально.
  8. Jerry Пользователь offline автор
    Владислав, версия оперы? У меня 12.50 и всё отлично работает!
    Попробуй кеш почистить.
    Спасибо.
  9. mobilko
    Я правильно понимаю , это замена стандарного рейтинга DLE.
    К примеру , я хотел бы в краткой новсти использовать стандартный рейтинг, а в полной новости вот этот. Такое возможно ?
  10. Jerry Пользователь offline автор
    mobilko, да, это замена стандартного.
    У Сандера есть несколько платных рейтингов. Возможно, они Вам подойдут!

Добавление комментария

Я бы хотел услышать Ваши мысли. Не стесняйтесь оставить свой комментарий и присоединиться к беседе!

Вы бот?
Введите код: * Кликните на изображение чтобы обновить код, если он неразборчив