Главная » Для UCOZ » 2016 » Сентябрь » 23 » Оформляем теги в информере облака


Сегодня еще один вариант для оформления тегов в информере облака тегов для uCoz. Всё оформление на чистом CSS, без использования изображений. Установка очень простая и понятная.



1. Создайте информер "Облако тегов" в Панели управления сайтом и поместите его в нужный вам шаблон нужного модуля.
2. Оберните код информера в тег списка, как показано ниже:

Код

<ul class="tags">$MYINF_1$</ul>


3. В шаблон "Таблица стилей (CSS) добавьте стили для оформления тегов:

Код

.tags{
  margin:0;
  padding:0;
  bottom:-12px;
  list-style:none;
  }  
.tags a{
  float:left;
  height:24px;
  line-height:24px;
  font-size:11px;
  position:relative;
  }  
.tags a{
  margin-left:15px;
  padding:0 10px 0 12px;
  background:#0089e0;
  color:#fff;
  text-decoration:none;
  -moz-border-radius-bottomright:4px;
  -webkit-border-bottom-right-radius:4px;  
  border-bottom-right-radius:4px;
  -moz-border-radius-topright:4px;
  -webkit-border-top-right-radius:4px;  
  border-top-right-radius:4px;  
  }  
.tags a:before{
  content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  width:0;
  height:0;
  border-color:transparent #0089e0 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;  
  }  
.tags a:after{
  content:"";
  position:absolute;
  top:10px;
  left:0;
  float:left;
  width:4px;
  height:4px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  background:#fff;
  -moz-box-shadow:-1px -1px 2px #004977;
  -webkit-box-shadow:-1px -1px 2px #004977;
  box-shadow:-1px -1px 2px #004977;
  }  

.tags a:hover{background:#555;}  
.tags a:hover:before{border-color:transparent #555 transparent transparent;}  
a.eTag {color:#fff!important;font-size:12px!important;margin-bottom:2px;}
Обсуждение материала:
Комментариев: 0
avatar

    Облако тегов с переключателем вида и фильтром по алфавиту

    23.09.2016

    Итак, представляю вам новый вариант облака тегов для сайтов uCoz. В чём его особенность? - возможность переключения между стандартным видом облака тегов и списком в один клик - возможность фильтрации тегов по алфавиту в обе стороны - сочетание двух первых опций.

    Комментарии: 6   Просмотры: 360

    Оформление ссылок в информере "Облако тегов"

    26.08.2016

    Ну вот и до ссылок добрались) казалось бы, а чего тут можно придумать, ссылки они ссылки и есть. Однако же нет, можно. И в этом материале вы увидите, как можно видоизменить обычные ссылки в информере "Облако тегов". Этот информер я взял всего лишь в качестве примера, потому как то решение, которое мы с вами рассмотрим, применимо к любой ссылке (например, для ссылок меню и т.д.) Мы сделаем их более выразительными, добавим иконки для каждой ссылки и плавное затухание при наведении/убирании курсора мыши.

    Комментарии: 0   Просмотры: 263

Новые пользователи

Хостинг от uCoz