Как изменить стиль гаджетов в блоге.

Доброго времени суток, мои дорогие читатели и гости блога. Вот за что я люблю Блоггер, так это за его гибкий и пластичный шаблон. По сути дела, если вы хоть немного в нём разберётесь, что очень всем советую, можно создать просто уникальный по своему виду блог, сайт. Возможностей на самом деле много.

Совсем недавно попробовали поменять стиль названия гаджета и выровнять по центру заголовки. Вот эта статья. Рекомендую прочитать тем, кто её пропустил, так-как действовать будем по тому же "сценарию". Нам необходимо будет добавить или поменять некоторые элементы в шаблоне.

Итак, как в шаблоне Блоггер можно изменить стиль гаджетов. Сделать картинку фоном, округлить углы, выделить гаджет в рамку и многое другое.

Для начала также заходим во вкладку шаблон - изменить HTML и найти в кодах CSS вот такую строку

/* Widgets
----------------------------------------------- */
Именно она нам сегодня понадобиться. Сейчас спускаемся немного ниже и находим фрагмент, который отвечает за поле виджетов sidebar .widget{
Сразу за фигурной скобкой и будем добавлять стили CSS . Предложу просто несколько вариантов. Здесь, как говорится, хватило бы фантазии.  Что-то можно убрать, что-то добавить.

1. Сделаем фон, цвет, зададим ширину рамки и закруглим углы. Как-то вот так это будет выглядеть.

Вместо основного фона я использовала изображение. Размер рамки установила 3px и задала #336699 цвет. Часто у начинающих возникаю проблемы со сменой значения цвета. Поэтому ещё раз обращу внимание. Меняйте только именно знак решётки и шестизначное число. 10px;-закруглили углы виджета.

Код выглядит так.

.background:url(http://www.fonstola.ru/large/201310/134392.jpg); /адрес изображения/
 border:3px solid #336699 ; /ширина и цвет рамки/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

2. Немного изменим параметры и добавим значение boxShadow, чем зададим  наружнюю  тень.

.border-radius: 20px;/ закругление углов/
  background: #CCCCCC;/ цвет фона/
boxShadow
  width: 80%;
  max-width: 550px;
  margin: 2em auto;
  padding: 1em;
  box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);
}

3.Мне очень нравится эффект тени по бокам.

код

.boxShadow
  width: 80%;
  max-width: 550px;
  margin: 10px auto;
  padding: 1em;
  box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8);
   }

4. Можно сделать тень внутри блога.

.boxShadow
  width: 80%;
  max-width: 550px;
  margin: 1em auto;
  padding: 1em;
  box-shadow: 0 0 40px rgba(0, 0, 0, .1) inset;
}

Вообще, при добавлении различных стилей, можно сделать самые невероятные преобразования дизайна гаджетов.

Всегда рада ответить на ваши вопросы. На сегодня у меня всё. Скоро увидимся. Спасибо, что читаете мои шпаргалки.

оформите подписку на новые шпаргалки

Введите Ваш email ...: