» »

Красивое окно "Правил" на сайт uCoz


Красивое окно "Правил" на сайт uCoz

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

Страница материала и комментариев к нему:

Код
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">  
<link rel="stylesheet" href="/css/font-awesome.css">  
<link rel="stylesheet" href="/css/animate.css">  
<div class="art-alert_danger mb-25 mt-25">  
<span class="alert-icon"><i class="fa fa-exclamation-triangle"></i></span>  
<div class="alert-descr">  
  <strong style="text-transform:uppercase">Правила добавления комментариев</strong>  
<div class="alert-content">  
Уважаемые пользователи! Просим вас, оставляя комментарии, уважать друг друга и не злоупотреблять свободой слова.  
  <div class="mt-10" style="line-height:22px;">  
<strong>Администрация сайта будет удалять:</strong><br>  
<i class="fa fa-exclamation-circle"></i> <b>1.</b> Комментарии с грубой и ненормативной лексикой.<br>  
<i class="fa fa-exclamation-circle"></i> <b>2.</b> Оскорбления, угрозы и непристойные высказывания.<br>  
<i class="fa fa-exclamation-circle"></i> <b>3.</b> Высказывания, разжигающие национальную, религиозную и прочую рознь и вражду.<br>  
<i class="fa fa-exclamation-circle"></i> <b>4.</b> Комментарии, содержащие другие нарушения законодательства и прав граждан.<br>  
<i class="fa fa-exclamation-circle"></i> <b>5.</b> Комментарии, рекламирующие и продвигающие другие веб-ресурсы, товары и услуги, а также комментарии, не имеющие отношения к дискуссии.  
<br>  
<strong class="mt-10">Пользователи, которые нарушают эти правила грубо или систематически, будут <span style="color:red">заблокированы</span>.</strong>  
  </div>  
</div>  
</div>  
</div>

Css:

Код
.art-alert_danger{background:#FD9883;border-left:5px solid #E9573F;padding:12px;color:#fff;}  
.art-alert_danger .alert-icon{background:#E9573F;}  
.mb-25 {margin-bottom: 25px !important;}  
.mt-25 {margin-top: 25px !important;}  
.mt-10 {margin-top: 10px !important;}  
.alert-icon{width:40px;height:40px;display:inline-block;float:left;margin:4px 1px;}  
.alert-icon i{width:40px;height:40px;display:block;text-align:center;line-height:40px;font-size:28px;color:#FFF;}  
.alert-descr{margin-left:54px;  
font-family: 'Roboto', sans-serif;}  
.alert-descr strong{margin-bottom:8px;display:inline-block;font-size:14px;font-weight:bold;  
font-family: 'Roboto', sans-serif;}  
.alert-content{font-size:14px;line-height:18px;  
font-family: 'Roboto', sans-serif;}


(rip Бармен) - он же JoniDen.
09.10.2016 Загрузок: 8 Просмотров: 345 Комментарий: (40)

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

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

Комментарий: 40
BlackHARD
BlackHARD 09.10.2016 19:531
+1
Для светлого диза отлично пойдет, а вот для темного - придется фон по темнее сделать, например багровый цвет(тёмно-красный).
Kosten
Kosten 09.10.2016 19:572
0
BlackHARD, на темный фон поставил, как видно на изображение, просто красный оттенок, он отлично на темном и светлом визуально смотрится.
BlackHARD
BlackHARD 09.10.2016 21:119
0
Сделай красный темнее, увидишь разницу)
Brung
Brung 09.10.2016 20:063
0
А не сего так смотрится, но правила всегда на сайте нужны, но мало кто только читает.
JoniDen
JoniDen 09.10.2016 20:164
0
Зато потом понимают почему их сообщение удаляют 11a
tsakonter
tsakonter 09.10.2016 20:185
0
Это точно, но некоторые специально приходят, зададут вопрос и ссылку оставят, мног здесь замечал, ему отвечают, а его уже нет.
Kosten
Kosten 09.10.2016 20:256
0
JoniDen, стили в какую папку закидывать, или в корень сайта на прямую?
JoniDen
JoniDen 09.10.2016 20:547
0
Да без разницы.
Kosten
Kosten 09.10.2016 20:578
+1
Такого не бывает, что без разницы, но если судить по коду, то в папку CSS нужно заливать
JoniDen
JoniDen 09.10.2016 21:1610
0
Я много раз кидал в разные папки, и все нормально работало, только ссылку вставлял уже новую. А не ту что была прописала Автором.
Brung
Brung 09.10.2016 21:3212
0
Но так можно, но это лишняя работа, не легче сразу в папку закинуть, которая в в коде прописана.
JoniDen
JoniDen 09.10.2016 21:4214
0
Легче конечно, я просто ответил что работает, без разницы где лежал файлы)))
habib
habib 09.10.2016 21:3211
0
Эт только у меня ???

