Rimon Lusi (fotovivo) wrote,
Rimon Lusi
fotovivo

Categories:

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

Начало

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

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

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



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




или такую:






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

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

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



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


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




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





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





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

fotovivo


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

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

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

fotovivo



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



fotovivo


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

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

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


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



Со Старо-ново-годом! Счастья на весь год!
Tags: HTMLство, блоговодство, веб-штучки
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 42 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →