Форма входа

    Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Информеры
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Облако тегов для uCoz в зеленом стиле

    Дата добавления: 27.09.2013 - 20:07
    Добавил: Buger
    Количество просмотров: 2.5k
    Количество комментариев: 0
    Рейтинг материала: 1.0 / 1
    Облако тегов для uCoz в зеленом стиле
    БЕСПЛАТНО
    рейтинг 1.0
    /
    голосов 1
    Всем массовый привет, в данном готовом решении для uCoz мы будем стилизовать стандартное облако тегов uCoz, а будем мы это делать благодаря css решению от Terence Devine, который создал обычные кнопки повторяющие внешний вид проездного Билета, безусловно мне пришлось немного додумать и адаптировать данное решение специально для uCoz.

    Шаг 1 - Создадим информер:
    И так для начала нам следует создать информер тегов, для этого заходим

    в Админ панель => Инструменты => Информеры => Создать информер => Теги

    Название информера: Теги сайта
    Раздел: Теги
    Способ вывода: блако тегов
    Модули: выбираем нужные
    Количество тегов: 40

    и нажимаем создать, теперь когда мы создали информер тегов uCoz, устанавливаем его в нужное место на сайте в предварительно созданную ячейку div, которой мы пропишем в css стилях белый фон, это один из важных моментов данного решения.
    Код
    <div class="cell-tag">$MYINF_1$</div>

    Шаг 2 - Установим CSS:
    А теперь давайте пропишем основные css стили данному решению:
    Код
    /* Облако тегов для uCoz в зеленом стиле 
------------------------------------------*/ 
.cell-tag{ 
 width:650px; 
 padding: 25px; 
 background: #fff; 
} 

.eTag:link, 
.eTag:visited , 
.eTag:hover { 
 float:left; 
 padding: 5px 15px; 
 position: relative; 
 background: #BADA55; 
 display: inline-block; 
 margin: 0px 10px 10px 0px; 
 border-right: dotted 2px #fff; 
 box-shadow: 4px 0 0 rgba(0, 0, 0, 0.25) inset, -4px 0 0 rgba(0, 0, 0, 0.25) inset; 
 
 font:11px Verdana,Arial,Helvetica, sans-serif!important; 
 text-shadow: 1px 1px 1px #8BA340; 
 font-weight: bold!important; 
 color:#fff; 
} 

.eTag:hover { 
 background: #5d95df; 
 text-shadow: 1px 1px 1px #295691; 
 color:#fff; 
} 

.eTag:before, 
.eTag:after { 
 content: ''; 
 display: block; 
 position: absolute; 
 left: -0.5em; 
 width: 1em; 
 height: 1em; 
 background: #fff; 
 border-radius: 0.5em; 
} 

.eTag:before {top: -0.5em;} 
.eTag:after {bottom: -0.5em;}

    Хочу обратить внимание на тот момент, что в данном решении для достижения нужного результата, в css стилях для верхнего и нижнего левого угла, мы прописываем значение border-radius:, в результате чего на данную ячейку благодаря абсолютному позиционированию элементов накладывается белый круг, который создаёт данному решению нужный внешний вид, в результате чего основной фон в котором находятся теги необходим.

    На этом всё, спасибо за внимание!

    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: