Как добавить к посту нижний колонтитул
замахнемся на еще более масштабную задачу - сделаем на свой вкус отбивку между постами.
Смотреть пример
Выберем картинку, которая будет фоном:
или такую:
Фону можно задать повторение по горизонтали
<div style="background:url(http://ic.pics.livejournal.com/fotovivo/19078119/176049/176049_original.gif) repeat-x">
Получится заготовка под бордюр-разделитель.
Как встроить элемент в оформление - помним?
Нужно добавить код к пользовательским стилям
Стилевые свойства записываются в фигурных скобках:
{
background:url(http://ic.pics.livejournal.com/fotovivo/19078119/176049/176049_original.gif) repeat-x;
}
Остается выяснить к чему этот код применить.
В предыдущем посте определяли "позывные" заголовка,
теперь задача - найти кодовое имя нижнего блока.
Что нам стоит. Проходили, знаем.
Вызываем консоль "inspect element":
- все опознавательные знаки как на ладони.
(Отличаются в разных журналах, в зависимости от базового дизайна)
Другой вариант разметки:
Для Expressive
код получается вот такой:
.asset-meta.asset-entry-links{
background:url(http://ic.pics.livejournal.com/fotovivo/19078119/176049/176049_original.gif) repeat-x;
height:100px;
background-position: 0 50%;
}
Высота картинки в пикселях и смещение вниз на 50%, чтобы отодвинуть бордюр от линков
(Для Camelion "позывной" - .j-e-nav-list )
И вот он, готов разделитель:
Кружавчатый ради праздника, на каждый день подберем чего попроще :)
(поиском по "колонтитул клип-арт" )
````````````````````````````````````````
Хотим поставить завитушку непосредственно под текстом
(чтоб сама добавлялась после записи) ?
Действуем аналогично:
Извлекаем имя класса и пишем код:
.asset-body{
background:url(http://ic.pics.livejournal.com/fotovivo/19078119/175742/175742_original.gif) no-repeat;
background-position: 50% 100%;
}
Получаем задуманное -
````````````````````````````````````````
Так же и блок меток можно принарядить - шарики-фонарики, гирлянду подвесить,
(то есть всё сразу не надо, конечно :), это в иллюстративных целях все примеры на одной странице )
Имеем в результате:
.asset-tags{
background:url(http://ic.pics.livejournal.com/fotovivo/19078119/175593/175593_original.gif), url(http://ic.pics.livejournal.com/fotovivo/19078119/176543/176543_original.gif);
background-repeat: no-repeat, repeat-x;
background-position: 0 7px, 18px 14px;
height:85px;
}
- Две картинки в бэкграунде?
- Можно и больше, через запятую;
одна на другую накладываются, если не задать позиционный сдвиг (тоже через запятую, в порядке упоминания)
Спрашивали - можно ли ссылочку с приукрасом встроить в шаблон, так чтоб в конце каждого поста добавлялась?
- Можно. Но не на раз, тема для более продвинутого этапа.
Со Старо-ново-годом! Счастья на весь год!
;){kind=link}
← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →