Как сделать собственное оформление блоков в постах ЖЖ
Всем дарофки.
Иногда хочется немного выпендриться и оформить что-нибудь в отличном от прочей белиберды виде. Можно, конечно, извращаться в визуальном редакторе или пытаться сделать что-то путное в кастрированном ЖЖ-шном HTML, но зачем, если изобретено такое удобное средство как CSS?
Основная проблема в случае нашего любимого и уютненького - стили-то он позволяет задать, а вот проставленные в HTML-редакторе классы безжалостно вырезает. А задавать стили инлайн - это не тру аж ни разу. А раз ЖЖ не дает вставлять классы, подлый, пойдем по неявному пути.
Для начала вот вам несколько блоков, которые я оформил как стандартные:
Цитата:
Герберт Джордж Уэллс - английский писатель и публицист. Автор известных научно-фантастических романов «Машина времени», «Человек-невидимка», «Война миров» и др. Представитель критического реализма. Сторонник фабианства.
Рамочка с надписью:
Хозяйке на заметкуКак отличить осмий от натрия, если они находятся в запаянных ампулах?
Очень просто. Нагрейте ампулу. Если раньше расплавилось содержимое - это натрий, если же вначале расплавилась ампула - это осмий.
У меня есть мысль и я ее думаю:
Этот блок сделан без какой-либо графики. Да-да, чистый CSS.
Нота бене: разумеется, это работает если у того, кто на сию красоту смотрит, не включена фишка "Просматривать все журналы и сообщества в моем стиле".
Вот так сделать цитату: требуемый текст заключаем в теги
Рамочка (она, кстати, называется "филдсет") делается так:
С этими штуками все более-менее ясно, ибо это обычные теги HTML. А вот как делается комиксообразная "мысль":
Как видите, обычный div, но вместо класса "balloon" использован АТРИБУТ my_class с таким же значением. Ну а стиль, соответственно, задается не для селектора класса .balloon, а для селектора атрибута [my_class="balloon"]. Вот и весь хак для ваших постов =)
Такие блоки - это все, что нужно будет вставить в пост, чтобы получить нужный эффект. Разумеется, это надо делать в режиме "HTML" редактора. Сколько раз вставите, столько и блоков будет.
А чтобы вышеупомянутые конструкции выглядели как должно - ОДИН РАЗ зададим им стили. Раз и навсегда, чтобы не вспоминать куски кода каждый раз. Для этого нам понадобится файл для хранения собственных стилей, и он у нас - тадаммм! - есть.
1. Лезем в настройки собственной таблицы стилей: Аккаунт -> Оформление журнала и справа в секции "Действующее оформление" тыкаем в ссылку "Настройте свой стиль", а на появившейся странице в секции "Настройте своё оформление" ищем ссылку "Custom CSS" и клацаем ее мышкой.
Короче, сразу >>>тыцаем сюда <<<.
2. В квадратном поле, именуемом "Custom stylesheet", видим кучу злобных матюков на программистском диалекте. Тыкаем туда, проматываем в самый конец и самый низ, и там добавляем собственный код.
3. Внизу под этим полем справа жмем кнопку "Сохранить изменения".
А код у нас будет выглядеть (точнее, у меня; у вас может и как-то по-другому, как задизайните) вот так:
Для цитаты:
blockquote {
background-color: #F5DEB3;
background-image: none;
border: 1px solid #A67E5A;
border-radius: 4px 4px 4px 4px;
font-size: 92%;
padding: 10px 40px;
position: relative;
}
blockquote:before, blockquote:after {
color: #A67E5A;
display: block;
font-family: serif;
font-size: 64px;
font-weight: bold;
height: 35px;
line-height: 1px;
opacity: 0.5;
overflow: hidden;
position: absolute;
width: 30px;
}
blockquote:after {
bottom: -9px;
content: ",,";
right: 4px;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
blockquote:before {
content: ",,";
left: 3px;
top: -5px;
}
Для рамочки и надписи к ней:
fieldset {
border: 1px solid #A67E5A;
border-radius: 3px 3px 3px 3px;
padding: 5px 10px 10px;
}
legend {
font-weight: bold;
padding: 0 5px;
}
Для изображения мысли:
*[my_class="balloon"] {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 9999px 9999px 9999px 9999px;
box-shadow: 0 0 5px 2px #FFFFFF;
margin-bottom: 70px;
margin-top:10px;
padding: 10px 20px;
position: relative;
}
*[my_class="balloon"]:after {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 100% 100% 100% 100%;
bottom: -63px;
box-shadow: 0 0 5px 2px #FFFFFF;
content: "";
height: 15px;
padding: 0 15px;
position: absolute;
right: 20px;
width: 0;
}
*[my_class="balloon"]:before {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 100% 100% 100% 100%;
bottom: -40px;
box-shadow: 0 0 5px 2px #FFFFFF;
content: "";
height: 30px;
padding: 0 20px;
position: absolute;
right: 15px;
width: 24px;
}
Учтите только, что ЖЖ-шный домовой очень ругается на ошибки и не-аглийские символы в CSS.
Надеюсь, это кому-нибудь поможет.
Иногда хочется немного выпендриться и оформить что-нибудь в отличном от прочей белиберды виде. Можно, конечно, извращаться в визуальном редакторе или пытаться сделать что-то путное в кастрированном ЖЖ-шном HTML, но зачем, если изобретено такое удобное средство как CSS?
Основная проблема в случае нашего любимого и уютненького - стили-то он позволяет задать, а вот проставленные в HTML-редакторе классы безжалостно вырезает. А задавать стили инлайн - это не тру аж ни разу. А раз ЖЖ не дает вставлять классы, подлый, пойдем по неявному пути.
Для начала вот вам несколько блоков, которые я оформил как стандартные:
Цитата:
Герберт Джордж Уэллс - английский писатель и публицист. Автор известных научно-фантастических романов «Машина времени», «Человек-невидимка», «Война миров» и др. Представитель критического реализма. Сторонник фабианства.
Рамочка с надписью:
Хозяйке на заметкуКак отличить осмий от натрия, если они находятся в запаянных ампулах?
Очень просто. Нагрейте ампулу. Если раньше расплавилось содержимое - это натрий, если же вначале расплавилась ампула - это осмий.
У меня есть мысль и я ее думаю:
Этот блок сделан без какой-либо графики. Да-да, чистый CSS.
Нота бене: разумеется, это работает если у того, кто на сию красоту смотрит, не включена фишка "Просматривать все журналы и сообщества в моем стиле".
Вот так сделать цитату: требуемый текст заключаем в теги
...текст цитаты....
Рамочка (она, кстати, называется "филдсет") делается так:
С этими штуками все более-менее ясно, ибо это обычные теги HTML. А вот как делается комиксообразная "мысль":
...текст мысли...
Как видите, обычный div, но вместо класса "balloon" использован АТРИБУТ my_class с таким же значением. Ну а стиль, соответственно, задается не для селектора класса .balloon, а для селектора атрибута [my_class="balloon"]. Вот и весь хак для ваших постов =)
Такие блоки - это все, что нужно будет вставить в пост, чтобы получить нужный эффект. Разумеется, это надо делать в режиме "HTML" редактора. Сколько раз вставите, столько и блоков будет.
А чтобы вышеупомянутые конструкции выглядели как должно - ОДИН РАЗ зададим им стили. Раз и навсегда, чтобы не вспоминать куски кода каждый раз. Для этого нам понадобится файл для хранения собственных стилей, и он у нас - тадаммм! - есть.
1. Лезем в настройки собственной таблицы стилей: Аккаунт -> Оформление журнала и справа в секции "Действующее оформление" тыкаем в ссылку "Настройте свой стиль", а на появившейся странице в секции "Настройте своё оформление" ищем ссылку "Custom CSS" и клацаем ее мышкой.
Короче, сразу >>>тыцаем сюда <<<.
2. В квадратном поле, именуемом "Custom stylesheet", видим кучу злобных матюков на программистском диалекте. Тыкаем туда, проматываем в самый конец и самый низ, и там добавляем собственный код.
3. Внизу под этим полем справа жмем кнопку "Сохранить изменения".
А код у нас будет выглядеть (точнее, у меня; у вас может и как-то по-другому, как задизайните) вот так:
Для цитаты:
blockquote {
background-color: #F5DEB3;
background-image: none;
border: 1px solid #A67E5A;
border-radius: 4px 4px 4px 4px;
font-size: 92%;
padding: 10px 40px;
position: relative;
}
blockquote:before, blockquote:after {
color: #A67E5A;
display: block;
font-family: serif;
font-size: 64px;
font-weight: bold;
height: 35px;
line-height: 1px;
opacity: 0.5;
overflow: hidden;
position: absolute;
width: 30px;
}
blockquote:after {
bottom: -9px;
content: ",,";
right: 4px;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
blockquote:before {
content: ",,";
left: 3px;
top: -5px;
}
Для рамочки и надписи к ней:
fieldset {
border: 1px solid #A67E5A;
border-radius: 3px 3px 3px 3px;
padding: 5px 10px 10px;
}
legend {
font-weight: bold;
padding: 0 5px;
}
Для изображения мысли:
*[my_class="balloon"] {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 9999px 9999px 9999px 9999px;
box-shadow: 0 0 5px 2px #FFFFFF;
margin-bottom: 70px;
margin-top:10px;
padding: 10px 20px;
position: relative;
}
*[my_class="balloon"]:after {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 100% 100% 100% 100%;
bottom: -63px;
box-shadow: 0 0 5px 2px #FFFFFF;
content: "";
height: 15px;
padding: 0 15px;
position: absolute;
right: 20px;
width: 0;
}
*[my_class="balloon"]:before {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 100% 100% 100% 100%;
bottom: -40px;
box-shadow: 0 0 5px 2px #FFFFFF;
content: "";
height: 30px;
padding: 0 20px;
position: absolute;
right: 15px;
width: 24px;
}
Учтите только, что ЖЖ-шный домовой очень ругается на ошибки и не-аглийские символы в CSS.
Надеюсь, это кому-нибудь поможет.