Легкий способ выделить часть текста или всю страницу блога
Здравствуйте дорогие мои читатели и гости. В этом посте я хочу Вам рассказать, как я оформляю, вернее выделяю, нужный мне текст на странице своего блога.
В одном из своих постов я писала информацию об этом коде, но там я мало уделила внимания и не рассказала, как с помощью этого кода можно (всего один раз настроить) красиво оформить текст в блоге. Попутно я буду выделять текст, и Вы сами увидите, как это будет выглядеть.
Вот код
.code 1 {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;background : #f3f3f3;
border-top : 1px solid #E3E3E3; цвет верхней границы
border-right : 1px solid #E3E3E3; цвет границы справа
border-bottom : 1px solid #E3E3E3; цвет нижней границы
border-left : 1px solid #E3E3E3; цвет границы слева
border-radius: 5px; размер рамки
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Теперь давайте разберем его: background : #f3f3f3;-цвет фона; цвета окантовки (справа, слева, верх, низ) у меня выделены. Они могут быть у Вас разными, тогда получится рамочка с разным цветом окантовки.
border-top:1px; border-right : 1px; border-bottom : 1px; border-left : 1px-это размер окантовки верхней (top), правой (right), нижней (bottom) и левой (left) границы рамки; solid-это форма прямой линии рамки.
Вы можете вписать точечную (dotted), пунктирную (dashed), выпуклая (outset), вдавленная (inset), двойная (double), края рамки выемкой (groove), края в виде кромки (ridge). Подробнее читайте в моем посте Как выделить часть текста в рамку.
border-radius: 5px;-размер закругленных углов рамки, измените при необходимости все значения, чтобы числа были одинаковы.
Вы можете вписать точечную (dotted), пунктирную (dashed), выпуклая (outset), вдавленная (inset), двойная (double), края рамки выемкой (groove), края в виде кромки (ridge). Подробнее читайте в моем посте Как выделить часть текста в рамку.
border-radius: 5px;-размер закругленных углов рамки, измените при необходимости все значения, чтобы числа были одинаковы.
С настройками разобрались. Теперь этот код, вернее несколько, нам надо вставить один раз в шаблон-изменить шаблон выше строки ]]></b:skin> Перешли в шаблон, в самом начале ищем строку <b:skin>...</b:skin>. Именно сюда вставляются все стили CSS во всех шаблонах.
У кого работает поиск нажимаем CTRL+F, английская клавиатура при включенной кнопке Caps Losk или на клаве верхняя кнопка F3, вставляете в поле поиска скопированную строку. Нажимаете Enter. Строка будет выделена фоновым цветом. Если поиском воспользоваться не сможете, смотрите скриншот:
У кого работает поиск нажимаем CTRL+F, английская клавиатура при включенной кнопке Caps Losk или на клаве верхняя кнопка F3, вставляете в поле поиска скопированную строку. Нажимаете Enter. Строка будет выделена фоновым цветом. Если поиском воспользоваться не сможете, смотрите скриншот:
Строка находится рядом с самой первой стрелкой слева
Нажимаем на стрелку слева, тихонечко прокручиваем вниз и находим строку ]]></b:skin>
Выше этой строки вставляем наши коды.
На скриншоте Вы видите, что у меня вставлено несколько: 3,4,5 стилей CSS.
Остается сохранить шаблон и все.
Дальше, когда в редакторе сообщений пишите пост и нужно какую то часть текста выделить, слева нажимаем HTML.и заключаем вот в такой код:
<div class="code1">часть текста</div>
Таким образом можно оформить и целую страницу в блоге. Код в HTML вставляете в самом начале и в конце закрываете тэгом </div>. Запишите где нибудь в блокноте настройки кодов: 1, 2, 3, и.т.д, затем просто меняете цифры и выбираете подходящее оформление.
Вы так же можете вставить картинку или фото, и рядом написать текст. Изображение вставляете как обычно в редакторе сообщений, затем переходите на вкладку HTML и заключаете текст вместе с картинкой в код.
Картинку располагаете слева, справа или по центру.
Вот и все. Будет что-нибудь непонятно, задавайте вопросы. Делитесь со своими друзьями. Всего Доброго.
Почитайте статьи по оформлению текста: Стильные рамки со свечением цвета и изображением; Как выделить часть текста в рамку; Рамки разной толщины границ и формы окантовки; Рамочки с прошивкой для текста и цитат на CSS;
Вы так же можете вставить картинку или фото, и рядом написать текст. Изображение вставляете как обычно в редакторе сообщений, затем переходите на вкладку HTML и заключаете текст вместе с картинкой в код.
Вот и все. Будет что-нибудь непонятно, задавайте вопросы. Делитесь со своими друзьями. Всего Доброго.
Почитайте статьи по оформлению текста: Стильные рамки со свечением цвета и изображением; Как выделить часть текста в рамку; Рамки разной толщины границ и формы окантовки; Рамочки с прошивкой для текста и цитат на CSS;
Рекомендуемый контент:
Извините, но эти коды не работают.
ОтветитьУдалитьПепа Табакова, как видите у меня на странице работают, да и не только на этой. В шаблон вставлены стили CSS из статьи. Ищите ошибки, все должно работать.
УдалитьВсё работает, только как можно изменить цвет текста в такой рамке?
УдалитьАлександр Чуриков, здравствуйте. В редакторе блоггер, где Вы пишите статьи, выделите нужный текст мышью, и в меню сверху выберите цвет текста.
Удалить