Как зафиксировать шаблон и добавить полосы прокрутки к постам в Blogger (Blogspot)

Логотип Blogger прибит гвоздемВ очередной раз делюсь небольшим трюком по Blogger. Сейчас мы будем делать фиксированный блог. Вообще тема с неподвижным шаблоном раскрыта мало и такой дизайн для блогов используется не часто, тем более в Blogger, но делать его можно, а иногда и нужно.
 Также, при таком шаблоне, важно уметь правильно добавить и использовать полосы вертикальной и горизонтальной прокрутки у элементов. Об этом и поговорим.
  В принципе, все делается довольно просто и быстро. Как всегда нужно добавить CSS в блог, в данном случаи, лучше это делать прямо в коде шаблона.
  Находим там вот такую строчку:
/* Content
----------------------------------------------- */
 И ниже или прямо под ней, видим следующею запись:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
 Добавляем к ней еще одно свойство, которое и будет фиксировать наш шаблон: position: fixed;
 Теперь блог неподвижен, однако есть ряд действий, которые также желательно проделать, а именно добавить полосы прокрутки к постам сообщений, на всякий случай.
  Все там же, в шаблоне, находим селектор:
.post {
  margin: 0 0 $(post.margin.bottom) 0;
}
 У него уже будет кое-какая запись - внешние отступы - но мы добавим немного от себя:
.post {
 margin: 0 0 $(post.margin.bottom) 0; /*наружные отступы по краям*/
 height:200px; /*высота только блоков сообщений - указываете нужное*/
 overflow-y: scroll; /*вертикальная прокрутка */
 width: 500px; /*ширина поста*/
}
Для того чтобы добавить или скрыть полосы прокрутки используется CSS свойство overflow с различными значениями.
- overflow-y: scroll; - добавляет полосу вертикальной прокрутки;
- overflow-x: scroll; - добавление полосы горизонтальной прокрутки;
- overflow: auto; - автоматическое добавление полос прокрутки, если размеры вложенного элемента превышают размеры родителя.
Также можно использовать отдельно свойства overflow-y: auto; и overflow-x: auto;;
- overflow: hidden; - скрывает полосы прокрутки, кроме этого все что находится за пределами родительского элемента будет скрыто.
 Вот и все. Также, вы можете добавить прокрутку к необходимым гаджетам и другим блокам.
 Осталось пожелать удачи и хороших дизайнерских решений.

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

  1. Проверил "на подопытном" блоге, прикольно! Бум думать, куда это можно применить. Пост пошел в закладки.

    ОтветитьУдалить
    Ответы
    1. Спасибо. У меня, в принципе, идейка есть, только надо фоны наделать для шаблона такого. Ну и тему придумать :)

      Удалить

Следующее Предыдущее

BestProject