Приветствую Вас на своем блоге!
В WordPress можно красиво оформить текст с помощью плагина WP-Note или Special Text Boxes, а можно и без плагина. Как известно чем меньше плагинов установлено, тем лучше. А может кто-то вообще не любит плагины и старается все делать без них. Самый простой способ красиво оформить текст без плагина, это с помощью таблицы стилей style.css вашей темы.
Для начала нужно написать свойства стиля, как мы будем оформлять текст. Это можно сделать в текстовом редакторе notepad++ или juffed. Так сказать сделать заранее несколько заготовок, а потом их просто подставлять в нужное место
Вот пример такого кода:
/* оформление рамки блока */
.bloginfo {
background: #eef0ed;
border: 1px solid #c0c0c0;
padding: 3px 5px 3px 30px;
margin: 50px;
text-align: justify;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";/*Internet Explorer */
box-shadow: 5px 5px 5px #ABC;/*Opera и Firefox*/
}
/* оформление заголовка блока */
.bloginfo-head {
font-size:1.4em;
font-weight: bold;
color:#ed802b;
margin: 0 0 5px 0;
}
/* оформление текста блока */
.bloginfo-txt {
line-height: 1.3em;
color:#0d7bb8;
font-size:11px;
}
Как видите наш код состоит из трех блоков — это блок общей рамки, блок заголовка и отдельно идет блок содержимого рамки.
Немного поясню, что в этом коде за что отвечает:
1 блок.
.bloginfo — название div класса. Тут можно написать любое название, главное чтобы оно совпадало и в css и в блоге;
background: #eee url(images/img.png) no-repeat; — фон нашей рамки с картинкой в углу рамки, если нужна. Меняйте цвет по своему усмотрению, также можно вставить любую картинку;
border: 1px solid #c0c0c0; — окантовка нашей рамки. 1 пиксел шириной, solid-сплошная линия и цвет окантовки. Тут также все можно менять по своему вкусу;
padding: 3px 5px 3px 30px; — отступы текста внутри рамки начиная сверху, слева 30px место для картинки. Если картинка не нужна, то можно отступы сделать одинаковые;
margin: 10px; — внешний отступ рамки, расстояние между рамкой и другими блоками, тут надо экспериментировать, для разной ширины рамки делать свой отступ, чтобы было красиво;
text-align: justify; — выравнивание текста внутри рамки, сейчас стоит по всей ширине;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; — этот код позволяет выводить закругленные края рамки, если они не нужны, то его можно удалить или за комментировать;
Этот код позволяет выводить наш блок с тенью:
-webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */
-ms-filter: «progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)»;/*Internet Explorer */
box-shadow: 5px 5px 5px #ABC;/*Opera и Firefox*/
2 блок.
.bloginfo-head — название div класса;
font-size:1.4em; — размер шрифта заголовка;
font-weight: bold; — жирный шрифт;
color:#ED802B; — цвет шрифта в заголовке;
margin: 0 0 5px 0; — отступ заголовка внутри блока;
3 блок.
.bloginfo-txt — название div класса;
line-height: 1.3em; — междустрочный интервал;
color:#2d86de; — цвет шрифта;
font-size:14px; — размер шрифта содержимого блока;
Сложного тут нет ничего, разобравшись вы сможете делать любые рамки для оформления своих статей не используя плагины. Все зависти от вашей фантазии и желания.
Далее для оформления текста его нужно заключить в теги div блока, примерно так:
Заголовок блока
Содержимое блока
Вот несколько примеров создания таких рамок:
Как видите, можно создать любую рамку не прибегая к плагинам.
Если ваш блог комментируют, то рекомендую поставить на свой блог бок «Топ комментаторов», как это сделать вы можете узнать, прочитав эту статью.
На этом пока все. Удачи в оформлении блога!
С уважением, Юрий Хрипачев.
Правильно ли я поняла, что при написании каждого поста надо лезть в коды? Спасибо
Нет Лилия, в коды лезть не нужно. Нужно текст, который вы хотите вставить в рамку, заключить в нужный div блок. Далее css сделает все за вас.
Если делать такие рамки, то код нужно вставлять в текст? что бы получились такие красивые рамки.
А то не хочется нагружать сайт множеством плагинов, так как вордпрес и так тяжелый(
И в текст, и в файл *.css. Плагины не нужны.
После строки «Далее для оформления текста его нужно заключить в теги div блока, примерно так:» находится рамка. Но она пустая, в ней нет кода. Не могли бы Вы восстановить этот код.
Исправил, спасибо, что подсказали.
U menea ne poluchaetsa , vot postavil na etu stranitzu
musicfordjs.com/ftp/
Pomoghite pojalusta reshiti problemu
Я не вижу на вашей странице CSS с class=»bloginfo», вы либо их не прописали, либо это сделали с ошибкой, проверьте еще раз вашу таблицу стилей, браузер не видит class=»bloginfo», поэтому ничего не отображается.
postimg.org/image/epcudsejl/
vot posmotrite, kak na saita napisal
У вас сайт на бутсрапе сверстан? А CSS вы со своими изменениями подключали или в общий файл все записывали?
По адресу:
musicfordjs.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/flymag/bootstrap/css/bootstrap.min.css,wp-content/themes/flymag/style.css,wp-content/themes/flymag/fonts/font-awesome.min.css
я не вижу класса bloginfo, в каком файле вы его прописали?
tam je na skrine vidno, v redaktore , Stylesheet (style.css)
Я вижу, что style.css, но я не вижу, этого файла в браузере и что он подключен. Этот файл от темы или вы его сами создали?
u menea sait na wordpress
Вот посмотрите, я добавил стили в браузере и выглядит это так: prntscr.com/b01g6d
Сделайте так, чтобы ваши стили были видны браузеру и все будет нормально.
ya ne znaiu gde nado dobaviti, dobavil v style.css gde isheo nado, ya ne razberaiusi …
Где вы скачивали эту тему? Дайте ссылку мне.
ya ne skacial, ona standartnaya
wordpress.org/themes/flymag/
pomoghite pojaljsta reshiti problemu, gde napisati stili ? >
Посмотрите внимательно на скриншот:
prntscr.com/b0b4v8
Откройте в редакторе файл function.php и добавьте в него строчку, которая выделена желтым цветом в то место, где она добавлена на скриншоте и ваши стили в файле style.css будут нормально работать.
Чтобы ничего не испортить, сохраните копии изменяемых файлов, чтобы их потом восстановить, если что то сделаете не так.
Проще всего строчку добавить так: Скопируйте верхнюю строчку и вставьте ее вниз, затем просто измените ее окончание и все будет работать.
Хотя сейчас у меня все работает и без изменения файла function.php, но сначала тоже не было видно этой рамки.
Spasibo bolshoe, poluchilosi 😉
toliko vot drugaia problema, ya meneayu «color:#f3f3f3;» , no tsvet ne meneayetsa,..
На счет цвета не могу так сказать, нужно смотреть.
Скажите а как сделать или или какой плагин использовать для подобного всплывающего окна..?
Расскажите подробней, что вы имеете ввиду под всплывающими окнами?