Светлый дизайн рейтинга + и - для 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
скачиваний: 0

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


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

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


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

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

Светлый дизайн рейтинга + и - для 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
скачиваний: 0
[xfgiven_images]
Изображения
[/xfgiven_images]
Автор публикации
wad
Комментарии и отзывы
  • Пустота..
    Людям пока лень писать тут отзывы и комментарии..


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

Последние комментарии
Скрипт рулетки Bellereve c 7 игровыми режимами
caz
Вчера, 18:10
есть намунал по установке
All In One Seo Extension [OCMod - Vqmod]
Гость иван
18 мая 2022 12:58
Не работает c opencart 3
Панель управления игровым хостингом HOSTINPL 5.5 (Debian 9)
TrapManiak
18 мая 2022 04:10
не работает ваш скрипт :D
Слив скрипта Nvuti 8.0, 6 режимов
nvutinewfk
17 мая 2022 18:52
Можешь мне дать в тг @fr0zen93
Слив аналога nakrutka.by
tommygun
15 мая 2022 01:57
привет, админка не реагирует на функции , например на добавлении или изменении категорий , как
Слив интернет магазина от ScriptBerry
Гость Arthurr
14 мая 2022 21:07
65.21.218.141
Слив интернет магазина от ScriptBerry
Arthurr
14 мая 2022 21:06
65.21.218.141
VII ENGINE 2.0 НОВАЯ СБОРКА
Имран Абай
14 мая 2022 17:34
создаю соц сеть
Слив интернет магазина от ScriptBerry
VexBor
13 мая 2022 23:07
95.211.16.66
Скрипт рулетки PLAY2X WINBEE DICE MINE NVUTI CABURA
tommygun
13 мая 2022 19:18
бля я как немногу ларавелы установить никак у мя не работают
WP Guppy v2.3 NULLED - плагин живого чата для WordPress
Daniil_xxx
13 мая 2022 11:01
Подскажите. Есть последняя версия плагина 3.3 ?
Workreap v2.1.8 - шаблон биржи фриланса wordpress
Daniil_xxx
13 мая 2022 11:00
Добрый день. Подскажите есть последняя версия темы? 2.5.2
Unisite Board 4.4 NULLED NEW 2022
Гость 2022
12 мая 2022 23:25
hello. can you null this template? they wont sell it, and wont give it adbroad.
Скрипт лотереи(которую продают)
tommygun
11 мая 2022 01:32
после установки сборки белый экран , как решить ребята?
Скрипт WF-TICKET - Открытие кейсов + карточки
tommygun
10 мая 2022 23:47
нерабочая админка