Выравниваем по центру название блога, заголовки гаджетов и сообщений.


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





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

Давайте посмотрим, как с помощью CSS в шаблоне блога можно это исправить. Идею для этого подсказал автор блога http://www.magentawave.com/.  Расположим все заголовки строго по центру и добавим немного уникальности им. Как обычно, идём во вкладку шаблон и обязательно делаем резервную копию. Если что-то пойдёт не так, вы сможете обратно загрузить шаблон со своего компьютера. А лучше будет, если пока все эксперименты вы будите делать на тестов блоге. Создайте для этого ещё один блог на основе того же шаблона.

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

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


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




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

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

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;
Выделенное синим цветом-внутренняя тень поля названия.

Посмотрите, пожалуйста здесь, что у меня получилась используя именно эти значения.

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

Так же спускаемся ниже и находим такую строчку .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 ...:


35 комментариев:

  1. Большое спасибо!!! Вы гений))

    ОтветитьУдалить
  2. Анна, я не волшебник, я только учусь. Спасибо за спасибо.

    ОтветитьУдалить
    Ответы
    1. Кстати, ваш ответ должен был прийти на почту мне? Он не пришел:)

      Удалить
    2. Да, Анна. Сейчас эта проблема в Блоггере и о ней знают. Решат возможно. Это не только у Вас.

      Удалить
  3. Вика,огромное спасибо!Всегда с большим удовольствием читаю Ваши статьи,они вносят какое-то разнообразие в оформление блога.

    ОтветитьУдалить
  4. Римма , приятно слышать, что мои шпаргалки хоть чем-то помогают. Что знаю тем делюсь. Спасибо за спасибо.

    ОтветитьУдалить
  5. Вика, я вместо шапки сделала слайдер, а название хочу выровнять по центру. Но как в шпоргалке не получается?

    ОтветитьУдалить
  6. Олеся. Это совсем другой случай. Посмотрела на слайдер. Дело твоё конечно, если он тебе так нужен то я бы его поставила в гаджет под шапкой блога. И что-то у тебя над ним адрес блога.

    ОтветитьУдалить
    Ответы
    1. Если ставлю под заголовок, то пропадает рамка и не красиво, т.к. слайдер поуже, а в настройках чуть расширить не могу, т.к. он "резиновый". Адрес поменяю на приветствие, это заголовок гаджета, без него рамка сверху пропадает) Так можно стиль названия как-то поменять? Или сложно?

      Удалить
    2. Читай там же у Наташи эту статью http://shpargalkablog.ru/2010/07/kartinku-v-zagolovok-bloga.html. Может получится.

      Удалить
    3. Выровняла. Надо будет еще над заголовками гаджетов поколдовать.

      Удалить
    4. А как скруглить углы верхнего футура?

      Удалить
    5. Извини, в процессе работы забываю написать, подскажи пожалуйста!)

      Удалить
    6. Олеся, Футер у блога один. Он же подвал. Так что я не совсем поняла верхнего футера. А так за округление углов отвечает свойство border-radius: 13px;(любое числовое значение)

      Удалить
  7. Извини, не правильно выразилась - фон верхнего колонтитула, его цвет я могу поменять (шаблон<настроить), а вот куда вставить border-radius: 13px; не понимаю.

    ОтветитьУдалить
    Ответы
    1. Попробуй так. У тебя в шаблоне строка 210 прописано 0. Поменяй это значение. Попробуй сначала 5 или 10 и просматривай сразу.

      Удалить
  8. 210 строчка пустая, а потом что-то про бордюры.

    -moz-border-radius: $(header.border.radius);
    -webkit-border-radius: $(header.border.radius);
    -goog-ms-border-radius: $(header.border.radius);
    border-radius: $(header.border.radius);
    }

    .Header img, .Header #header-inner {
    -moz-border-radius: $(header.border.radius);
    -webkit-border-radius: $(header.border.radius);
    -goog-ms-border-radius: $(header.border.radius);
    border-radius: $(header.border.radius);
    }

    ОтветитьУдалить
    Ответы
    1. Найди вот это.header-outer {
      background: #99ccee none repeat-x scroll top left;
      _background-image: none;
      color: #ffffff;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      -goog-ms-border-radius: 0;
      border-radius: 0;
      }

      Удалить
  9. У меня код такой, меняла на 5 и 10, ничего не меняется.
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
    _background-image: none;

    color: $(header.text.color);

    -moz-border-radius: $(header.border.radius);
    -webkit-border-radius: $(header.border.radius);
    -goog-ms-border-radius: $(header.border.radius);
    border-radius: $(header.border.radius);
    }
    Думаю, что и без скругленных углов выживу.) Может попробую потом картинку грузануть?

    ОтветитьУдалить
  10. Вот после border-radius: надо добавить 13px; и всё. Чтобы была строка такого вида
    border-radius:13px; $(header.border.radius); По аналогии с этим http://www.shpargalochki.ru/2015/02/izmenit-stil-gadzhetov.html

    ОтветитьУдалить
    Ответы
    1. Спасибо, Вика, у меня получилось. Я не правильно вставляла.
      Вот так поняла )
      border-radius:15px; $(header.border.radius);
      Класс!

      Удалить
    2. А про что я тебе тут толдычила, Олеся. Потом забегу, гляну.

      Удалить
  11. Здравствуйте. Использовала Ваш код для изменения положения названия. Получилось, что на странице About,Contacts и на главной сместилось не только название, но и гаджеты. Подскажите, пожалуйста, что делать? Буду очень благодарна. http://brightquietness.blogspot.ru/

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

    ОтветитьУдалить
  13. Да, Мария. Есть такая проблема у Вас.Но это не из-за кода выравнивания. Бывает такое. Недавно у Олеси (комментатор выше) была такая же проблема. Всё исправили.Внимательно прочитайте вот эту статью http://shpargalkablog.ru/2011/09/perestala-otobrazhatsya-bokovaya-panel.html

    ОтветитьУдалить
  14. Этот комментарий был удален автором.

    ОтветитьУдалить
  15. Виктория, подскажите, как создать тестовый блог, чтобы на нем проводить все эксперименты, если я не помню, какой шаблон использовала для создания своего блога. Можно это как-то определить?

    ОтветитьУдалить
    Ответы
    1. Ирина, всё просто . Возьмите любой шаблон. Или корпарация чудеса, или простая, или венецианское стекло.. Только не динамический. Шаблоны практически все одинаковые. Я тоже на тестовых блогах беру разные. Венецианское стекло нравится. Из них из каждого можно конфетку сделать. А для тестов как раз самое то.

      Удалить
  16. СПАСИБО, ВИКТОРИЯ! Буду на тестовых блогах тренироваться! Если будет получаться, сделаю в своих 2-х блогах!

    ОтветитьУдалить
    Ответы
    1. Обязательно надо пробовать на тестовых, пока придт понимание того, что делаете. А то основной блог и загубить можно. Удачи Вам. Обращайтесь, если что.

      Удалить
  17. Здравствуйте, Виктория! Я сделала по центру заголовки гаджетов в боковой панели в тестовом блоге (сегодня его создала) и в блоге "Волшебный фонарик", а в блоге "БЛОГ КОТА ВАСЬКИ" не могу найти строку .sidebar.widget h 2}! Что делать?

    ОтветитьУдалить
    Ответы
    1. Ирина, здравствуйте. Да, нет у Васьки такой строчки. Прочитайте вот этот участок в сообщении В зависимости от шаблона блога вполне возможно, что некоторых элементов вы у себя не найдёте. Значит нужно просто перед строкой ]]>, которая находиться чуть ниже всех этих кодов CSS, вставляем все стили. Обратите внимание, что все они заключены в фигурные скобки. Вот так примерно

      Удалить
  18. СПАСИБО! Я попробую! Если не получится, пусть остается все, как есть. Просто в блоге "Волшебный фонарик" (смогла сама определить) у меня стоит шаблон "Корпорация "Чудеса" ( я в тестовом блоге "БиблиоИрина" тоже поставила этот же шаблон), в в блоге "Блог Кота Васьки" у меня простой шаблон оказался.

    ОтветитьУдалить
  19. Здравствуйте! Попробовала сделать как в описании, но название блога по-прежнему ориентируется по левому краю блога. Подскажите как быть!
    http://eternia-sama.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Ольга. У шапки блога на Blogger id='header-inner' . В шаблоне нужно вот так написать.
      .#header-inner h1 {
      overflow: hidden;
      line-height: 200px; /* текст по центру по вертикали */
      text-align: center; /* текст по центру по горизонтали */
      position: relative;
      }
      #header-inner h1:before {
      content: url(адрес картинкиgif);
      }
      #header-inner h1:after {
      content: url(адрес картинкиjpg);
      position: absolute;
      transform: translate(100px, 0px); /* смещение её вправо */
      }

      Если картинку добавляли через вкладку дизайн то в шаблоне же пишем

      #header-inner {
      position: relative;
      }
      #header-inner:after {
      content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif);
      position: absolute;
      top: 20px; /* ваши значения */
      left: 50px; /* ваши значения */
      }
      Пробуйте найти сначала оптимальное положение на тестовом блоге.

      Удалить

Пользовательский поиск