Яркий пост

«Тебе повезло, ты не такой как все...» © Ленинград

Как выделить отдельный пост в Blogger

Не так давно я открыл рубрику «Зеленые страницы». Закономерно, что мне захотелось выделить сообщения этой рубрики зеленым цветом (как ни странно) в отличие от общей цветовой схемы блога.

Первое, что приходит на ум &ndash это заключить все сообщение внутри специального элемента. Например так:

<div class="green-page">
...Тело поста...
</div>

И для этого элемента и его дочерних элементов задать стили CSS в общих стилях шаблона Blogger.

.green-page {
  background-color:#9FFFA3;
}
.green-page a, .green-page a:link {
  color: #076F0B;
}
.green-page a:visited {
  color: #3E8F42;
}
.green-page img {
  border:1px solid #076F0B;
}

Проблема этого метода в том, что стили будут распространяться только на сам элемент и его вложенные, «дочерние» элементы. А хотелось бы выделить еще и заголовок. К сожалению, CSS в своей текущей инкарнации не поддерживает «родительские» селекторы. Поэтому надо каким-то образом охватить весь контейнер сообщения.

Уникальный идентификатор поста Blogger

Задача – каждому контейнеру сообщения задать уникальный идентификатор, чтобы уже к этому идентификатору привязывать стили CSS.

1. В редакторе шаблона Макет - Изменить HTML отметь Расширить шаблоны виджета


2. Найди строки
   
   

   <b:includable id='post' var='post'>
     <div class='post hentry'>

   
   



Каждое сообщение в блогах на платформе Blogger имеет собственный глобальный уникальный идентификатор. Этот идентификатор и будешь использовать как идентификатор контейнера сообщения, предварительно снабдив коротеньким префиксом, чтобы избежать возможной путаницы с другими виджетами шаблона. Лично я задал префикс rb.



3. Добавь идентификатор во вторую строку из предыдущего пункта
   
   

     <div class='post hentry' expr:id='&quot;rb&quot;+data:post.id'>

   
   
4. Сохрани шаблон.

Локальные стили сообщения

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

1. Обнови главную страницу блога и открой просмотр исходного кода HTML в меню браузера


2. Найди свое сообщение в коде. Оно будет заключено внутри контейнера вида:
   
   

   <div id="rb2861954547900697711" class="post hentry">
   ...
   </div>

   
   Скопируй его идентификатор. В моем случае это "rb2861954547900697711". Этот идентификатор сообщения ты теперь можешь использовать для привязки стилей.


3. Открой редактор сообщения и добавь в него стили для контейнера сообщения, заголовка и т.п. В моем случае это выглядит так:
   
   

   <div class="green-page">
     <style type="text/css">
       div#rb2861954547900697711 {background-color:#EFFFEF; padding: 15px 10px;}
       div#rb2861954547900697711 h3 a {color: #076F0B;}
     </style>
   ...Тело сообщения...
   </div>


Важно: Если у тебя в настройках блога стоит автоматическая расстановка переносов, то стили CSS должны быть вытянуты в одну строку!



<style type="text/css"> ... </style>



4. Сохрани отредактированное сообщение

Теперь у тебя для выделенного сообщения действуют как глобальные (привязанные к контейнерам class="green-page") так и локальные стили (заданные для каждого сообщения отдельно).

Развлекайся :).

© 2009 .rb blogspot com