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