Светлый дизайн рейтинга + и - для uCoz


Здесь представлен код рейтинга, виде плюса и минуса, где закреплены знаки под лайки, что смотрится просто великолепно на любом по тематике сайте. Ведь по своему дизайну его можно видеть в кино сайте или не тематическом блоге, где будет написана статья. Что при установке пользователи могут реально оценить данный контент, ведь он будет располагаться вид материалов и комментариев к нему, а точнее рядом с данным контентом, это может быть просто видео или прописанные уроки, как сделать или выполнить некое решение.

Но его функция понятна по своему функционалу, теперь по стилистику. Ведь этот рейтинг выполнен по светлую гамму цвета. А у некоторых темный сайт или под другой палитрой идет. И здесь нам пригодятся стили CSS, которые закреплены за кодом. Там мы не просто цвет можем изменить, а также красиво оформить кнопки. К примеру по установке вы увидите немного серый рейтинг, где цветовая палитра прописана сверху и снизу, что дает нам сделать красивое оформление под любой фон. Что располагаться на сайте под цветовую палитру.

Как пример, изначально рейтинг выглядел в таком виде, это для тех, кому нравится минимализм, где меньше разного оформление. Как понимаем, что зависит от того, кто делает установку, где изначально все подгоняет под основную стилистику.

Стильный рейтинг с лайками

Так видим на страницы сайта конструктора uCoz, где больше наблюдаем кнопки и цифры, но добавив немного темного оттенка, то сразу будет замечен с открытием страницы с материалом.

Кнопки рейтинга по клику на сайт

Расположение разное, к примеру здесь будет отличным решение, как под данными, кто разместил контент.

Создание рейтинга на систему ucoz

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

Установка:

1. Нужно скачать архив, там находиться файл getRate2.js, что заливаем его в папку js на файловом менеджере.

2. Далее устанавливаем стиль на шрифтовые иконки, если вы еще не установили, это вверх или низ сайта.

Код:
link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


HTML

Код:
<script src="/js/getRate2.js"></script>
<div class="fbtm fx-row fx-middle ignore-select fbtm-two" style="float:right; text-decoration:none;">
<div class="otsenka fx-row">
<div class="flike"><a href="#" onclick="getRate(1,$ID$,'load');return false" data-toggle="tooltip" data-placement="top" title="Мне нравится!"><span class="fa fa-thumbs-up"></span><span class="reyting_kontenta"><span id="plus_$ID$" class="ignore-select"></span><?if($RATED$)?><?else?>0<?endif?></span></a></div>
<div class="fdislike"><a href="#" onclick="getRate(-1,$ID$,'load');return false" data-toggle="tooltip" data-placement="top" title="Мне не нравится!"><span class="fa fa-thumbs-down"></span><span class="reyting_kontenta"><span id="minus_$ID$" class="ignore-select"></span><?if($RATED$)?><?else?>0<?endif?></span></a></div>  
<script type="text/jаvascript">setRating($RATING$,$RATED$,$ID$)</script>  
</div>
</div>

CSS

Код:
.fx-row{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;  
}

.otsenka .fa {
  margin: 0 8px 0 0;
  font-size: 20px;
  color: #0b9144;
  text-shadow: 0 1px 0 #797e7c;
}

.otsenka .fdislike .fa {
  color: #fb240e;
}

