Как сделать по центру название блога заголовки гаджетов и сообщений

Приветствую всех. Обращали ли вы внимание на то, что при оформлении дизайна название блога, заголовок сообщения и заголовки гаджетов расположены не по центру.

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

Давайте посмотрим, как с помощью CSS в шаблоне блога можно это исправить. Расположим все заголовки строго по центру и добавим немного уникальности им.

Как обычно, идём во вкладку шаблон и обязательно делаем резервную копию. Если что-то пойдёт не так, вы сможете обратно загрузить шаблон со своего компьютера. А лучше будет, если пока все эксперименты вы будите делать на тестов блоге. Создайте для этого ещё один блог на основе того же шаблона.

Как выровнять по центру название блога.

Вкладка шаблон - изменить HTML. В самом верху шаблона нажимаем на чёрный маркер (стрелочку) слева.

И вот тут перед нами открылись все коды  CSS. Спускаемся медленно вниз и находим строку .Header h1 { 

Сразу после скобок прописываем значение

 text-align:center;

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

Но, чтобы немного разнообразить дизайн, разберём ещё несколько стилей CSS, которые можно добавить в эти скобки. Нужно это вам или нет решайте сами. Тут масса вариантов. Меняйте цветовые значения.

background:#e9967a;- цвет фона.
или background:url (http://www.fonstola.ru/large/201310/134392.jpg); картинка вместо фона.
height:50px; - значение ширины блока названия.
text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); - задаём тень для текста
border-radius: 15px; - закругление углов.
-moz-box-shadow:0 0 30px #a28b53 inset;
box-shadow:0 0 30px #a28b53 inset;                            
-webkit-box-shadow:0 0 30px #a28b53 inset;

Выделенное синим цветом - внутренняя тень поля названия. Только будьте внимательны. Если меняете цвет, то только вот это  #e9967a (решётка и шестизначное число). Двоеточие, скобки, тире, точка с запятой - всё очень важно в коде.

Как выровнять по центру заголовок гаджета в боковой панели.

Так же спускаемся ниже и находим такую строчку

.sidebar .widget h2 { 

В скобки прописываем  text-align: center; Однако, в этом случае, необходимо задать ширину, размер шрифта, отступы. Здесь я вместо фона использовала изображение и задала тень для текста и блока.

background:url(http://www.fonstola.ru/large/201310/134392.jpg);фон или изображение
height:20px;
width: 200px;
border-radius: 13px;
margin-left: 0px;
padding-top:0px; / расстояние от края рамки/
font-size: 16px; /размер шрифта/
text-align: center; /расположение текста/
text-shadow: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10); /тень для текста/
box-shadow: 0 4px 6px rgba(0, 0, 0, .2); /тень для блока/

Как выровнять по центру заголовок гаджета в футере.

Находим строку

 .footer-inner .widget h2 {

Прописываем те же самые стили. 

Как выровнять заголовок поста по центру

Ищем строчку h3.post-title {

В моём блоге отдельно таковой не было, а была вот такая
h3.post-title h4, посмотрите на скриншоте. В этом случае измениться и заголовок комментариев. 

Конечно, если вы не меняли теги заголовков. То именно эта строка и понадобиться. Выравниваем, прописав в скобки следующее -

text-align:center;

text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); Это значение для тени текста. Если не нужно просто оставьте первую строчку. 

В зависимости от шаблона блога вполне возможно, что некоторых элементов вы у себя не найдёте. Значит нужно просто  перед строкой ]]></b:skin>, которая находиться чуть ниже всех этих кодов CSS, вставить все стили. Обратите внимание, что все они заключены в фигурные скобки. Вот так примерно

.sidebar .widget h2 { 
background:url(http://www.fonstola.ru/large/201310/134392.jpg);
height:20px;
width: 200px;
border-radius: 13px;
margin-left: 0px;
padding-top:0px;
font-size: 16px;
text-align: center;
text-shadow: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10);
box-shadow: 0 4px 6px rgba(0, 0, 0, .2);}

И так со всеми остальными.

Пост сегодня получился достаточно длинным. Благодарю тех, кто дочитал его до конца. Как бы того мы не хотели, но придёт момент, когда  придётся начать понимать что это за коды, где они расположены и что с ними можно делать.

А я сегодня поставлю точку в сообщении и расстанусь с вами на некоторое время.

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

Введите Ваш email ...: