yurikhan | [Meta] Красим LJ в свой любимый цвет и свой любимый размер

Перед въездом в новый дом полагается ремонт. Обои там развесить, мебель расставить. Ну и как с этим делом в ЖЖ?

Все предопределённые дизайны презентационные и сделаны на табличной вёрстке. И только Magazine семантический и на CSS. Берём его.

У него вверху большой кусок заранее заданных стилей. Которые переопределяют шрифты, размеры, бордеры и кернинг на главном заголовке. Кернинг вообще никогда нельзя трогать! Почти аксиома.

Заходим в настройки стиля, втыкаем в Overrides:

GLOBAL_HEAD<=
<style type="text/css"><!--
/* first of all, undo all the stuff that comes with the template :) */
HTML { border-left: none; padding: 0px; }
BODY { line-height: normal; margin: 0px; background-color: white; color: black; }
P { margin-top: 0em; text-align: left; }
H1 { font-family: serif; text-align: left; letter-spacing: 0px; color: black; !important }
H2 { background-color: white; color: black; border-bottom: none; font: large serif; }
H3 { color: black; font: medium serif; }
H3 SPAN { border: none; padding-right: 0px; }
H3 EM { color: black; font-style: bold; }
.H3Holder { clear: both; padding-left: 0px; border-left: none; border-bottom: none; margin-bottom: 0px; }
.Navigation { text-align: left; font-family: serif; }
.Comment { font-size: small; margin-top: 0px; text-align: right; }
.Comment, .Current { margin-bottom: 0px; clear: both; }
.Picture { border-left: none; border-top: none; float: none; margin: 0px; padding: 0px; }
.Picture DIV { text-align: left; }
.Active { background-color: white; }
.Bottom { border-top: none; text-align: left; }
TH { font-family: serif; }
TH, TD { border: solid black 1px }

Это, так сказать, «содрать старые обои». А теперь клеим новые:

/* now apply our own customizations */
body { background-color: #DDFFCC; border-collapse: collapse; padding: 1em; }
h1, h2, h3, h3 span, h3 em, .MonthHeader, .Month th { background-color: #226611; color: white; font-weight: bold }
h1, h2, h3 { padding: 0.25em }
h1, h2 { border: black solid 1px }
h1 { font-size: 200% }
h2 { font-size: 141% }
h3 { font-size: 100%; margin: 0px }
h3 span small { font-size: 100% }
.H3Holder { border: black solid 1px; background-color: white; }
.H3Holder>* { margin: 0.5em; }
.H3Holder>h3 { margin: 0em; }
.Navigation { border: black solid 1px; background-color: white; padding: 0.5em }
.Month { border-collapse: collapse }
.Month td, .Month th { border: black solid 1px; }
.Month td { background-color: white; }
.MonthHeader a:link { color: white }
--></style>
<=GLOBAL_HEAD

Ну вот, теперь это похоже на то, как мне нравится. Теперь ещё в Browse Options выбираем схему Lynx, и всё в полном порядке :)

PS: Да, а к BB-коду в дневнике я больше привык, чем к HTML. Но на самом деле, наверно, хотел бы wiki-разметку.

PPS: Ну почему <lj-cut> добавляет   внутри скобок?… :(