В принципе, селекторов для манипуляций с блоком постов в стандартном шаблоне Blogger более чем достаточно, но обычно, для изменения дизайна хватает всего нескольких:
- .date-outer - селектор всего блока сообщения, что называется: "с потрохами". В нем расположены все остальные блоки - начиная с даты сообщения и заканчивая комментариями;
- .post-outer - блок сообщения, но уже без даты;
- .post - селектор внутреннего блока поста, который уже не включает в себя комментарии;
- h3.post-title - в помощью этого селектора можно изменить оформление заголовка сообщения.
- .post-body или .entry-content - сообщение, без заголовка, подвала и т.д.
В шаблоне, блок поста записан так:
- .post-footer - "подвал" сообщения, тут находятся ссылки на профиль автора, дата создания, действия, ярлыки и т.д.<div class="post-body entry-content" id="post-bod...
По-этому можно использовать любой селектор для оформления поста, как .post-body так и .entry-content.Внутри, блок "подвала" дополнительно делится на секции - .post-footer-line, в которых и расположены элементы функционала и в случаи необходимости ими тоже можно управлять с помощью CSS. Каждая секция, кроме общего имеет также и собственный селектор:
- post-footer-line-1;
- post-footer-line-2;
- post-footer-line-3.
В коде это выглядит примерно так:
- post-footer-line-1;
- post-footer-line-2;
- post-footer-line-3.
В коде это выглядит примерно так:
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
...
</div>
<div class="post-footer-line post-footer-line-2">
...
</div>
<div class="post-footer-line post-footer-line-3">
...
</div>
</div>
<div class="post-footer-line post-footer-line-1">
...
</div>
<div class="post-footer-line post-footer-line-2">
...
</div>
<div class="post-footer-line post-footer-line-3">
...
</div>
</div>
Теперь, применяя различные CSS свойства, к приведенным выше элементам, вы можете самостоятельно сделать уникальный дизайн сообщений в своем Blogger-блоге.
©http://magentawave.com
Дальше по теме
Можно ли оградить, с помощью "border", две секции: post-footer-line-1 и post-footer-line-2(в одну общую рамку) от post-footer-line-3.
ОтветитьУдалитьМожно ли ограничивать секции с помощью post-footer-line-3
Спасибо за статью !!!
Вы можете самостоятельно, дополнить или изменить HTML разметку блога в разделе админ-панели "Шаблон" -> "Изменить HTML" не забывайте предварительно сохранять шаблон до несения изменений. Т.е. вы можете объединить эти два блока в одном, новом с отличным от других селектором и задать ему необходимые элементы оформления.
УдалитьСпасибо, все получилось.
Удалить