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

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





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

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

Для начала также заходим во вкладку шаблон - изменить 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.Можно сделать тень внутри блога.

внутренняя тень CSS


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


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

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

Ой, а что это там ниже? Ну надо же! Нажимаем!

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

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


2 комментария:

  1. Хотелось бы уточнить, можно ли придать стиль одному гаджету? И как это правильно осуществить.

    ОтветитьУдалить
    Ответы
    1. Alla Cuvichico можно. Чтобы изменить стиль определенного гаджета, для оформления нужно использовать его уникальный идентификатор или класс.Это можно узнать нажав на нужный гаджет-изменить в самом верху выделить строчку и провести мышкой до конца там и будет этот ID. Прописываем так же стили перед строкой ]]> Допустим вот так. #BlogArchive1 > h2 {
      /*свойства стиля для заголовка этого гаджета*/
      }

      Удалить

Пользовательский поиск