четверг, 4 октября 2012 г.

Оформление текста ,цитирование\Йёжа Йежов


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

.bloknot1 { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #bce2eb url(https://lh5.googleusercontent.com/-HNIks6RNv2s/TtgzYwwxmhI/AAAAAAAACZ8/EXcIG3qG3Nw/s800/Bloknot.gif) repeat-y top left; border-top : 1px solid #555555; border-right : 1px solid #555555; border-bottom : 1px solid #555555; border-left : 1px solid #555555; }
-  Определившись с видом оформления, пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно  облечь нужный участок текста в выбранное оформление путем заключения участка в теги:  <div class="bloknot1">  ------ </div> 
.

Следующий вариант \вариант 2\
Это уже скорее листок , вырванный из тетрадки в линеечку
Плохо лежало  здесь
.
.
.bloknot2 { margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #bce2eb url(https://lh6.googleusercontent.com/-vo1v9jZ4e8g/Ttxs3VIUEsI/AAAAAAAACgI/M1rm2V0dIHk/s1600/note.jpg) repeat-y top left; border-top : 1px solid #555555; border-right : 1px solid #555555; border-bottom : 1px solid #555555; border-left : 1px solid #555555; }
- Определившись с видом оформления, пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги: <div class="bloknot2">  ------ </div> вместо ------текст Результат должен получиться , как под кодом выше
.

 Вариант 3
Вариант с каким - то фоном внутри рамки ,Фон , кстати можно сделать любой
При желании можно изменить цвет
Плохо лежало  здесь
.
.
.
.bloknot3 { margin : 15px 35px 15px 15px;
 padding : 20px 10px 10px 35px;
 background : #F7C65C;
 border-top : 1px solid #B5520B;
border-right : 1px solid #B5520B;
border-bottom : 1px solid #B5520B;
border-left : 1px solid #B5520B;
 border-radius: 5px;
 -moz-border-radius: 5px; -webkit-border-radius: 5px; }
= = Вы можете использовать собственные цвета для третьего варианта, более подходящие под дизайн Вашего блога. В участке кода значение цвета background : #F7C65C замените на свое. Для выбора подходящего цветового оттенка воспользуйтесь удобным генератором веб-цветов.Определившись с видом оформления, пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги: <div class="bloknot3"> ---------</div> вместо ------текст Результат должен получиться , как под кодом выше =
.

 Варианты 3А,3Б
Варианты с рамкой и белым фоном ,а также с рамкой и фоном в клеточку
Почему-то у многих  в инете  есть именно первые три варианта .У меня встала проблема ,как сделать белый фон к сообщениям .А также в клеточку .Ну . и методом тыка , я всё-таки сделал на базе Варианта № 3.
Вообще по идее можно любую картинку подставить таким макаром в виде фона ,единственное ,что фон при повторении  должен быть однородным .То есть не должно быть границы между повторяющимися частями ,не должен быть виден переход. Кстати ,заметил одну особенность  в Internet Explorer вся красота куда-то девается .Скруглённые углы пропадают ,в варианте 3Б
исчезает клеточка .В браузерах  Опера, или Гугле Хром, или Мазила Фаерфокс всё нормально

.
.
Вариант 3а -это фон у этого сообщения .Первоначально использовал варианты 5,6,7  .Но остановился на этом варианте .

 .bloknot4 {margin : 15px 15px 15px 15px;
padding :20px 35px 10px 35px;
background : #ffffff;
border-top : 1px solid #B5520B;
border-right : 1px solid #B5520B;

border-bottom : 1px solid #B5520B;
border-left : 1px solid #B5520B;
border-radius: 10px;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;}


Установка идентична Варианту 3 .Пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги: <div class="bloknot4"> ---------</div> вместо ------текст Результат должен получиться , как под кодом выше .Изменения сделал небольшие .
Изменил
margin -отступ всего  фона от краёв ,последние 15px отступ слева
padding -отступ текста внутри фона  ,последняя 35 - отступ слева
background-заменил цвет на белый ,кстати можно вместо цвета подставить картинку ,что я и сделал в варианте  3Б ,добавив url
Ну и скруглил чуть больше углы ,изменив  три значения
border-radius
 В общем даётся большая возможность для творчества

 Вариант 3Б 
.bloknot5 {
margin : 15px 15px 15px 15px;
padding : 20px 10px 10px 35px;
background : #ffffff url(https://lh3.googleusercontent.com/-oFVCqkfIIZw/UIpm4bbLcBI/AAAAAAAACfs/9zZP91IYJpQ/s789/%25D0%25BA%25D0%25BB%25D0%25B5%25D1%2582%25D0%25BE%25D1%2587%25D0%25BA%25D0%25B01.jpg)repeat-y top left;

border-top : 1px solid #B5520B;
border-right : 1px solid #B5520B;
border-bottom : 1px solid #B5520B;
border-left : 1px solid #B5520B;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

 Установка идентична варианту 3А .
Пройдите Дизайн--Изменить HTML, посредством сочетания клавиш (CTRL+F) найдите в шаблоне отрезок ]]></b:skin> и прямо перед ним вставьте выбранный вариант кода из предложенных выше. Сохраните шаблон.Теперь при создании сообщения, переключившись во вкладку "Изменить HTML",нужно облечь нужный участок текста в выбранное оформление путем заключения участка в теги: <div class="bloknot5"> ---------</div> вместо ------текст Результат должен получиться , как под кодом выше .


.


.

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

 
 Вариант 4 (Цитирование)
Выглядит этот вариант цитирования как на картинке ниже


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


Плохо лежало  здесь
.
.
.
Не забудьте сделать резервную копию шаблона
Для того что бы поменять способ цитирования , нужно зайти в панель управления, выбрать вкладку шаблон – изменить HTML – Приступить – ставим галку расширить виджеты шаблона. С помощью поиска (Ctrl + F) ищем строчку  ]]></b:skin>  Перед строчкой вставляем код представленный ниже  
 blockquote {     background:#F9F9F9;     border:1px solid #CCC;     margin:10px 0;     padding:10px; }    
.
.
.


 Вариант 5,6 ,7
При желании можно изменить цвет ,поставить другую картинку , или удалить её вообще.Кстати ,первоначально белый фон в этой статье сделан при помощи одного из вариантов ,но потом всё-таки поменял на вариант 3А,а на базе этих вариантов сделано оглавление статьи  ,правда уже видоизменённое,относительно первоисточника .
Во завернул аа!
Плохо лежало  здесь
.
.
=
Как сделать красивое оформление текста Стандартно: заходим в “Панель инструментов” – “Шаблон” – нажимаем “Изменить HTML” – далее “Приступить”. Расширять ничего не надо. Красивое оформление достигается за счет добавления стиля CSS. Нужно найти конец CSS стиля и перед ним добавить CSS стиль для блоков. С помощью поиска браузера (Ctrl+F) находим строчку конца стиля дизайна ]]></b:skin> До этой строчки в шаблон блога, вставьте
.vajno, .kod,.bel,.yo, .info{ margin:10px; padding:15px 20px 15px 80px; border:1px solid #999999; border-radius: 10px; -moz-border-radius:10px 10px 10px 10px; box-shadow:2px 2px 3px #999999; -moz-box-shadow:2px 2px 3px #999999; -webkit-box-shadow: #999 2px 2px 3px; background-position:20px 50%; background-repeat:no-repeat; position:relative; text-align:justify; } .vajno { background-color:#FFD4A0; background-image: url("http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png"); } .info { background-color:#FFFFCC; background-image: url("http://lh5.ggpht.com/_G92voTj-yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png"); } .kod { background-color:#E9FFD4; background-image: url("http://lh3.ggpht.com/_G92voTj-yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png"); }
 Названия блоков находятся в первой части кода CSS – это vajno, kod, info. При добавлении новых блоков, вписывайте в верхнюю часть кода их название. При редактировании названия блока меняйте его в верхней части и в нужном коде отдельного блока оформления текста. Не забывайте добавлять точку перед каждым названием. Возможность редактирования: Цвет тела в рамке, просто измените на свой, в background-color Вывод картинки, вставьте ссылку вашей картинки, в background-image. Может найдете более красивое. Если картинка не нужна, удалите ссылку с путем картинки. Можно изменить радиус закругления рамки и другие параметры. После внесения изменений, если таковые были – Сохраните шаблон. Перейдем к написанию статьи. Как было сказано ранее что бы сделать красивое оформление текста нужно зайти в редакторе сообщений в HTML. Написав статью, определившись какой текст будете вносить в рамку, нажимаете на HTML. Находите кусок текста, и заключаете его в тег div.
И еще я свой текст выравниваю по ширине, и каждая часть текста находится в теге:

<div style="tеxt-аlign: justify;">Часть текста</div>

Вместо тега <div style="text-аlign: justify;"> поставьте тег блока. Закрывающую часть тега не трогайте (</div>)
  =

<div class="yo">tekst</div>

.

<div class="bel">tekst</div>
.
<div class="vajno">tekst</div>
.
<div class="kod">tekst</div>
.
<div class="info">tekst</div>
.






Вариант 8,9 ,10,11,12 (Цитирование)
Плохо лежало  здесь
.
.
=
blockquote.style1 { font: 14px/20px italic Times, serif; padding: 8px; background-color: #faebbc; border-top: 1px solid #e1cc89; border-bottom: 1px solid #e1cc89; margin: 5px; background-image: url(https://lh3.googleusercontent.com/-W_t4kr_cnL8/TryHmrdUhJI/AAAAAAAABs8/wFN5wlQGaQ0/s25/openquote1.gif); background-position: top left; background-repeat: no-repeat; text-indent: 23px; } blockquote.style1 span { display: block; background-image: url(https://lh4.googleusercontent.com/-P6iY1yjxSZo/TryHkst54uI/AAAAAAAABs0/rUsUI0EgBEw/s25/closequote1.gif); background-repeat: no-repeat; background-position: bottom right; }
=
<blockquote class="style2">blockquote.style2 { font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc; }</blockquote>
=
blockquote.style3 { font: 18px/30px normal Tahoma, sans-serif; padding-top: 22px; margin: 5px; background-image: url(https://lh3.googleusercontent.com/-rpej94PjpCQ/TryOIy2XNRI/AAAAAAAABt4/7UzggrE0a1I/s65/openquote3.gif); background-position: top left; background-repeat: no-repeat; text-indent: 65px; } blockquote.style3 span { display: block; background-image: url(https://lh4.googleusercontent.com/-cf5lYCVjw1U/TryOHB0bR4I/AAAAAAAABtw/JSBQhLoekxY/s65/closequote3.gif); background-repeat: no-repeat; background-position: bottom right; }
=
blockquote.style4 { font: 14px/20px italic Times, serif; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url(https://lh3.googleusercontent.com/-Ug9Gb1WVyso/TryHgrZkqcI/AAAAAAAABss/ejUw-in9dKU/s96/openquote4.gif); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; }
=
blockquote.style5 { font: 12px/18px normal "Courier New", sans-serif; padding-left: 70px; padding-top: 2px; padding-bottom: 2px; background-color: #000; color: white; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url(https://lh5.googleusercontent.com/-FE9KBDRGPXU/TryOMrkGGMI/AAAAAAAABuI/JnOFc9fOP3w/s96/openquote5.gif); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; } blockquote.style5 div { padding-right: 50px; display: block; background-image: url(https://lh5.googleusercontent.com/-IJBaN0C6Ut0/TryOLMDUG1I/AAAAAAAABuA/le8LXAuQzMw/s96/closequote5.gif); background-repeat: no-repeat; background-position: bottom right; }
= Код стиля вставляется перед  строчкой ]]></b:skin> в вашем шаблоне.Во время написания поста нужный Вам фрагмент текста заключаем в <blockquote class="style1">tekst</blockquote> Код общий для всех примеров, неободимо только подставить нужное название стиля 1,2,3 или 4,5. Можно все стили использовать в шаблоне.Вот вроде и всё.Пока. =
.

Вариант 13 

Ещё один листочек в линеечку


Взят ЗДЕСЬ
Итак  ещё один вариант .Кстати могут стоять и все одновремено.Для разных стилей оформления
 
.
.......
blockquote.style6 { margin : 10px;
padding: 0px 20px 5px 40px;
background : #fff url(http://i015.radikal.ru/1207/0f/00db3bb5891f.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, &quot;Times New Roman&quot;, Times, serif;
color : #767675;
border: 1px solid #767675; }
Код стиля вставляется перед  строчкой ]]></b:skin> в вашем шаблоне.Во время написания поста нужный Вам фрагмент текста заключаем в <blockquote class="style6">tekst</blockquote>
 .....



 С уважением !


  ЕЩЁ СТАТЕЙ ОТ ЙЁЖИ ЙЕЖОВА




 
 ----

Об Авторе