Иконки рейтинга 2.X

 
Посетитель
no avatar
Медаль
Сообщений: 375
Друзья, всем привет! Поделитесь кто нибудь инфой где взять иконки рейтинга для 2.8.2?
Сейчас стоит по умолчанию связка стрелок "вверх" - "вниз".
А хотелось бы стандарт всем знакомый в виде как на картинке. Где можно такую связку раздобыть?
Прикрепленные файлы:
_nfdr1.png | 1.11 Кб | Скачали: 106
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1147
А в чем проблема поменять иконки на нужные? smoke

На главной странице сайта есть ссылка на спонсора проекта. Загляни к ним, там полно иконок. joke
Реклама
cms
Посетитель
no avatar
Медаль
Сообщений: 375
Sonat:

А в чем проблема поменять иконки на нужные? smoke

На главной странице сайта есть ссылка на спонсора проекта. Загляни к ним, там полно иконок. joke

Эти иконки идут одним комплектом в гиф версии. Динамические.
Мне такого файла найти не удалось с комплектом.
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1147
@Dmitrii:
Эти иконки идут одним комплектом в гиф версии. Динамические.
Динамику обеспечивает css.
И да, придется подготовить в фотошопе свой файл с шестью изображениями на одной картинке
Посетитель
small user social cms
Медаль
Сообщений: 171
Я сделал проще. Поскольку минуса мне не нужны были изначально, я в виджите оставил только возможность плюсовать и заменил иконку на свою только для плюсика картинку для него можно выбрать любую и не надо делать на 6 картинок ничего в фотошопе.
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2538
на сайте
Можно сделать иконочным шрифтом. Например так

Иконки рейтинга

Если интересно, поделюсь своим файлом css и шаблоном вывода записи блога...
Виджеты, поля и компоненты для instantcms 2 http://www.zau4man.ru/
Посетитель
small user social cms
Медаль
Сообщений: 111
Zau4man:

Можно сделать иконочным шрифтом. Например так

Конечно интересно!
Посетитель
small user social cms
Медаль
Сообщений: 226
Zau4man:

Можно сделать иконочным шрифтом. Например так

Иконки рейтинга

Если интересно, поделюсь своим файлом css и шаблоном вывода записи блога...

Добрый вечер! Со мной можете поделиться? Спасибо!
Александр Витальевич
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2538
на сайте
Сперва про замену иконок на шрифты... Идем на сайт http://fontawesome.io/ качаем Font Awesome 4. Предлагать будут 5й, я с ним не работал. Качаем 4й.
Из архива копируем папку fonts к себе в шаблон. Затем файл font-awesome.min.css в папку css вашего шаблона. Открываем файл main.tpl.php и подключаем этот ксс файл.

Например так: после
Код PHP:
  1. <?php $this->addMainCSS("templates/{$this->name}/css/theme-gui.css"); ?>
добавим
Код PHP:
  1. <?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.min.css"); ?>
Все. Вы можете заменять картинки в своем шаблоне на иконки.
Заменим картинки на иконки в блоке рейтинга. Откройте файл templates/шаблон/controllers/rating/widget.tpl.php и замените блок

Код PHP:
  1. <div class="arrow up">
  2. <?php if ($is_enabled){ ?>
  3. <a href="#vote-up" class="vote-up" title="<?php echo LANG_RATING_VOTE_UP; ?>"></a>
  4. <?php } else { ?>
  5. <span class="disabled" title="<?php html($is_voted ? LANG_RATING_VOTED : LANG_RATING_DISABLED); ?>"></span>
  6. <?php } ?>
  7. </div>
на
Код PHP:
  1. <div class="arrow up">
  2. <?php if ($is_enabled){ ?>
  3. <a href="#vote-up" class="vote-up" title="<?php echo LANG_RATING_VOTE_UP; ?>"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></a>
  4. <?php } else { ?>
  5. <span class="disabled" title="<?php html($is_voted ? LANG_RATING_VOTED : LANG_RATING_DISABLED); ?>"><i class="fa fa-hand-rock-o" aria-hidden="true"></i></span>
  6. <?php } ?>
  7. </div>
аналогично со вторым блоком
Код PHP:
  1. <div class="arrow down">
  2. <?php if ($is_enabled){ ?>
  3. <a href="#vote-down" class="vote-down" title="<?php echo LANG_RATING_VOTE_DOWN; ?>"></a>
  4. <?php } else { ?>
  5. <span class="disabled" title="<?php html($is_voted ? LANG_RATING_VOTED : LANG_RATING_DISABLED); ?>"></span>
  6. <?php } ?>
  7. </div>
на
Код PHP:
  1. <div class="arrow down">
  2. <?php if ($is_enabled){ ?>
  3. <a href="#vote-down" class="vote-down" title="<?php echo LANG_RATING_VOTE_DOWN; ?>"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i></a>
  4. <?php } else { ?>
  5. <span class="disabled" title="<?php html($is_voted ? LANG_RATING_VOTED : LANG_RATING_DISABLED); ?>"><i class="fa fa-hand-rock-o" aria-hidden="true"></i></span>
  6. <?php } ?>
  7. </div>
и в файле templates/шаблон/css/theme-gui.css уберем старые стрелочки. Закомментируйте строку как в примере ниже
Код CSS:
  1.  
  2. .rating_widget .arrow span,
  3. .rating_widget .arrow a {
  4. display: block;
  5. width:11px;
  6. height:15px;
  7. /*zau4man background: url("../images/icons/vote.gif") no-repeat;*/
  8. }
  9.  
