[personal profile] rimon_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

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


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

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

к обычному ссылочному <a href
добавим отступы в соответствии с размером картинки, размер и цвет шрифта и фон с рисунком:

<a 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ылочка с разукрасом </a>



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






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

<a style="padding: 25px 100px; font-size: 3em; font-weight: bold; color: #323299; text-shadow: 2px 2px 1px red; background: url(http://s003.radikal.ru/i201/1103/79/31d7fd28ba13.gif) no-repeat 2px;" href="httр://MY.livejournal.com/"> Ccылочка с разукрасом </a>
This account has disabled anonymous posting.
If you don't have an account you can create one now.
HTML doesn't work in the subject.
More info about formatting

Profile

rimon_fotovivo

May 2018

S M T W T F S
  12345
6789101112
13141516 171819
20212223242526
2728293031  

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 11th, 2025 11:11 pm
Powered by Dreamwidth Studios