.otsenka a {
  margin-left: 15px;
  display: block;
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  border: 1px solid rgb(155 155 155 / 40%);
  border-radius: 3px;
  box-shadow: 0 1px 3px 0 rgb(185 185 185 / 27%);
  font-size: 14px;
  color: #857e7e;
  font-weight: 700;
  background: linear-gradient(to bottom, #efe8e8 0%, #fffbfb 30%, #d7d8db 100%);
}

.reyting_kontenta{
display: inline-block;
border-left: 1px solid rgba(0, 0, 0, .1);
padding-left: 10px;
}

.otsenka a:hover {
  color: #646161;
  background: linear-gradient(to top, #d3d3d3 0%, #f1f1f1 30%, #e9e9e9 100%);
}


На странице демонстрации можно посмотреть саму фактуру дизайна рейтинга, так как все элементы с операторами заточены под систему uCoz, где после установочного процесса он будет работать. И станет хорошим информаторам для комментариев, что оставляют свое мнение, как гости и пользователи сайта.

10620_rating_for_a_we.rar
21-02-2022, 00:07 54.37 Kb
.rar
скачиваний: 7

Комментарии
Комментариев пока нет..
Ты можешь быть первым, кто оставит комментарий к публикации!


Вы не зарегистрированы

Светлый дизайн рейтинга + и - для uCoz


Автор публикации
Дата публикации
21-02-2022, 00:08
Просмотров
135
Комментариев
0

0
0
Внимание! Данный материал предоставлен сайтом VipAdmin.Club исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое
Как скачать?
Пройдите регистрацию на сайте
Воспользуйтесь кнопкой "Скачать"
Ровно через 15 секунд вам будет доступна прямая ссылка на файл
Светлый дизайн рейтинга + и - для uCoz
21-02-2022, 00:08
135

Светлый дизайн рейтинга + и - для uCoz

Информация
Версия
v1.405
Версия CMS
v15.0
Тематика
Новости, Блог, Каталог
Фреймворк
Bootstrap v5

Описание


Здесь представлен код рейтинга, виде плюса и минуса, где закреплены знаки под лайки, что смотрится просто великолепно на любом по тематике сайте. Ведь по своему дизайну его можно видеть в кино сайте или не тематическом блоге, где будет написана статья. Что при установке пользователи могут реально оценить данный контент, ведь он будет располагаться вид материалов и комментариев к нему, а точнее рядом с данным контентом, это может быть просто видео или прописанные уроки, как сделать или выполнить некое решение.

Но его функция понятна по своему функционалу, теперь по стилистику. Ведь этот рейтинг выполнен по светлую гамму цвета. А у некоторых темный сайт или под другой палитрой идет. И здесь нам пригодятся стили CSS, которые закреплены за кодом. Там мы не просто цвет можем изменить, а также красиво оформить кнопки. К примеру по установке вы увидите немного серый рейтинг, где цветовая палитра прописана сверху и снизу, что дает нам сделать красивое оформление под любой фон. Что располагаться на сайте под цветовую палитру.

Как пример, изначально рейтинг выглядел в таком виде, это для тех, кому нравится минимализм, где меньше разного оформление. Как понимаем, что зависит от того, кто делает установку, где изначально все подгоняет под основную стилистику.

Стильный рейтинг с лайками

Так видим на страницы сайта конструктора uCoz, где больше наблюдаем кнопки и цифры, но добавив немного темного оттенка, то сразу будет замечен с открытием страницы с материалом.

Кнопки рейтинга по клику на сайт

Расположение разное, к примеру здесь будет отличным решение, как под данными, кто разместил контент.

Создание рейтинга на систему ucoz

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

Установка:

1. Нужно скачать архив, там находиться файл getRate2.js, что заливаем его в папку js на файловом менеджере.

2. Далее устанавливаем стиль на шрифтовые иконки, если вы еще не установили, это вверх или низ сайта.

Код:
link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


HTML

Код:
<script src="/js/getRate2.js"></script>
<div class="fbtm fx-row fx-middle ignore-select fbtm-two" style="float:right; text-decoration:none;">
<div class="otsenka fx-row">
<div class="flike"><a href="#" onclick="getRate(1,$ID$,'load');return false" data-toggle="tooltip" data-placement="top" title="Мне нравится!"><span class="fa fa-thumbs-up"></span><span class="reyting_kontenta"><span id="plus_$ID$" class="ignore-select"></span><?if($RATED$)?><?else?>0<?endif?></span></a></div>
<div class="fdislike"><a href="#" onclick="getRate(-1,$ID$,'load');return false" data-toggle="tooltip" data-placement="top" title="Мне не нравится!"><span class="fa fa-thumbs-down"></span><span class="reyting_kontenta"><span id="minus_$ID$" class="ignore-select"></span><?if($RATED$)?><?else?>0<?endif?></span></a></div>  
<script type="text/jаvascript">setRating($RATING$,$RATED$,$ID$)</script>  
</div>
</div>

CSS

Код:
.fx-row{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;  
}

.otsenka .fa {
  margin: 0 8px 0 0;
  font-size: 20px;
  color: #0b9144;
  text-shadow: 0 1px 0 #797e7c;
}

.otsenka .fdislike .fa {
  color: #fb240e;
}

.otsenka a {
  margin-left: 15px;
  display: block;
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  border: 1px solid rgb(155 155 155 / 40%);
  border-radius: 3px;
  box-shadow: 0 1px 3px 0 rgb(185 185 185 / 27%);
  font-size: 14px;
  color: #857e7e;
  font-weight: 700;
  background: linear-gradient(to bottom, #efe8e8 0%, #fffbfb 30%, #d7d8db 100%);
}

.reyting_kontenta{
display: inline-block;
border-left: 1px solid rgba(0, 0, 0, .1);
padding-left: 10px;
}

.otsenka a:hover {
  color: #646161;
  background: linear-gradient(to top, #d3d3d3 0%, #f1f1f1 30%, #e9e9e9 100%);
}


На странице демонстрации можно посмотреть саму фактуру дизайна рейтинга, так как все элементы с операторами заточены под систему uCoz, где после установочного процесса он будет работать. И станет хорошим информаторам для комментариев, что оставляют свое мнение, как гости и пользователи сайта.

10620_rating_for_a_we.rar
21-02-2022, 00:07 54.37 Kb
.rar
скачиваний: 7
[xfgiven_images]
Изображения
[/xfgiven_images]
Автор публикации
wad
Реклама1
Реклама1
Комментарии и отзывы
  • Пустота..
    Людям пока лень писать тут отзывы и комментарии..


  • Вы не зарегистрированы

Последние комментарии
CMS Unisite 4.7 nulled
Sveredyuk
Вчера, 06:04
Как будто у тебя есть она
CryptEx v2.1.0 NULLED - платформа обмена криптовалюты
Kotyara
28 января 2023 21:56
В каком именно деле? Нужна помощь пиши в телегу @Dok_VaKo
CMS Unisite 4.7 nulled
Гость Mark
26 января 2023 16:32
Кому нужна версия 4.8
CryptEx v2.1.0 NULLED - платформа обмена криптовалюты
Ramzan
23 января 2023 20:25
привет поможешь мне одном деле ?
CryptEx v2.1.0 NULLED - платформа обмена криптовалюты
Kotyara
23 января 2023 13:08
Скажите пожалуйста а какой ключ лицензии
Скрипт автодоната Buy Privileges 3.0 (Слив)
zoro33
22 января 2023 12:52
этот скрипт фигня там функция продление привилегии в личном кабинете не работает
CMS для игрового проекта Minecraft
HideRR
21 января 2023 03:09
Личный кабинет или магазин блоков хоть у кого то получилось подключить что бы он отображался и
CMS Unisite 4.7 nulled
Гость Damir
20 января 2023 21:48
ключ активации: 1
CodeIgniter-Sample-проект
vdvd
18 января 2023 01:21
#96 xcv dvdfvdvdfv dfbdfvdv
TopAuto v1.0.4 - адаптивный шаблон интернет-магазина автозапчастей и автотоваров
Гость Владимир
15 января 2023 11:22
Как установить данный шаблон где взять инструкцию?
Unisite Board 4.4 NULLED NEW 2022
Антон
14 января 2023 16:00
UniSite Board (Доска объявлений) v4.8 zupic ru
Скрипт Payeer бонусника CashLike
Гость Илья
13 января 2023 11:54
Не выдает бонусы,Может подскажет кто что с этим делать?
Cursus v1.3.6 NULLED - скрипт продажи онлайн-курсов
kivon35
12 января 2023 22:37
На последнем этапе установки, кнопка Click to Login не активна. Скрипт не устанавливается.
Joomly Contactus Premium v3.22 - форма обратной связи для Joomla
Виталий
11 января 2023 00:52
Шикарный модуль, Но не работает для Joomla 4 Возможно его сделать для J4?
User Blogs System (UBS) 2.2.2
appsfinder
11 января 2023 00:49
thanks for this addon