«Тебе повезло, ты не такой как все...» © Ленинград
Как выделить отдельный пост в 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.
- В редакторе шаблона Макет - Изменить HTML отметь Расширить шаблоны виджета
- Найди строки
<b:includable id='post' var='post'>
<div class='post hentry'> - Добавь идентификатор во вторую строку из предыдущего пункта
<div class='post hentry' expr:id='"rb"+data:post.id'>
- Сохрани шаблон.
Каждое сообщение в блогах на платформе Blogger имеет собственный глобальный уникальный идентификатор. Этот идентификатор и будешь использовать как идентификатор контейнера сообщения, предварительно снабдив коротеньким префиксом, чтобы избежать возможной путаницы с другими виджетами шаблона. Лично я задал префикс rb.
Локальные стили сообщения
Допустим, у тебя уже есть сообщение, которое ты хочешь выделить.
- Обнови главную страницу блога и открой просмотр исходного кода HTML в меню браузера
- Найди свое сообщение в коде. Оно будет заключено внутри контейнера вида:
<div id="rb2861954547900697711" class="post hentry">
...
</div>
Скопируй его идентификатор. В моем случае это"rb2861954547900697711"
. Этот идентификатор сообщения ты теперь можешь использовать для привязки стилей. - Открой редактор сообщения и добавь в него стили для контейнера сообщения, заголовка и т.п. В моем случае это выглядит так:
<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>
Теперь у тебя для выделенного сообщения действуют как глобальные (привязанные к контейнерам class="green-page"
) так и локальные стили (заданные для каждого сообщения отдельно).
Развлекайся :).
© 2009 .rb blogspot com
3 Комментариев :
Интересно... Надо когда-нибудь попробовать!
Можно реализовать подобное с помощью JavaScript. Мороки будет не меньше, зато один раз. Хотя и тут свои минусы могут быть.
Отправить комментарий
Жги!