ZorNet.Ru — сайт для вебмастера » HTML и CSS » Иконки на форум uCoz в стильной форме

Иконки на форум uCoz в стильной форме

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

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

Давайте раздеремся, как все будет смотреться.

Это когда есть комментарий



Это когда не кто не прокомментировал на форуме



Начнем установку!

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

Идем в CSS и там нужно найти, этот кусок стиля.

Код
.forumIcoTd {...}


Лично нашел такое название, но без трое точек и он стоял не с начало и не чего не стал делать и убирать не стал.

Нужно в стили поставить нам эту рамку светло синее, она также уменьшается и сейчас стоит на 50px как по высоте и ширине.

Копируем и ставим:

Код
.forumIcoTd {background:#ffffff url('http://zornet.ru/Ajaxoskrip/forumIcoTd.png') no-repeat center;width:50px;height:50px;}


И теперь какие иконки у вас стояли, по вверх будет этот дизайн и примерно так смотреться.



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

Теперь осталось узнать, где пользователи отписали, чтоб ответить или посмотреть, и вот как раз ярко желтая точка будет стоять рядом с кнопкой.

Чтоб ее установить, нужен этот скрипт.

Находим Общий вид страниц форума это в админ панели и заходим туда. Так ищем BODY и только после него ставит код.

Код
<script type="text/javascript">  
  $(document).ready(function(){  
  $('.forumIcoTd img[title="Есть новые сообщения"]').each(function(){  
  $(this).after('<div class="newMessage"><img src="http://zornet.ru/Ajaxoskrip/new_sob.png" border="0" alt="NewMessage"></div>')  
  });  
  });  
  </script>


В прицепе все мы установили и проверил на тестовом сайте, на светлом дизайн, а как можно понять от оттенка цвета или какой можно сделать, то и на темном будет здорово смотреться.

Здесь замечу, стоят системные кнопки.

Иконки форума есть ответ и нет его

Вот как видите очень прилично смотрится и нам не нужны не какие кнопки, которые бы менялись, когда можно все сделать стилях, а скрипт будет мониторинг на счет ответов или новых постов на форуме.
26 Июля 2016 Просмотров: 1447 Комментариев: (7)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 7
Сопрано
Сопрано 26 Июля 2016 01:591
0
Просто 2 материала вместе сделаных, но так здорово, ни синий мне не очень нравится, хотя он на светлый формат и темный подойдет, так как не сильно он синий а светло синее небо. biggrin
Kosten
Kosten 26 Июля 2016 04:336
0
Ну а почему бы их не соединить и что то получить другое, да и подходят друг друга, просто дополняют.
Scheme
Scheme 26 Июля 2016 02:042
0
Хоть где то кнопки от системы пригодились, так как здесь полностью согласен, что они как раз подходят в этой теме, и кнопка желтая и немного темнее будет, но во общем не вооруженным взглядом видно будет, что кто то написал.
tsakonter
tsakonter 26 Июля 2016 02:083
0
Костен, так все нормально, но если бы еще в придачу сделал бы несколько разный по цвету, то было бы точно полный материал, и многие бы просто выбирали а не находили бы, кто им мог сделать. И вообще можно и круглые поставить, и мне так кажется, тоже очень хорошо бы было, просто один дизайн, нужно какой то хоть небольшой выбор, и будет как нужно.
ucozmental
ucozmental 26 Июля 2016 02:375
0
Круглые можно сделать, все в стилях, поставить border-radius: 100px; и должно быть кнопка груглой, но там можно самому выстроить.
Kosten
Kosten 26 Июля 2016 04:347
0
Да, этот как раз за округление отвечает, в стили его прописываю, чтоб углы убрать.
Maryges
Maryges 26 Июля 2016 02:334
0
Ставил один скрипт, с кнопкой, очень удобный, но когда форум был.
avatar