Психологическая помощь, Таро-психолог

Психологическая помощь, Таро-психолог
Псимастер
Home в блоге Красивые стили оформления цитат blockquote Blogspot center post text-align Красивые стили оформления цитат в блоге

Красивые стили оформления цитат в блоге

Оформление текста цитатой с использованием предлагаемых здесь стилей CSS намного проще. Единственный минус, все цитаты будут отображаться одинаково. Но при желании можно оформить и цитатой, а так же и с помощью вставки кода.
Первое, что надо сделать-это посмотреть в своих шаблонах вот такой код .post blockquote и удалить его из шаблона или вставить в эту строку код CSS цитаты, чтобы стили не конкурировали друг с другом. 

Вы можете найти у себя в шаблоне код такого вида .post-body blockquote { line-height:1.3em; } или .post blockquote{здесь код }. А можете не найти вообще никакого кода ( я у себя в тестовых блогах не нашла), тогда смело можете вставлять выбранный здесь стиль CSS. Смотрите между строками <b:skin>...</b:skin>.

Выбранный CSS стиль вставляете выше строки ]]></b:skin>. Не забывайте делать резервную копию шаблона.  Можно настроить в тестовом блоге, затем вставить в рабочий. Кто не знает, где искать такие строки в шаблоне, почитайте внимательно пост по ссылке выше.

Дальше, когда пишите пост в редакторе сообщений, выделите его левой кнопкой мыши и вверху нажмите на кавычки. 

Посмотрите на скриншоте

Показано как оформить текст цитатой




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

Стиль 1
СТИЛЬ ЦИТАТ
blockquote {
border: dotted #ff9900 1px;
border-left:solid #ff9900 5px;
margin:10px 40px;
padding:15px;
color:#333;
font-style:italic;
font-size:14px;
background:#f8f8f8;
}
Стиль 2
blockquote {
   padding: 18px 10px 18px 70px;
   font: 14px/20px italic Times, serif;
   background: url(http://4.bp.blogspot.com/-46dKh3Wii7o/TmdZi-BHrkI/AAAAAAAACSU/puFYvvosoxU/s400/modelocita2m2.gif) no-repeat scroll 10px 10px rgb(255, 255, 255);
border-left: 7px solid #00b2a1;
border-top: 1px dotted #c0c0c0;
border-right:1px dotted #c0c0c0;
border-bottom: 1px dotted #c0c0c0;
}

Стиль 3






blockquote {

  background: #ffffff;

  border-left: 10px solid #3d290e;
border-right: dotted 1px #cccccc;
border-bottom: dotted 1px #cccccc;
border-top: dotted 1px #cccccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #f00;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

Стиль 4






.post blockquote { font-size:14px;color:#0e5198; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; }

.post blockquote p { margin: 0; padding-top:10px; }

Стиль 5


blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TR3MwDiXB1I/AAAAAAAAAQo/Fi8TGwkSRNQ/s1600/quote.png") 5% no-repeat #FFF8DD; }

Стиль 6


blockquote {
background:url(http://4.bp.blogspot.com/-7NinCC44B1k/UN-WWw9SOeI/AAAAAAAABQg/rmUdVGmvc5Q/s000/quote.png) no-repeat 5px top;
margin-left:15px;
border-left:4px solid #cccccc;
color:#444444;
font-size:14px;
font-family:Arial, Georgia, sans-serif;
font-weight:400;
font-style:italic;
text-indent:10px;
padding:15px 0 10px 10px;
}

Стиль 7
blockquote {
background-image:url(http://i062.radikal.ru/1404/ab/d3f5483f70c5.jpg);
font-size: 14px;            
color: #00009c;                
border: 2px dotted #26dbfe;
border-radius:40px;
padding: 35px;
margin:1em 20px;
}

Стиль 8
blockquote {
background-image:url(http://i058.radikal.ru/1407/f4/a6fbe0cabe1a.jpg);
font-size: 14px;            
color: #ffffff;                
border: 2px dotted #cc3299;
border-left:7px solid #f00;
border-radius:0px;
padding: 15px;
margin:1em 20px;
}

Стиль 9

.post blockquote { 
margin : 0 20px; 
padding: 70px 20px 20px 40px; 
background : #E4EAFE   url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/angular-purple.gif) no-repeat top left; 
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
text-align:center; 
color : #000;
border-bottom : 5px solid #4156c5; 
}
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}

Стиль 10


blockquote { 
margin : 0 20px; 
padding: 60px 30px 40px 20px; 
background : #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px; 
font-size:14px;
color : #444444; 
border-left: 8px dotted #03b4c8;
} 
blockquote p { margin: 0; padding-top:10px;
}

Стиль 11


blockquote { background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font-size:14px; } .post blockquote p { margin: 0; padding-top: 10px;}

Стиль 12 (на тетрадных фонах)

blockquote {
margin:1em 20px;
background:#;
background-image:url(http://img-fotki.yandex.ru/get/2710/127370258.ef/0_6c01a_2430cba7_S);
border: 2px dotted #ccc;
border-left:7px solid #00009c;
border-radius:0px;
font-size:14px;
color:#044f4e;
padding: 10px;
}

Стиль 13


blockquote {
margin:1em 20px;
background:#;
background-image:url(http://img-fotki.yandex.ru/get/5501/127370258.ef/0_6c027_178b8426_S);
border: 2px dotted #ccc;
border-left:7px solid #800000;
border-radius:0px;
font-size:14px;
color:#800080;
padding: 10px;
}

Стиль 14


blockquote {
margin:1em 20px;
background:#;
background-image:url(http://img-fotki.yandex.ru/get/6005/127370258.ef/0_6c025_25c0a1a0_S);
border: 2px groove #800000;
border-left:7px solid #800000;
border-radius:0px;
font-size:14px;
color:#800080;
padding: 10px;
}

Стиль 15

blockquote {
margin:1em 20px;
background:#;
background-image:url(http://img-fotki.yandex.ru/get/2712/127370258.ef/0_6c01c_605b0763_S);
border: 7px solid #c0c0c0;
border-left:7px solid #03b4cc;
border-right:7px solid #03b4cc;
border-radius:0px;
font-size:14px;
color:#054f04;
padding: 10px;
}

Стиль 16


blockquote {
margin:1em 20px;
background:#;
background-image:url(http://s43.radikal.ru/i101/1407/66/d73b7941bd33.jpg);
border: 0px solid #;
border-top:7px solid #00b2a1;
border-bottom:7px solid #00b2a1;
border-radius:0px;
font-size:14px;
color:#444444;
padding: 10px;
}

Стиль 17 (используйте код 16)




Стиль 18 (так же код 16)




Стиль 19 (тень)


blockquote {
background:#f8f8ff;  
border-top: #4156c5 3px solid;
border-bottom: #4156c5 3px solid;
font-size: 14px; 
margin: 10px 40px;  
color: #444444; 
padding: 15px;
 -moz-box-shadow: 0px 5px 10px #ccc;
  -webkit-box-shadow: 0px 5px 10px #ccc;
  box-shadow: 0px 5px 10px #ccc;
-moz-border-radius: 10px;
border-radius: 10px; 
}


Если с элементом blockquote { цитата не будет отображаться, вставьте  .post-body blockquote { и далее CSS цитаты.




Если в коде отсутствуют такие параметры, можете добавить. Шрифт можно настроить и в редакторе сообщений. Когда выделите текст для цитаты, настройте цвет и размер шрифтов (жирный, наклонный при необходимости).




___________________________
 

Tags :
Технологии Blogger.