Существенное дополнение! Код для нижеследующего будет работать только в вашем дневнике, что видно на примере этого предложения. С одной стороны, тем самым вы проявите уважение к настройкам кода ваших ПЧ не навязывая своё видение оформления дизайна и не нарушая привычную гармонию, в которой комфортнее обитать вашему ПЧ. С другой - в ленте избранного ваших ПЧ ничего из ваших красот видно не будет, и вы немного потеряете в индивидуальности ваших постов, выделяясь особенностями оформления.
Если вы всё же желаете показать своё самовыражение через собственное видение, привлекая внимание, то эту фишку можно решать так, как это было у меня раньше - прописывая код для буквицы через добавление блочного CSS-элемента непосредственно в пост:
-- Дальше --
Выглядеть результат такого кода в ленте избранного вашего ПЧ будет так, разумеется, после прописывания в него ваших настроек внешних и внутренних отступов и шрифта:
Буквица будет видна именно в таком оформлении и никак иначе.У всех в области создания записи, её редактирования или редактирования комментария есть панель с кнопками. На эту панель, как известно, можно добавлять другие кнопки. Они позволяют обходить трудности в реализации каких-либо маленьких прелестностей непосредственно CSS-кодом. Вот только, если вы меняете дизайн дневника, и при этом атрибуты селектора вшиты непосредственно в команды кнопки, то может случится такое, как у меня на старых страницах -
следы невиданных зверей остатки от прошлого дизайна. И это, мягко говоря, не совсем приятно. Чтобы при изменении кода дизайна, менялся дизайн дневника на всех страницах, коды для кнопок можно просто вшить новыми селекторами в CSS-код.
-- ДЕТАЛЬНЕЕ --
Да, вот ещё что. Если в ваш код уже вшита буквица соответствующими свойствами, то вам нужно каждый новый абзац вписывать в скобки (и на них тоже можно сделать соответствующие кнопки) так как показано на скрине (так как в моём коде нет непосредственно буквицы средствами CSS, то вам придётся представить это):
-- Во время набора текста:
-- После публикации будет выглядеть так:
Как видно, теги "br" и "р" отличаются отступами между абзацами, которые, конечно же, можно прописать в основной код.
А можно решить задачу иначе. Итак, по порядку.
-- Буквица --
Выглядит это так:
Буквица - с отступом.
Буквица - без отступа.
I. С отступом - красной строкой.
1. В CSS-код добавляем строки:
В этом коде:
-- Создан новый селектор #LiteraMarg со всеми свойствами, в котором в атрибуте margin-left: 40px; прописана красная строка.
-- В строке с селекторами #LiteraMarg:hover, #Litera:hover задано поведение буквицы при наведении на неё мыши. Она подсвечивается светлым, в чём можно убедиться выше по тексту.
-- В строке с #Litera прописан код для буквицы без отступа, что необходимо, когда текст нужно выровнять по центру.
2. Либо сами рисуем картинку с размерами как у кнопок на панели, либо просто берём у меня:
. Картинка на самом деле прозрачная, просто в код рисунка я добавила светлый фон, т.к. буква чёрная и в записи моего дневника не видна́.
3. Заходим в настройки по адресу
Настраиваемые кнопки. И продолжаем работу там.
-- В области "Добавить новую кнопку" можете просто ввести то, что уже прописано у меня. Кроме, разумеется, адреса картинки - его берём из своего дневника. Смотрим скрин:
-- На что здесь стоит обратить внимание, так это на сам код при введении текста:
Как видите, тут есть [cuRs] - рядом с полем кода расписано, для чего он. Удобная вещь!
II. Без отступа.
1. Если вы внимательно прочитали пункт I, то уже догадались, что в нём всё сказано и об этом.
2. Картинка на эту кнопку
3. Добавляем ещё одну новую кнопку, название для которой можете дать "Буквица-без отступа". В области "значение" вписываем такой код:
Ну и адрес иконки из БИ вставляем.
Так как этот пример получился большим, то остальное - в следующем посте.
