» » Красивые ярлыки на Блоггер

Красивые ярлыки на Блоггер

Предлагаю посмотреть на симпатичное оформление гаджета Ярлыки. Делюсь с вами кодами. Коды в установке не сложные, нужно только добавить выбранный в шаблон, выше тега ]]></b:skin.

Оформление 1

Оформление 1
Код:
.Label a{
padding-left: 5px;
padding-right: 31.5px;
color: #fff!important;
height: 32px;
background: #63953D;
margin-right: 2px;
line-height: 28px;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
float: left;
margin-top: 2px;
font-size: 12px;
text-align: left; }
.Label a:hover{
color:#fff !important;
background:#8ED557; }
.Label a:after{
content: "";
position: absolute;
width: 0px;
height: 0px;
border-width: 16.5px;
border-style: solid;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;}
Красным отметила цвета, которые можно поменять.

Оформление 2

Оформление 2
Перед тем как установить код, нужно войти в гаджет Ярлыки и выставить в нем показ ярлыков — Облако.
Оформление облака
Код:
.label-size {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border: 8px inset #0572F8;
background:#0572F8;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}
Синим отметила цвета, которые можно заменить.

Оформление 3

Оформление 3
Код:
.label-size {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border:5px dashed #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border:5px dashed #FA0830;
background:#000000;
}
.label-count {
white-space:nowrap;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}
Выделенные в коде цвета можно поменять.

  1. Sergey25/7/19 22:10

    В Joomla шаблоны устанавливаются в систему как обычное расширение, при помощи “Менеджера расширений”, соответственно для изменения дизайна сайта, достаточно установить понравившийся шаблон.

    ОтветитьУдалить

Комментарии со спамом удаляются.