Фон для заголовка сообщения

Доброго времени суток, друзья, читатели и гости блога. Как выделить заголовки постов цветом. это совершенно просто.

Но сначала я попрошу вас прочитать пост как изменить стиль гаджетов в блоге, чтобы при необходимости, вы сами смогли, что-то добавить к предложенным сегодня кодам.
Выглядеть это будет так, как показано на картинке выше. Начну с того, что предложу вам 3 варианта такого оформления заголовка. Так что, будет из чего выбирать.

1. Заголовок поста будет оформлен одинаковым цветом на главной странице и на странице всего сообщения. Здесь совсем всё очень просто.

Идём во вкладку шаблон - изменить HTML. Найдите вот такую строчку  <b:skin>...</b:skin> . Она обычно находится в начале кода. Слева нажмите на чёрный треугольник (маркер), где откроются все CSS коды. Тут нужно найти строчку h3.post-title {. Об этом подробно было написано здесь.
И ниже устанавливаем такой код.

margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
text-align:center;
}

2. Фон заголовка поста на главной будет выделен цветом, а при переходе на страницу сообщения фона не будет.

Также в шаблоне находим вот такой код.

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

То что выделено красным цветом нужно будет заменить на этот код.

<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0099DD;color:#000000;'>
<data:post.title/></div>

Здесь посоветую сделать на всякий случай резервную копию шаблона, если что пойдёт не так.

В самом начале поста я давала ссылку на оформления гаджетов. Так вот в этот код можно добавлять ещё стили CSS, которые были предложены в статье. Или любые свои.

3. Фон заголовка сообщения на главной одним цветом, а на странице сообщения другим.

Если установить эти оба кода, которые приведены выше, то и будем иметь такой результат.

Вот так просто оформили фоном заголовок сообщения. Наглядный пример здесь.

Благодарю всех за внимание, спасибо что читаете мои шпаргалки. Удачи и до скорых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email