Форум [HoC] | Развлекательный форум

Правила форума Подписки Ленточный

Статистика Форума

Последние обновленные темы

Самые популярные темы

Самые активные

Новые участники

Ловец снов (ОБТ) (0)

Контракт: Выходец с того ... (0)

Prosectors Project 1.7 (0)

Тайна Кордона (0)

История Джона 2 (ОБТ) (0)

У костра (193)

Анекдоты (145)

Города (94)

Обновления сайта (77)

Свалка (68)

StraNNik (1416)

RamzeS (513)

Каратель (170)

Narkostalker (121)

Кракен (93)

Fugaz56 (09.08.2023)

Пряня (22.06.2023)

yaroslavcohevis80 (16.11.2022)

61373872 (12.08.2022)

vhaack72 (15.06.2022)

Страница 1 из 1
1

Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Таблицы с информацией [CSS]

Таблицы с информацией [CSS]

StraNNik

Слышу гимн зашитых ртов

Группа: Администратор

Ранг: Опытный

Сообщений: 1416

Карма: 33

Сообщение # 1

Дата: 07.03.2017 в 14:08

Довольно интересно улучшение для сайта, а именно таблички с информацией, которые будут информировать пользователя о том, что при копирование материала нужно указать обратную ссылку на сайт, или ещё какую-то интересующую информацию, которая заинтересует пользователя. Данные таблицы можно сделать: оранжевыми, синими, зелёными, красными, белыми.

Приступаем к установке:

Нужно стили на них поставить в CSS:

Код

.update-nag{ display: inline-block; font-size: 14px; text-align: left; background-color: #fff; height: 100%; width:100%; margin-bottom: 10px; border-radius: 3px;
} .update-nag > .update-text{ line-height: 19px;
padding: 6px;
} .redtable { background-color: rgba(192, 57, 43,0.4); color:#c0392b;
} .bluetable{ background-color: rgba(52, 152, 219,0.4); color:#3498db; } .greentable{ background-color: rgba(39, 174, 96,0.4); color:#27ae60; } .orangetable{ background-color: rgba(243, 156, 18,0.4); color:#f39c12; } .whitetable{ background-color: rgba(255,255,255,0.4); color:#000; }

Ставим там где вы считаете нужным их появление.

Оранжевая

Код

<div class="update-nag orangetable"> <div class="update-text"><i class="fa fa-lock" aria-hidden="true"></i> Для <b>скачивания</b> материала нужно зарегистрироваться.</div> </div>

Синяя

Код

<div class="update-nag bluetable"> <div class="update-text"><i class="fa fa-table" aria-hidden="true"></i> Информационные таблички от <b>zornet.ru</b> .</div> </div>

Зеленая

Код

<div class="update-nag greentable "> <div class="update-text"><i class="fa fa-font-awesome" aria-hidden="true"></i> С использованием шрифта <b>FontAwesome</b>. </div> </div>

Красная

Код

<div class="update-nag redtable"> <div class="update-text"> <b><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Важно!</b> При копировании материала нужно указывать источник.</div> </div>

Белая

Код

<div class="update-nag whitetable"> <div class="update-text"> <i class="fa fa-window-restore" aria-hidden="true"></i> Простая белая табличка</div> </div>

PS - перед каждым описанием будет стоять оригинальная кнопка, которую вы сможете сменить, как все сделать, вас ссылка дана в самой статье.

Источник: uon.ucoz.com

Главный администратор портала. Ссылки на большинство проблем:

Ошибка сайта? Пиши сюда! | Битая ссылка? Информируй! | Обидели? Докладывай!

Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Таблицы с информацией [CSS]

Страница 1 из 1
1