Оформление заметок в блоге.

5
405

Иногда нужно, или просто хочется, выделить часть текста каким-то образом. Ну и конечно хочется чтобы в итоге это выглядело достаточно презентабельно..

В первую очередь рассмотрим вариант оформления заметки вручную без плагина, ну а если не охота править код, можно воспользоваться плагинами, о которых тоже пойдёт речь.

Править файлы настоятельно рекомендую Notepad++. Чтобы воплотить нашу затею нужно открыть style.css и прописать там новый класс.

[codesyntax lang=»php»]

.supernote {

     font-family : "Times New Roman", Times, serif;
    background-color: #777;
    background-image: url("images/note.png");
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-position: 20px 50%;
    background-repeat: no-repeat;
    border-bottom-color: #999999;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #999999;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #999999;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #999999;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top-style: solid;
    border-top-width: 1px;
    bottom: 6px;
    box-shadow: 2px 2px 3px #999999;
    height: auto !important;
    min-height: 40px;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 20px;
    padding-top: 15px;
    position: relative;
    right: 6px;
    text-align: justify;
    width: 80%;

}

[/codesyntax]

Ну а в теле страницы либо поста использовать :

[codesyntax lang=»php»]

<supernote>Текст новой заметки</supernote>

[/codesyntax]

И да, прописывать тэги нужно переключившись в html режим.

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

Естественно код можно и покороче :) , без теней и скруглённых углов, ну это я чтобы Вам был повод поковыряться в стиле и возможно найти что-то своё. Всё правиться элементарно. А если что всегда можно спросить в комментариях, либо обратится к FireBag ^_^ .

Также для создания заметок блоков есть два замечательных плагина.

WP-Note и Special Text Boxes.

1. Плагин WP-Note.

Плагин не локализован, но это не проблема. Так-как настроек, как таковых он не имеет.

 

wp-note

Итого плагин имеет 5 встроенных стилей с тегами для каждого из них. Естественно всё это можно изменить заглянув в файл настроек .css плагина wp-note.

2.Плагин Special Text Boxes .

Special Text Boxes подобен  плагину wp-note но гораздо функциональней и практичней.

В чём это выражается ?

1. Он имеет гораздо больше стилей.

оформление заметок

 

2. Широкие настройки и русский язык в настройках.

оформление заметок

3. Не нужно помнить теги и как прописывать тот или иной стиль заметка. Кнопка плагина появляется в редакторе wordpress. Выделяете текст, и кнопочка становится активной для нажатия.

оформление заметокоформление заметок

Что использовать Вам , решать тоже Вам :) Меленькая подсказка – стили с данных плагинов легко можно использовать не подключая самих плагинов. Используйте стилевое оформление с настроек файла style.css плагинов ^_^ .

 

С уважением OlegS9 ^_^.

5 КОММЕНТАРИИ

ОСТАВЬТЕ ОТВЕТ