Вроде бы все. Теперь вместо картинок стрелочек у вас иконки шрифтов.

Иконки рейтинга
Редактировалось: 1 раз (Последний: 9 января 2018 в 12:05)
Виджеты, поля и компоненты для instantcms 2 http://www.zau4man.ru/
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2538
на сайте
Теперь про блок автора в начале статьи.

Если вы хотите сделать его для всех материалов, то изменения вносите в файл templates/шаблон/content/default_item.tpl.php
Если хотите внести изменения только для страницы просмотра записи какого-то одного типа контента, то сделайте копию этого файла и назовите, скажем для типа контента blogs, blogs_item.tpl.php

В этом файле в самом начале добавьте блок

Код PHP:
  1. <div class="blog_author">
  2. <div class="image ava_wd_blogs">
  3. <a href="<?php echo href_to('users', $item['user']['id']); ?>" title="<?php html($item['user']['nickname']); ?>"><?php echo html_avatar_image($item['user']['avatar'], 'small', $item['user']['nickname']); ?></a>
  4. </div>
  5. <div class="blog_author_info">
  6. <?php if ($fields['user']['is_in_item']){ ?>
  7. <div class="blog_user" title="<?php html( $fields['user']['title'] ); ?>">
  8. <?php echo $fields['user']['html']; ?>
  9. </div>
  10. <?php } ?>
  11. <?php if ($fields['date_pub']['is_in_item']){ ?>
  12. <div class="blog_date" title="<?php html( $fields['date_pub']['title'] ); ?>">
  13. <i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo $fields['date_pub']['html']; ?>
  14. </div>
  15. <?php } ?>
  16. </div>
  17. </div>
  18. <div class="blog_info">
  19. <?php if (!empty($ctype['options']['hits_on'])){ ?>
  20. <div class="blog_hits" title="<?php echo LANG_HITS; ?>">
  21. <i class="fa fa-eye" aria-hidden="true"></i> <?php echo $item['hits_count']; ?>
  22. </div>
  23. <?php } ?>
  24. <?php if (!empty($item['rating_widget'])){ ?>
  25. <div class="blog_rating">
  26. <?php echo $item['rating_widget']; ?>
  27. </div>
  28. <?php } ?>
  29. </div>
  30. <div class="clear"></div>
Этот блок выведет автора, количество просмотров и рейтинг в самом начале страницы. Уберем блоки рейтинга, автора и просмотров из самого низа файла, которые были там изначально.

Найдите внизу и удалите следующие блоки

Код PHP:
  1. <?php if (!empty($item['rating_widget'])){ ?>
  2. <div class="bar_item bi_rating">
  3. <?php echo $item['rating_widget']; ?>
  4. </div>
  5. <?php } ?>
Код PHP:
  1. <?php if ($fields['date_pub']['is_in_item']){ ?>
  2. <div class="bar_item bi_date_pub" title="<?php html( $fields['date_pub']['title'] ); ?>">
  3. <?php echo $fields['date_pub']['html']; ?>
  4. </div>
  5. <?php } ?>
Код PHP:
  1. <?php if (!empty($ctype['options']['hits_on'])){ ?>
  2. <div class="bar_item bi_hits" title="<?php echo LANG_HITS; ?>">
  3. <?php echo $item['hits_count']; ?>
  4. </div>
  5. <?php } ?>
Осталось оформить добавленный блок. Откройте какой-нибудь css файл вашего шаблона (например templates/default/css/theme-content.css ) и в самый низ добавьте

Код CSS:
  1.  
  2. .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
  3. .blog_author, .blog_info {display: inline-block;vertical-align: middle;}
  4. .blog_author .ava_wd_blogs, .blog_author .blog_author_info {display: inline-block;vertical-align: top;}
  5. .blog_author .blog_user a{text-decoration: none;font-size: 20px;font-weight: bold;}
  6. .blog_author .blog_user a, .blog_author .blog_date {margin-left: 20px;line-height: 32px;}
  7. .blog_author .blog_date {font-size: 11px;}
  8. .blog_info .blog_rating, .blog_info .blog_hits {display: inline-block;vertical-align: middle;height:64px;line-height:64px;margin-left: 20px;}
  9. .blog_info {font-size: 18px;font-weight: bold;float: right;}
  10. .blog_info i {
  11. display: inline-block;
  12. padding: 10px;
  13. background: #444345;
  14. text-decoration: none;
  15. border-radius: 17px;
  16. font-size: 14px;
  17. line-height: 1;
  18. color: #fff;
  19. }
  20. .blog_info .blog_hits i {margin-right: 10px;}
  21. .blog_info .blog_rating .score {height:64px;line-height:64px;}
  22. .blog_info .blog_rating .arrow.up i {background: #FE9A2F;}
  23. .blog_info .blog_rating .arrow.down i {background: #444345;}
  24.  
Получите результат как на скриншоте

Иконки рейтинга
Редактировалось: 1 раз (Последний: 9 января 2018 в 12:22)
Виджеты, поля и компоненты для instantcms 2 http://www.zau4man.ru/
Посетитель
small user social cms
Медаль
Сообщений: 111
Zau4man, спасибо!!! Еще не проверял, но наверняка будет работать)
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.