Оформление цитат

[Daniel Walker]

25.04.2011 в 18:57

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

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

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

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

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

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

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

цитата

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

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

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

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

---

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

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

---

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

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

---

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

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

с фоном

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

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

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

По оси Y

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

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

---

По оси Y
Текст

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

---

---

---

---

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

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

@темы: Diary.Ru

Comments

[Daniel Walker]

Проверка