Как изменить гаджет Ярлыки в стиле CSS
Здравствуйте дорогие блоггеры. Сегодня у нас информация о гаджете Ярлыки, который является навигационной частью в блоге. Если у Вас уже много сообщений в блоге, есть возможность вставить гаджет Ярлыки в виде стрелочек, с использованием CSS стилей и настроить соответственно дизайну блога.
Для начала нам надо перейти в дизайн - добавить гаджет - Ярлыки. В настройках отметьте Все Ярлыки-в виде облака, а не списка, сохраните. Установите в нужном для Вас месте макета блога.
Далее скопируйте ниже стиль CSS для гаджета. Теперь переходим в шаблон - изменить шаблон. Предварительно делайте резервную копию шаблона.
После открывающего тэга <head> ищем строку <b:skin> ... </ b:skin>, нажимаем На стрелку слева, спускаемся Вниз, находим ]]> <b:skin> И Выше вставляем скопированный rод. Здесь же прямо в шаблоне можно изменить настройки. Нажимаем-просмотр шаблона, если Все нормально Сохраняем.
Далее скопируйте ниже стиль CSS для гаджета. Теперь переходим в шаблон - изменить шаблон. Предварительно делайте резервную копию шаблона.
После открывающего тэга <head> ищем строку <b:skin> ... </ b:skin>, нажимаем На стрелку слева, спускаемся Вниз, находим ]]> <b:skin> И Выше вставляем скопированный rод. Здесь же прямо в шаблоне можно изменить настройки. Нажимаем-просмотр шаблона, если Все нормально Сохраняем.
. Label size {
Margin : 0 ;
padding : 0 ;
position: relative;
}
. Label size {
float: left ;
height : 24px;
line-height : 24px;
position: relative;
Font size : 12px;
margin-bottom : 9px;
margin-left : 20px;
padding : 0 10px 0 12px;
background : # 054f04;
color : # FFF;
text-decoration : none;
Border-radius -moz -BottomRight: 4px;
-WebKit- border-bottom- right- radius : 4px;
border-bottom- right- radius : 4px;
Border-radius -moz -TopRight: 4px;
-WebKit- border-top- right- radius : 4px;
border-top- right- radius : 4px;
}
. Label size : to {
Content : "";
float: left ;
position: absolute ;
top: 0 ;
left :-12px;
width: 0 ;
height : 0 ;
border color: transparent transparent transparent # 0a9e08 ;
border -style: solid ;
border-width : 12px 12px 12px 0 ;
}
. Label size : after {
Content : "";
position: absolute ;
top : 10px;
From left to right : 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 # 000000 ;
-WebKit- box - shadow :-1px-1px 2px # 000000 ;
box - shadow :-1px-1px 2px # 000000 ;
}
. Label size : hover {
background : # 642A29; font-family : Tahoma, Arial, Helvetica, sans-serif ;
text-decoration : none;
color : # FFFFFF;
}
. Label size : hover : before {
border color: transparent transparent transparent # 642A29 ; font-family : Tahoma, Arial, Helvetica, sans-serif ;
text-decoration : none;
color : # FFFFFF;}
Margin : 0 ;
padding : 0 ;
position: relative;
}
. Label size {
float: left ;
height : 24px;
line-height : 24px;
position: relative;
Font size : 12px;
margin-bottom : 9px;
margin-left : 20px;
padding : 0 10px 0 12px;
background : # 054f04;
color : # FFF;
text-decoration : none;
Border-radius -moz -BottomRight: 4px;
-WebKit- border-bottom- right- radius : 4px;
border-bottom- right- radius : 4px;
Border-radius -moz -TopRight: 4px;
-WebKit- border-top- right- radius : 4px;
border-top- right- radius : 4px;
}
. Label size : to {
Content : "";
float: left ;
position: absolute ;
top: 0 ;
left :-12px;
width: 0 ;
height : 0 ;
border color: transparent transparent transparent # 0a9e08 ;
border -style: solid ;
border-width : 12px 12px 12px 0 ;
}
. Label size : after {
Content : "";
position: absolute ;
top : 10px;
From left to right : 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 # 000000 ;
-WebKit- box - shadow :-1px-1px 2px # 000000 ;
box - shadow :-1px-1px 2px # 000000 ;
}
. Label size : hover {
background : # 642A29; font-family : Tahoma, Arial, Helvetica, sans-serif ;
text-decoration : none;
color : # FFFFFF;
}
. Label size : hover : before {
border color: transparent transparent transparent # 642A29 ; font-family : Tahoma, Arial, Helvetica, sans-serif ;
text-decoration : none;
color : # FFFFFF;}
Настройки: height : 24px; -высота изображения; Font size : 12px; -размер шрифта; background : # 054f04;-цвет фона изображения; color : # FFF;-цвет текста (название ярлыков); # 0a9e08 -цвет стрелочки; background:#FFF;-цвет точки на стрелке;
Это основные настройки гаджета Ярлыки с использованием CSS стилей. У меня на сегодня все. Оставляйте отзывы, задавайте вопросы. Всего доброго.
