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

InstantCMS 2.X

#1 8 января 2018 в 14:08

Друзья, всем привет! Поделитесь кто нибудь инфой где взять иконки рейтинга для 2.8.2?
Сейчас стоит по умолчанию связка стрелок "вверх" — "вниз".
А хотелось бы стандарт всем знакомый в виде как на картинке. Где можно такую связку раздобыть?

Прикрепленный файл

_nfdr1.png 2 Кб

#2 8 января 2018 в 14:16

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

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

#3 8 января 2018 в 14:30

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

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

Sonat

Эти иконки идут одним комплектом в гиф версии. Динамические.
Мне такого файла найти не удалось с комплектом.

Сегодня в 15:52

#4 8 января 2018 в 14:44

Эти иконки идут одним комплектом в гиф версии. Динамические.
@Dmitrii

Динамику обеспечивает css.
И да, придется подготовить в фотошопе свой файл с шестью изображениями на одной картинке

#5 8 января 2018 в 15:06

Я сделал проще. Поскольку минуса мне не нужны были изначально, я в виджите оставил только возможность плюсовать и заменил иконку на свою только для плюсика картинку для него можно выбрать любую и не надо делать на 6 картинок ничего в фотошопе.

#6 8 января 2018 в 15:07

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

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

Разработка виджетов, полей и компонентов для instantcms 2, сайты под ключ. site: www.zau4man.ru telegram: @zau4man

#7 8 января 2018 в 15:20

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

Zau4man

Конечно интересно!

#8 8 января 2018 в 18:49

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

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

Zau4man

Добрый вечер! Со мной можете поделиться? Спасибо!

Александр Витальевич

#9 9 января 2018 в 12:03

Сперва про замену иконок на шрифты… Идем на сайт fontawesome.io/ качаем Font Awesome 4. Предлагать будут 5й, я с ним не работал. Качаем 4й.
Из архива копируем папку fonts к себе в шаблон. Затем файл font-awesome.min.css в папку css вашего шаблона. Открываем файл main.tpl.php и подключаем этот ксс файл.

Например так: после

<?php $this->addMainCSS("templates/{$this->name}/css/theme-gui.css"); ?>

добавим

<?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.min.css"); ?>

Все. Вы можете заменять картинки в своем шаблоне на иконки.
Заменим картинки на иконки в блоке рейтинга. Откройте файл templates/шаблон/controllers/rating/widget.tpl.php и замените блок

<div class="arrow up">
        <?php if ($is_enabled){ ?>
            <a href="#vote-up" class="vote-up" title="<?php echo LANG_RATING_VOTE_UP; ?>"></a>
        <?php } else { ?>
            <span class="disabled" title="<?php html($is_voted ? LANG_RATING_VOTED : LANG_RATING_DISABLED); ?>"></span>
        <?php } ?>
    </div>

на

<div class="arrow up">
        <?php if ($is_enabled){ ?>
            <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>
        <?php } else { ?>
            <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>
        <?php } ?>
    </div>

аналогично со вторым блоком

<div class="arrow down">
        <?php if ($is_enabled){ ?>
            <a href="#vote-down" class="vote-down" title="<?php echo LANG_RATING_VOTE_DOWN; ?>"></a>
        <?php } else { ?>
            <span class="disabled" title="<?php html($is_voted ? LANG_RATING_VOTED : LANG_RATING_DISABLED); ?>"></span>
        <?php } ?>
    </div>

на

<div class="arrow down">
        <?php if ($is_enabled){ ?>
            <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>
        <?php } else { ?>
            <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>
        <?php } ?>
    </div>

и в файле templates/шаблон/css/theme-gui.css уберем старые стрелочки. Закомментируйте строку как в примере ниже

 
.rating_widget .arrow span,
.rating_widget .arrow a {
    display: block;
    width:11px;
    height:15px;
/*zau4man   background: url("../images/icons/vote.gif") no-repeat;*/
}

Вроде бы все. Теперь вместо картинок стрелочек у вас иконки шрифтов.

Разработка виджетов, полей и компонентов для instantcms 2, сайты под ключ. site: www.zau4man.ru telegram: @zau4man

#10 9 января 2018 в 12:19

Теперь про блок автора в начале статьи.

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

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

