Украшалочка
Спойлерные кнопки своими руками
.lj-spoiler-head {display: inline-block; padding: 5px 14px 2px 60px !important; background:url(http://www.kolobok.us/smiles/personal/santa2.gif) no-repeat 3px skyblue; color: #72adc4; border-radius: 16px; box-shadow: inset rgba(255,255,255,0.2) 6px 6px 18px 5px, inset rgba(0,0,0,0.5) -6px -6px 18px 5px; line-height: 26px; height: 32px !important; } .lj-spoiler-head a { font-size:16px; font-weight: bolder; font-family: Segoe script; text-decoration: none!important; color: #ffffff!important; } .lj-spoiler-head a:hover { font-size:18px; text-shadow: 2px 1px 3px #000000; border-radius: 16px; margin: 0px !important; background: #f86346; padding: 6px 16px !important; box-shadow: inset rgba(255,255,255,0.2) 6px 6px 18px 5px, inset rgba(0,0,0,0.5) -6px -6px 18px 5px; } /*---modifed spoiler fotovivo.LJ.ru ---*/
Текст на кнопках будет не такой как в образцах,
а тот, что вы введете, вызвав функцию "скрыть под спойлер"
.lj-spoiler-head {display: inline-block; padding: 8px 16px 5px 63px !important; min-height: 28px!important; background: #a1a7a9 url(http://yoursmileys.ru/tsmile/christmas/t07010.gif) no-repeat 2px 3px; border: 2px dotted #ffffff; border-radius: 5px; box-shadow: 1px 1px 2px silver; color:#a1a7a9!important; } .lj-spoiler-head a { font-size:28px; font-weight:bold; text-decoration: none !important; color:#eafeb9 !important; text-shadow: 1px 1px lime; font-family: monotype corsiva; } .lj-spoiler-head a:hover { font-size:16px; text-shadow: 2px 3px 4px #f7f4c8; border-radius: 5px; color: #ffffff !important; background-color:tomato; border: 4px solid yellow; } /*---modifed spoiler fotovivo.LJ.ru ---*/
.lj-spoiler-head {display: inline-block; padding: 5px 20px 10px 75px !important; background: #32364a url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/kk/web.gif) no-repeat 5px; line-height: 26px; border: 1px solid #e3ecff; border-radius: 25px; box-shadow:inset 0 -1px 2px 3px rgba(255, 255, 255, 0.4), 0 0 3px 3px #011f3d; color:#32364a!important; } .lj-spoiler-head a {font-size:18px; font-weight:bold; text-decoration: none!important; font: bold italic 18px cursive; text-decoration: none!important; color:#fff!important; text-shadow: 1px 1px grey; } .lj-spoiler-head a:hover { font-size:20px; text-shadow: 2px 3px 4px #3771b8; color: #d3e6f4 !important; background-color:red; } /*---modifed spoiler fotovivo.LJ.ru ---*/
.lj-spoiler-head {display: inline-block; padding: 6px 6px 0 85px !important; background: url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/kato/web.gif) no-repeat 2px 1px #fefeba; border: 2px dashed #ab7d36; border-radius: 12px; height: 70px; width: 85px; color: #fefeba!important; line-height: 15px; box-shadow: 0 0 0 4.5px #fefeba, 4px 4px 6px maroon; } .lj-spoiler-head a { font-size:14px; font-family: Segoe print; text-decoration: none !important; color: #ab7d36!important; } .lj-spoiler-head a:hover { font-size:18px; text-shadow: 2px 3px 4px #f7f4c8; color: red; background-color:lime; } /*---modifed spoiler fotovivo.LJ.ru ---*/
.lj-spoiler-head {display: inline-block; text-align: center; padding: 170px 0 0 0!important; height: 35px!important; width: 210px; border:6px ridge #c3d1e0; box-shadow: 2px -1px 3px #c3d1e0, 0 0 1px 2px grey; background: #f4f2fc url(http://ic.pics.livejournal.com/fotovivo/19078119/164572/164572_original.gif) no-repeat; border-radius: 120px; color:#f4f2fc!important; } .lj-spoiler-head a { background: #f4f2fc url(http://ic.pics.livejournal.com/fotovivo/19078119/165383/165383_original.png) no-repeat; font-size:20px; font-family:Arial; font-weight:bold; color: #fff; text-shadow: 0 0 1px blue; text-decoration: none!important; color:#fff!important; } .lj-spoiler-head a:hover { font-size:24px; text-shadow: 2px 3px 4px #5f67b0; color: yellow!important; border:6px dotted yellow; } /*---modifed spoiler fotovivo.LJ.ru ---*/
/Кнопы для примера, не нажимаются/
Идем в настройки журнала пользовательский CSS,
копипастим туда выбранный код, жмем сохранить.
Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж*Ж
.lj-spoiler-head {display: inline-block; min-height: 30px; padding: 50px 5px 5px 5px; background: #800000 url(http://KARTINKA.gif) no-repeat 5px; border: 2px dotted #fff ; border-radius: 15px; color: #800000; } .lj-spoiler-head a{ color: #fff; font: bold italic 18px Arial; text-decoration: none!important; } .lj-spoiler-head a:hover{ border: yellow; font: 22px; color: red; }
Обычный шрифт вместо курсивного: "italic" заменить на - "normal"
Цифровые кодировки цветов берутся в справочниках (http://htmlbook.ru/css/value/color и тп)
или в редакторе новой записи:
Можно ли натворить в стилях что-то такое, от чего всё поломается?
- Можно. Даже не только в стилях. Но это надо уметь.
Если пропустить точку/запятую при копировании - кнопка работать не будет.
Если случайно вставить комментарий кириллицей - пользовательские стили перестанут отображаться
(тема по умолчанию - жжешный скин - останется как ни в чем ни бывало).
Даже умеючи тренироваться лучше на пробном аккаунте.
PS
Случайно удалила первоначальный пост вместе с несколькими ответами,
сорри!
Само-репост из - Приручаем спойлер