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

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


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



Клик мышкой -> меню -> "посмотреть код элемента" (в Лисе, Хроме, и даже в новом 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;  color: maroon; background: #fff url(httр://ic.pics.livejournal.com/КАРТИНКА_original.gif) no-repeat 2px;" href="httр://MY.livejournal.com/"> Ccылочка с разукрасом



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






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

http://s003.radikal.ru/i201/1103/79/31d7fd28ba13.gif) no-repeat 2px;" href="httр://MY.livejournal.com/"> Ccылочка с разукрасом

Оставить комментарий

Популярные посты:

• Архив