RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Июл
26

Как уменьшить ширину шапки WordPress?

Шапка сайта – один из важнейших элементов любого веб-ресурса. Расположена шапка вверху страницы и предназначена для того, чтобы пользователь мог понять, какой теме посвящен данный сайт.

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

Ширину шапки сайта на WordPress изменить довольно легко.

Будем рассматривать нашу шапку как состоящую из двух частей:

  • Первая составляющая шапки сайта WordPress — это заголовок сайта и краткое описание сайта на странице.
  • Вторая составляющая шапки сайта WordPress — это изображение.

 

Изменение размеров первой составляющей шапки WordPress.

Открыть админ панель\внешний вид\редактор, в колонке справа находим файл под названием style.css. При открытии этого файла появляется php-код. В этом коде находим строчку /* =Header. В этом фрагменте кода меняем значения на следующие:

#site-title {
padding: 2em 0 0;
}
#site-description {
margin: 0 270px 1.5em 0;
}

Итак, теперь более подробно объясню, что мы изменили. Строка:

#site-title {padding: 2em 0 0;}

отвечает за расположение заголовка сайта на странице. Мы поменяли значение 3.654em на 2em, то есть уменьшили расстояние от верхнего края страницы до заголовка (в нашем примере это «Золотой серфер»).

Строка:

#site-description {margin: 0 270px 1.5em 0;}

отвечает за расположение краткого описания сайта. Мы поменяли значение 3.654em на 1.5em, то есть уменьшили расстояние от края изображения второй составляющей шапки ( в нашем примере это «Лучшие бесплатные CMS интернета»).

Помимо, изменения размера первой составляющей шапки сайта, в части кода под названием  /* =Header , можно отредактировать в строке #site-title a следующие параметры:

  • color: #111;  — строка отвечает за цвет шрифта заголовка сайта.
  • font-size: 30px;  — строка отвечает за размер букв шрифта заголовка сайта.
  • font-weight: bold; — строка отвечает за насыщенность шрифта bold — полужирное начертание, bolder — жирное начертание; lighter — светлое начертание, normal — нормальное начертание.
  • line-height: 36px;  — строка отвечает за межстрочный интервал текста.
  • text-decoration: none; — строка добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.

Такие же, параметры можно отредактировать к строке описания сайта WordPress  #site-description.

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (3) на “Как уменьшить ширину шапки WordPress?”

  • Лёля (1 коммент.) 21 Июль 2014 в 16:44

    Подскажите какую именно часть кода нужно удалить, чтобы убрать заголовок и описание из шапки, а то они мне разделяют саму шапку черной полосой.

    • CMSONY
      CMSONY (172 коммент.) 21 Июль 2014 в 17:15

      Не советую, но если надо то вот такие строчки div id site-title и div id site-description

  • Александр (17 коммент.) 8 Ноябрь 2014 в 21:46

    Добрый день!
    site-description находится посередине шапки, выношу его под название сайта(с помощью margin-left), у меня кнопка(название сайта) неактивна становится.

Оставить комментарий


вверх