<div class="blog_author">
    <div class="image ava_wd_blogs">
        <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>
    </div>
    <div class="blog_author_info">
        <?php if ($fields['user']['is_in_item']){ ?>
        <div class="blog_user" title="<?php html( $fields['user']['title'] ); ?>">
            <?php echo $fields['user']['html']; ?>
        </div>
        <?php } ?>
        <?php if ($fields['date_pub']['is_in_item']){ ?>
        <div class="blog_date" title="<?php html( $fields['date_pub']['title'] ); ?>">
            <i class="fa fa-clock-o" aria-hidden="true"></i>  <?php echo $fields['date_pub']['html']; ?>
        </div>
        <?php } ?>
    </div>
</div>
<div class="blog_info">
    <?php if (!empty($ctype['options']['hits_on'])){ ?>
        <div class="blog_hits" title="<?php echo LANG_HITS; ?>">
            <i class="fa fa-eye" aria-hidden="true"></i> <?php echo $item['hits_count']; ?>
        </div>
    <?php } ?>
    <?php if (!empty($item['rating_widget'])){ ?>
        <div class="blog_rating">
            <?php echo $item['rating_widget']; ?>
        </div>
    <?php } ?>    
</div>
<div class="clear"></div>

Этот блок выведет автора, количество просмотров и рейтинг в самом начале страницы. Уберем блоки рейтинга, автора и просмотров из самого низа файла, которые были там изначально.

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

<?php if (!empty($item['rating_widget'])){ ?>
                <div class="bar_item bi_rating">
                    <?php echo $item['rating_widget']; ?>
                </div>
            <?php } ?>

<?php if ($fields['date_pub']['is_in_item']){ ?>
                <div class="bar_item bi_date_pub" title="<?php html( $fields['date_pub']['title'] ); ?>">
                    <?php echo $fields['date_pub']['html']; ?>
                </div>
            <?php } ?>

<?php if (!empty($ctype['options']['hits_on'])){ ?>
                <div class="bar_item bi_hits" title="<?php echo LANG_HITS; ?>">
                    <?php echo $item['hits_count']; ?>
                </div>
            <?php } ?>

Осталось оформить добавленный блок. Откройте какой-нибудь css файл вашего шаблона (например templates/default/css/theme-content.css ) и в самый низ добавьте

 
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.blog_author, .blog_info {display: inline-block;vertical-align: middle;}
.blog_author .ava_wd_blogs, .blog_author .blog_author_info {display: inline-block;vertical-align: top;}
.blog_author .blog_user a{text-decoration: none;font-size: 20px;font-weight: bold;}
.blog_author .blog_user a, .blog_author .blog_date {margin-left: 20px;line-height: 32px;}
.blog_author .blog_date {font-size: 11px;}
.blog_info .blog_rating, .blog_info .blog_hits {display: inline-block;vertical-align: middle;height:64px;line-height:64px;margin-left: 20px;}
.blog_info {font-size: 18px;font-weight: bold;float: right;}
.blog_info i {
    display: inline-block;
    padding: 10px;
    background: #444345;
    text-decoration: none;
    border-radius: 17px;
    font-size: 14px;
    line-height: 1;
    color: #fff;
}
.blog_info .blog_hits i {margin-right: 10px;}
.blog_info .blog_rating .score {height:64px;line-height:64px;}
.blog_info .blog_rating .arrow.up i {background: #FE9A2F;}
.blog_info .blog_rating .arrow.down i {background: #444345;}

Получите результат как на скриншоте

Разработка виджетов, полей и компонентов для instantcms 2, сайты под ключ. site: www.zau4man.ru telegram: @zau4man

#11 9 января 2018 в 14:49

Zau4man, спасибо!!! Еще не проверял, но наверняка будет работать)

Админ онлайн постоянно

Афиша 2.0

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

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

Похожие темы

Не отображаются иконки.

Modern иконки шаблонов списка типов контента

Пропали иконки fa fa из меню

[ЕСТЬ РЕШЕНИЕ] Как добавить иконки в виджет Кнопка 1.0.0

[ЕСТЬ РЕШЕНИЕ] Иконка в странице как изменить размер

Лог изменения рейтинга

InstantCMS Team

О проекте

Поддержка

Дополнения