пятница, 20 марта 2009 г.

Яркий пост

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

Как выделить отдельный пост в 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'>


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


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

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

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


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


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

  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>

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

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

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


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


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


© 2009 .rb blogspot com

3 Комментариев :

a13x4ndr комментирует...

Интересно... Надо когда-нибудь попробовать!

Tenant комментирует...
Этот комментарий был удален автором.
Tenant комментирует...

Можно реализовать подобное с помощью JavaScript. Мороки будет не меньше, зато один раз. Хотя и тут свои минусы могут быть.

Отправить комментарий

Жги!