JoniDen
JoniDen 09.10.2016 21:4213
0
Ты вот это подключил?
Код
<link rel="stylesheet" href="/css/font-awesome.css">  
<link rel="stylesheet" href="/css/animate.css">
habib
habib 09.10.2016 21:4515
0
Да
habib
habib 09.10.2016 21:4616
0
Вот сайт

JoniDen
JoniDen 09.10.2016 21:4917
0
Все замечательно у тебя работает, вот скриншот с твоего сайта.
habib
habib 09.10.2016 21:5118
0
Я через 2 браузера проверил всё равно нету эти иконки
JoniDen
JoniDen 09.10.2016 21:5319
0
Повторюсь еще раз, скриншот сделан с твоего сайта, не веришь попроси знакомого зайти на сайт.
habib
habib 09.10.2016 21:5320
0
Только что проверил так У него тоже самое
JoniDen
JoniDen 09.10.2016 22:0921
0
Тогда может кто-то, из пользователей данного сайта, зайдет и посмотрит.
Brung
Brung 09.10.2016 22:1524
0
Установите шрифтовые стили, что скинул ранее, и будет счастье.

Проверено:

JoniDen
JoniDen 09.10.2016 22:1926
0
Странно ты скинул ему min, когда я использовал полную версию, и у меня все нормально работает. Да и у него работает, только почему-то он не видит, а я вот вижу.
Brung
Brung 09.10.2016 22:1022
+1
Попробуй вверх сайта в самый вверх поставить этот стиль.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
habib
habib 09.10.2016 22:1523
0
Спасибо заработал ))))
Brung
Brung 09.10.2016 22:1725
0
Только этот стиль в в head стиль /head нужно сделать.
habib
habib 09.10.2016 22:1927
0
Я кинул на верх часть Работает без проблем
Brung
Brung 09.10.2016 22:2728
0
Но теперь шрифтовые иконки на сайт можете ставить, читаем здесь, все подробно.

Вы стили на иконки поставили, теперь можете на сайте ставить.
Kosten
Kosten 09.10.2016 22:3029
0
Все правильно, в head стиль /head нужно поставить, возможно с другими стилями конфликт будет.
habib
habib 09.10.2016 22:3430
0
Я проверил везде нет ни чего спс за совет )))
avatar
Start 10.10.2016 08:5831
0
А зачем вот это? смотрел эффекта нет.

Код
<link rel="stylesheet" href="/css/animate.css">
JoniDen
JoniDen 10.10.2016 10:0832
0
Это чтобы проблем не было, когда в следующий раз будет устанавливать, что-то похожие.
tsakonter
tsakonter 10.10.2016 16:3433
0
За что этот стиль отвечает?
JoniDen
JoniDen 10.10.2016 17:0334
0
За анимацию.
FeStemBer
FeStemBer 10.10.2016 17:1035
+1
А разве она есть в этом скрипте?
JoniDen
JoniDen 10.10.2016 17:3036
0
Нету. От одной лишней строчки, сайт не будет тупить. Так что не парьтесь 11a
avatar
Start 10.10.2016 18:1737
0
Что там одна всего строка лишняя :D
Kosten
Kosten 10.10.2016 18:4838
0
Смотрится как нужно, проверил на тестовом сайте, все что нужно есть.
avatar
Start 10.10.2016 19:1739
0
не подскажешь почему когда ставлю: box-sizing: border-box; съезжает многое... смотрел значение какие есть, но они особо не помогают... как то можно на ксс прописать по другому?
сам код: *, *:after, *:before {box-sizing: border-box;}
Kosten
Kosten 10.10.2016 19:2040
+1
Возможно конфликт стилей, это не нужно исключать, то можно эти стили вывести отдельно, как сделать, ЗДЕСЬ написано
avatar