Вид тегов uCoz
Вид тегов для uCoz это в принципе мелочь, но какая? В основном все оставляют стандартный вид тегов и сейчас я не говорю только про систему и ее теги uCoz. Под словом стандартный, я рисую себе такой вид, где есть просто ссылка и есть просто дай бог цифра, а чаще всего цифра компенсируется размером текста тега, давайте посмотрим демо:
Стандартный вид выглядит примерно так, согласитесь неважно, поэтому я и решил сделать несколько решений по улучшению визуального восприятия тегов для uCoz.

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

Теперь давайте разберемся со стандартной структурой тегов созданных при помощи информера, для этого вначале установим этот информер. Перейдите в ПУ / Инструменты / Информеры, кликаем создать новый информер, раздел выбираем теги, способ вывода - список тегов, а остальное по желанию. Полученный код вызова информера $MYINF_#$ вставляем в то место где хотим видеть список тегов, прежде заменяем в этом коде # на свой номер информера.
У нас получился не стилизованный список тегов uCoz, имеющий вот такую структуру для каждого тега
Слудующим шагом у нас уже будет установка, а для первого варианта тегов uCoz она крайне простая, просто скопируйте css код нужного цвета к себе в ПУ / Дизайн / Управление дизайном (CSS), либо в отдельный css файл.
float:left;
margin:0 10px 7px 0;
padding:2px 10px 2px 0;
background:url(http://mvcreative.ru/example/16/1/images/tag_bg.png) no-repeat right -25px;
color:#fff;
font-size:11px;
font-family:helvetica, arial, sans-serif;
}
.eTag {
background:url(http://mvcreative.ru/example/16/1/images/tag_bg.png) no-repeat left top;
padding:6px 5px 4px 7px;
position:relative;
margin:0 3px 0 -2px;
border-right:1px solid #d2d2d2;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
color:#3f3f3f;
text-shadow:0 1px #fff;
text-decoration:none;
font-size:11px;
}
float:left;
margin:0 10px 7px 0;
padding:2px 10px 2px 0;
background:url(http://mvcreative.ru/example/16/1/images/tag_bg2.png) no-repeat right -25px;
color:#fff;
font-size:11px;
font-family:helvetica, arial, sans-serif;
}
.eTag {
background:url(http://mvcreative.ru/example/16/1/images/tag_bg2.png) no-repeat left top;
padding:6px 5px 4px 7px;
position:relative;
margin:0 3px 0 -2px;
border-right:1px solid #d2d2d2;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
color:#3f3f3f;
text-shadow:0 1px #fff;
text-decoration:none;
font-size:11px;
}
float:left;
margin:0 10px 7px 0;
padding:2px 10px 2px 0;
background:url(http://mvcreative.ru/example/16/1/images/tag_bg3.png) no-repeat right -25px;
color:#fff;
font-size:11px;
font-family:helvetica, arial, sans-serif;
}
.eTag {
background:url(http://mvcreative.ru/example/16/1/images/tag_bg3.png) no-repeat left top;
padding:6px 5px 4px 7px;
position:relative;
margin:0 3px 0 -2px;
border-right:1px solid #d2d2d2;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
color:#3f3f3f;
text-shadow:0 1px #fff;
text-decoration:none;
font-size:11px;
}
float:left;
margin:0 10px 7px 0;
padding:2px 10px 2px 0;
background:url(http://mvcreative.ru/example/16/1/images/tag_bg4.png) no-repeat right -25px;
color:#fff;
font-size:11px;
font-family:helvetica, arial, sans-serif;
}
.eTag {
background:url(http://mvcreative.ru/example/16/1/images/tag_bg4.png) no-repeat left top;
padding:6px 5px 4px 7px;
position:relative;
margin:0 3px 0 -2px;
border-right:1px solid #d2d2d2;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
color:#3f3f3f;
text-shadow:0 1px #fff;
text-decoration:none;
font-size:11px;
}
float:left;
margin:0 10px 7px 0;
padding:2px 10px 2px 0;
background:url(http://mvcreative.ru/example/16/1/images/tag_bg5.png) no-repeat right -25px;
color:#fff;
font-size:11px;
font-family:helvetica, arial, sans-serif;
}
.eTag {
background:url(http://mvcreative.ru/example/16/1/images/tag_bg5.png) no-repeat left top;
padding:6px 5px 4px 7px;
position:relative;
margin:0 3px 0 -2px;
border-right:1px solid #d2d2d2;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
color:#3f3f3f;
text-shadow:0 1px #fff;
text-decoration:none;
font-size:11px;
}
float:left;
margin:0 10px 7px 0;
padding:2px 10px 2px 0;
background:url(http://mvcreative.ru/example/16/1/images/tag_bg6.png) no-repeat right -25px;
color:#fff;
font-size:11px;
font-family:helvetica, arial, sans-serif;
}
.eTag {
background:url(http://mvcreative.ru/example/16/1/images/tag_bg6.png) no-repeat left top;
padding:6px 5px 4px 7px;
position:relative;
margin:0 3px 0 -2px;
border-right:1px solid #d2d2d2;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
color:#3f3f3f;
text-shadow:0 1px #fff;
text-decoration:none;
font-size:11px;
}
float:left;
margin:0 10px 7px 0;
padding:2px 10px 2px 0;
background:url(http://mvcreative.ru/example/16/1/images/tag_bg7.png) no-repeat right -25px;
color:#fff;
font-size:11px;
font-family:helvetica, arial, sans-serif;
}
.eTag {
background:url(http://mvcreative.ru/example/16/1/images/tag_bg7.png) no-repeat left top;
padding:6px 5px 4px 7px;
position:relative;
margin:0 3px 0 -2px;
border-right:1px solid #d2d2d2;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
color:#3f3f3f;
text-shadow:0 1px #fff;
text-decoration:none;
font-size:11px;
}
А для второго варианта нам потребуется еще установить js, скопируйте данный код в самый низ страницы, перед тегом </body>
И в то место куда мы устанавливали код вызова информера $MYINF_#$, рядом поставим данный код.
То есть в итоге получится вот так:
Ну а дальше все тоже самое, установка css кода, точно также как и в 1 варианте:
position:relative;
z-index:1;
}
#newTags div {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg.png) no-repeat;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
margin:5px;
padding:0 5px 0 8px;
position:relative;
text-decoration:none;
overflow:hidden;
font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
top:1px;
}
#newTags div a, #newTags div span {
display:block;
float:left;
}
#newTags div a {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg.png) no-repeat 100% -25px;
height:19px;
padding:6px 10px 0 0;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
font-weight:bold;
font-size:12px;
color:#3f3f3f;
text-decoration:none;
}
#newTags div span {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg.png) no-repeat 100% -50px;
color:#fff;
height:19px;
padding:5px 10px 0;
position:absolute;
right:0;
top:1px;
text-shadow:0 -1px 0 #5c5c5c;
z-index:-1;
font-size:12px;
line-height:14px;
}
position:relative;
z-index:1;
}
#newTags div {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg2.png) no-repeat;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
margin:5px;
padding:0 5px 0 8px;
position:relative;
text-decoration:none;
overflow:hidden;
font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
top:1px;
}
#newTags div a, #newTags div span {
display:block;
float:left;
}
#newTags div a {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg2.png) no-repeat 100% -25px;
height:19px;
padding:6px 10px 0 0;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
font-weight:bold;
font-size:12px;
color:#3f3f3f;
text-decoration:none;
}
#newTags div span {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg2.png) no-repeat 100% -50px;
color:#fff;
height:19px;
padding:5px 10px 0;
position:absolute;
right:0;
top:1px;
text-shadow:0 -1px 0 #5c5c5c;
z-index:-1;
font-size:12px;
line-height:14px;
}
position:relative;
z-index:1;
}
#newTags div {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg3.png) no-repeat;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
margin:5px;
padding:0 5px 0 8px;
position:relative;
text-decoration:none;
overflow:hidden;
font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
top:1px;
}
#newTags div a, #newTags div span {
display:block;
float:left;
}
#newTags div a {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg3.png) no-repeat 100% -25px;
height:19px;
padding:6px 10px 0 0;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
font-weight:bold;
font-size:12px;
color:#3f3f3f;
text-decoration:none;
}
#newTags div span {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg3.png) no-repeat 100% -50px;
color:#fff;
height:19px;
padding:5px 10px 0;
position:absolute;
right:0;
top:1px;
text-shadow:0 -1px 0 #5c5c5c;
z-index:-1;
font-size:12px;
line-height:14px;
}
position:relative;
z-index:1;
}
#newTags div {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg4.png) no-repeat;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
margin:5px;
padding:0 5px 0 8px;
position:relative;
text-decoration:none;
overflow:hidden;
font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
top:1px;
}
#newTags div a, #newTags div span {
display:block;
float:left;
}
#newTags div a {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg4.png) no-repeat 100% -25px;
height:19px;
padding:6px 10px 0 0;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
font-weight:bold;
font-size:12px;
color:#3f3f3f;
text-decoration:none;
}
#newTags div span {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg4.png) no-repeat 100% -50px;
color:#fff;
height:19px;
padding:5px 10px 0;
position:absolute;
right:0;
top:1px;
text-shadow:0 -1px 0 #5c5c5c;
z-index:-1;
font-size:12px;
line-height:14px;
}
position:relative;
z-index:1;
}
#newTags div {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg5.png) no-repeat;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
margin:5px;
padding:0 5px 0 8px;
position:relative;
text-decoration:none;
overflow:hidden;
font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
top:1px;
}
#newTags div a, #newTags div span {
display:block;
float:left;
}
#newTags div a {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg5.png) no-repeat 100% -25px;
height:19px;
padding:6px 10px 0 0;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
font-weight:bold;
font-size:12px;
color:#3f3f3f;
text-decoration:none;
}
#newTags div span {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg5.png) no-repeat 100% -50px;
color:#fff;
height:19px;
padding:5px 10px 0;
position:absolute;
right:0;
top:1px;
text-shadow:0 -1px 0 #5c5c5c;
z-index:-1;
font-size:12px;
line-height:14px;
}
position:relative;
z-index:1;
}
#newTags div {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg6.png) no-repeat;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
margin:5px;
padding:0 5px 0 8px;
position:relative;
text-decoration:none;
overflow:hidden;
font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
top:1px;
}
#newTags div a, #newTags div span {
display:block;
float:left;
}
#newTags div a {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg6.png) no-repeat 100% -25px;
height:19px;
padding:6px 10px 0 0;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
font-weight:bold;
font-size:12px;
color:#3f3f3f;
text-decoration:none;
}
#newTags div span {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg6.png) no-repeat 100% -50px;
color:#fff;
height:19px;
padding:5px 10px 0;
position:absolute;
right:0;
top:1px;
text-shadow:0 -1px 0 #5c5c5c;
z-index:-1;
font-size:12px;
line-height:14px;
}
position:relative;
z-index:1;
}
#newTags div {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg7.png) no-repeat;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
margin:5px;
padding:0 5px 0 8px;
position:relative;
text-decoration:none;
overflow:hidden;
font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
top:1px;
}
#newTags div a, #newTags div span {
display:block;
float:left;
}
#newTags div a {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg7.png) no-repeat 100% -25px;
height:19px;
padding:6px 10px 0 0;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
font-weight:bold;
font-size:12px;
color:#3f3f3f;
text-decoration:none;
}
#newTags div span {
background:url(http://mvcreative.ru/example/16/2/images/tag_bg7.png) no-repeat 100% -50px;
color:#fff;
height:19px;
padding:5px 10px 0;
position:absolute;
right:0;
top:1px;
text-shadow:0 -1px 0 #5c5c5c;
z-index:-1;
font-size:12px;
line-height:14px;
}
Ну вот в принципе и все, отдельное спасибо за возможность сделать анимированный вариант, моему земляку TRANE73, помог с кодом для изменения стандартной структуры тегов uCoz.



Kstati u vasheva saita esti malenkaia prablema. Kod bezapasnasti ploha viden i trudna atpraviti cammentarii.