Украшалочка 2

[fotovivo]

Как прикрутить картинку к заголовку поста,
в таком роде:


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



Клик мышкой -> меню -> "посмотреть код элемента" (в Лисе, Хроме, и даже в новом IE есть "Inspekt element")



Щелчок на значке со стрелочкой, по наведению подсвечиваются элементы страницы



и всплывает имя элемента. Его-то нам и нужно.

Переписываем вручную или скопируем из консоли (copy HTML)-



Вытаскиваем из кодов имя класса,



и h1 может быть и h2 и h3, и классы (то, что в кавычках) какие угодно

пробелы заменяем точками

К полученной конструкции приписываем стили (в фигурных скобках):

h2.asset-name.page-header2 a{
padding: 12px 58px;
background: url(httр://ic.pics.livejournal.com/MY/01_original.gif) no-repeat 2px;
}

(padding - отступы подбираем по размеру картинки)
копируем всё в custom CSS на уже знакомой нам странице http://www.livejournal.com/customize/options.bml?group=customcss

Жмем "сохранить" и наслаждаемся эффектом :)

Буквица (первая буква со шрифтовым выделением, как здесь у меня в журнале) делается похожим образом.

апд.
Код для Хамелиона и производных:
h3.j-e-title
Для "авторских" дизайнов на основе конструктора Йоксель:
h2.asset-name.page-header2

~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.~о~.

В принципе любую ссылку можно принарядить подобным образом.

Напр. прямо в записи:

к обычному ссылочному stуle="padding: 25px 85px; font-size: 1.4em; color: maroon; background: #fff url(httр://ic.pics.livejournal.com/КАРТИНКА_original.gif) no-repeat 2px;" href="httр://MY.livejournal.com/"> Ccылочка с разукрасом

Клуб начинающих бабушек РЕ-ПОСТНАЯ КНОПКА

[апд-примерчик]

Ccылочка с разукрасом

Ccылочка с разукрасом