Регистрация    Войти
Авторизация

Облако тегов uCoz в стиле проездных билетов

Облако тегов uCoz в стиле проездных билетов.Облако тегов uCoz в стиле проездных билетов.

Всем массовый привет, в данном готовом решении для uCoz мы будем стилизовать стандартное облако тегов uCoz, а будем мы это делать благодаря css решению от Terence Devine, который создал обычные кнопки повторяющие внешний вид проездного Билета, безусловно мне пришлось немного додумать и адаптировать данное решение специально для uCoz.

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

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

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

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

<div class="cell-tag">$MYINF_1$</div>



Шаг 2 - Установим CSS:
А теперь давайте пропишем основные css стили данному решению:

/* Теги в стиле билета 
------------------------------------------*/
.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:, в результате чего на данную ячейку благодаря абсолютному позиционированию элементов накладывается белый круг, который создаёт данному решению нужный внешний вид, в результате чего основной фон в котором находятся теги необходим.

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

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  27-09-2013, 11:14   Просмотров: 3079   
Облако тегов uCoz, Облако тегов, облако тегов для ucoz, uCoz в стиле проездных билетов, uCoz в стиле, скрипты ucoz, uCoz, uCoz скрипты
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.