:: об оформлении цитат)

[zakkurapia]

25.04.2011 в 17:57

Пишет  Беатрикс:

оформление цитат.
Если вас не устраивает курсив по умолчанию, то здесь открывается простор для фантазий. Выделять цитаты вы можете чем угодно: рамками, цветом фона, цветом текста, шрифтами и текстовыми спецэффектами.

Способ № 1 через HTML.
Работает для бесплатных дневников и для френдленты.

Для этого достаточно запрограммировать кнопку в HTML редакторе и коде цитаты

<span class='quote_text'>цитата.</span>

вместо class="quote_text" вставлять style="..." с нужным вам наполнением.

Например, вот так:

цитата

<span style="font: italic 14px Verdana; display: block; margin: 0 padding: 7 border-top: 0px solid #333333; border-left: 5px solid #ff9900">цитата</span>

другие варианты с рамками

левая и правая границы + шрифт
цитата

<span style="font: italic 14px Verdana; display: block; margin: 0 padding: 7 border-top: 0px solid #333333; border-left: 5px solid #ff9900; border-right: 5px solid #ff9900 ">цитата</span>

---

верхняя и нижняя границы + шрифт
цитата

<span style="font: italic 14px Verdana; display: block; margin: 0 padding: 7 border-top: 3px solid #ff9900;  border-bottom: 1px solid #ff9900;">цитата</span>

---

верхняя граница + шрифт
цитата

<span style="font: italic 14px Verdana; display: block; margin: 0 padding: 7 border-top: 3px solid #ff9900; ">цитата</span>

---

верхняя и левая границы + шрифт
цитата

<span style="font: italic 14px Verdana; display: block; margin: 0 padding: 7 border-top: 3px solid #ff9900; border-left: 5px solid #ff9900">цитата</span>

---

полная рамка + шрифт, левая граница массивнее
цитата

<span style="font: italic 14px Verdana; display: block; margin: 0 padding: 7 border-top: 1px solid #ff9900; border-right: 1px solid #ff9900; border-bottom: 1px solid #ff9900; border-left: 5px solid #ff9900">цитата</span>

с фоном

цвет фона
цитата

<span style="font: italic 14px Verdana; display: block; margin: 0 padding: 7 background-color: #ff9900">цитата</span>

Картинка.
Её не обязательно ставить на заполнене всей записи, будет мешать тексту. Но если сам текст сдвинуть в сторону на ширину этой картинки, а её саму размножать только вдоль нужной оси, то будут интересные эффекты.

По оси Y

Текст
Текст
Текст

<span style="text-align:left; padding: 10px 10px 10px 55 background: url('/userdir/5/8/5/2/585232/57909296.jpg') repeat-y; border: 1px solid #1894b5; font: italic 14px Verdana; display: block; margin: 0 ">Текст
Текст
Текст
</span>

---

По оси Y
Текст

<span style="text-align:left; padding: 55px 10px 10px 10 background: url('/userdir/5/8/5/2/585232/68496440.jpg') repeat-x; border: 1px solid #1894b5; font: italic 14px Verdana; display: block; margin: 0 ">Текст</span>

---

---

---

---

Способ № 2 через CSS.
Работает _только_ для платных дневников при включенном сервисе CSS. Применяется только внутри собственного дневника. Распространяется так же на перепосты, если их не оформлять иначе: через способ № 1 или прописать для них свой собственный класс и подставлять его в код при перепосте).
Для комментов в других дневниках НЕ годится.

Вам нужно в CSS для класса quote_text прописать нужное вам оформление. Для этого в редакторе CSS пишете
.quote_text {... } где вместо многоточия вставляете то, что в предыдущих примерах было в style="..." тега SPAN.