Нарядим блог как елочку, продолжение: fotovivo

Начало

Как добавить к посту нижний колонтитул

~~Наученные горьким опытом~~ вдохновленные предыдущими успехами в виртуальном рукоделии,
замахнемся на еще более масштабную задачу - сделаем на свой вкус отбивку между постами.

Смотреть пример

Выберем картинку, которая будет фоном:

или такую:

Фону можно задать повторение по горизонтали
<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":

fotovivo

- все опознавательные знаки как на ладони.
(Отличаются в разных журналах, в зависимости от базового дизайна)

Другой вариант разметки:

Для 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 )

И вот он, готов разделитель:

fotovivo

Кружавчатый ради праздника, на каждый день подберем чего попроще :)
(поиском по "колонтитул клип-арт" )

````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````

Хотим поставить завитушку непосредственно под текстом
(чтоб сама добавлялась после записи) ?

Действуем аналогично:

Извлекаем имя класса и пишем код:

.asset-body{
background:url(http://ic.pics.livejournal.com/fotovivo/19078119/175742/175742_original.gif) no-repeat;
background-position: 50% 100%;
}

Получаем задуманное -

````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````

fotovivo

Так же и блок меток можно принарядить - шарики-фонарики, гирлянду подвесить,
(то есть всё сразу не надо, конечно :), это в иллюстративных целях все примеры на одной странице )

Имеем в результате:

.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;
}

- Две картинки в бэкграунде?
- Можно и больше, через запятую;
одна на другую накладываются, если не задать позиционный сдвиг (тоже через запятую, в порядке упоминания)

Спрашивали - можно ли ссылочку с приукрасом встроить в шаблон, так чтоб в конце каждого поста добавлялась?
- Можно. Но не на раз, тема для более продвинутого этапа.

Со Старо-ново-годом! Счастья на весь год!

Нарядим блог как елочку, продолжение

Error