Шаблон Twenty Twelve. Изменить цвет меню, цвет хедера, футера.

Twenty Twelve изменить цвет меню, хедера, футера

Здравствуйте!

Сегодняшняя статья публикуется в рамках предложения от моего блога: WordPress помощь.

Ко мне обратился читатель блога Михаил и попросил помочь ему с шаблоном Twenty Twelve. Возникшие вопросы: как изменить цвет пунктов меню, фона меню, фона хедера, фона футера. Как добавить меню в футер. Собственно, ответы на эти вопросы будут изложены в данном посте.

Итак, на локальном компьютере я активировал себе шаблон Twenty Twelve.

Меню изначально выглядит вот так:

 

Меню шаблона Twenty twelve

 

Все изменения стилей будут делаться в файле /wp-content/themes/twentytwelve/style.css

Удобней всего открывать его локально с помощью вашего любимого редактора (использую сейчас PhpStorm).

Можно открыть файл и через админку WordPress: Внешний видРедактор – в правой колонке внизу СтилиТаблица стилей (style.css).

Также можно вносить изменения в файл непосредственно на сервере, используя программу WinSCP.

 

Как изменить цвет фона меню

В файле style.css найдите описание следующего стиля. Можно искать по ключу “Navigation Menu”.  (у меня начиналось в строке 578)

Добавьте в стиль свойство backround-color и задайте ему нужный вам цвет фона меню.

 

Изменение цвета фона меню в шаблоне Twenty Twelve

 

Как изменить цвет активного пункта меню

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

 

Изменение цвета активного пункта меню. Шаблон Twenty Twelve.

 

Найдите следующий блок стилей по ключу “current_page_item”.

Измените значение свойства color на нужное.

 

Как изменить цвет всех пунктов меню

Найдите следующий код по ключу “.main-navigation li a

Задайте нужное значение свойству color. Я присвоил цвет limegreen.

Изменение цвета всех пунктов меню. Шаблон Twenty Twelve

 

Как изменить цвет отдельного пункта меню я уже писал ранее. В Twenty Twelve можно действовать аналогично.

 

Как изменить цвет пункта меню при наведении на него указателя мыши

В предыдущем пункте вы нашли фрагмент кода и сразу за ним идет стиль, задающий цвет пункта меню при наведении на него мыши или фокуса (если “ходить” по пунктам меню с помощью клавиши Tab)

 

Изменить цвет пункту меню при наведении указателя мыши. Шаблон Twenty Twelve

 

 

Как изменить цвет фона хедера

Добавьте свойство background-color и задайте ему значение.

 

Как изменить цвет фона футера

Добавьте свойство background-color и задайте ему значение.

 

Изменить фон всей страницы

Найдите в style.css (ближе к концу файла) вот этот стиль и задайте нужный background-color

Изменить цвет  белого “листа” шаблона Twenty Twelve.

 

Как разместить меню в футере

Если вы хотите сделать в футере шаблона Twenty Twelve разместить такое же меню, как и в хедере, то нужно из файла шаблона header.php скопировать код вывода меню и добавить его в footer.php.

Оба файла расположены в папке шаблона: /wp-content/themes/twentytwelve/

Итак, в файле header.php, практически в самом низу, найдите фрагмент кода:

Скопируйте его (Ctrl+C) и вставьте его в файл footer.php

после <footer id=”colophon” role=”contentinfo”

перед <div class=”site-info”>

Указанный выше способ, подойдет в случае, если вы хотите, чтобы меню в хедере и в футере отличалось. Тогда в футере, можно изменить class=”main-navigation”, например, на class=”footer-navigation”. И добавить (продублировать) нужные стили в style.css уже для класса footer-navigation. Таким образом, вы сможете задать различные цвета для пунктов меню в хедере и футере.

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

Создайте в папке шаблона файл menu.php. Вставьте в него код меню (фрагмент кода, который вы копировали в футер).

В header.php и footer.php вместо кода меню вставьте

Например, вот так будет выглядеть ваш footer.php

Теперь любое изменение в menu.php будет отражаться сразу и на футер и на хедер.

Надеюсь, все понятно изложил.

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

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

20 комментариев к записи “Шаблон Twenty Twelve. Изменить цвет меню, цвет хедера, футера.”

  1. Михаил

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

    • Алексей Ершов

      Михаил, успехов в изучении WordPress!
      За первый комментарий к статье получаешь 15 WMR. Делай репост статьи в любую из соцсетей и присылай мне номер R-кошелька куда перечислять приз.

  2. Елена

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

    • Алексей Ершов

      Здравствуйте, Елена!
      Изменить цвет фона темы:

      Спасибо за отклик и вопрос! Дополнил статью.

  3. Михаил

    Здравствуйте , Алексей !
    Очень полезная для меня информация . Удачно зашел .
    Не подскажите как сделать меню во всю страницу (по длине)?
    И может подскажите как установить готовый фон (картинку) всей страницы ? Как правильно это все прописать и куда ?
    Заранее спасибо , Михаил .

  4. Вячеслав

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

  5. Вячеслав

    как сделать меню рядом с логотипом (с права) в одной строке

  6. alezgo

    Помогите, как изменить цвет ссылок (текст и подчеркивание) в этой теме???

  7. Анастасия

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

  8. Ирина Иванькина

    Алексей! Меняю в файле body background f1f1f1 на 444.Получаю черный цвет. Подскажите, пожалуйста, где ошибка, и как ее можно исправить. Черный цвет мне как-то не нужен.Спасибо.

    • Алексей Ершов

      Ирина, о каком сайте или шаблоне идет речь? Нужно смотреть конкретный пример.

    • Алексей Ершов

      Ирина, все верно у Вас меняется. 444 – это не черный, а темно-серый цвет и он близок к черному. Задайте 888 – серый посветлее или подберите другой нужный Вам цвет фона.

  9. Ирина Иванькина

    Здравствуйте, Алексей! Следуя Вашему уроку, не могу при наведении указателя мыши на названия статей изменить цвет с красного на светло-синий, а цвет меню “контакты” с черного на темно-синий. Буду признательна за помощь.

    • Алексей Ершов

      Здравствуйте, Ирина!
      Попробуйте так:
      1. Цвет ссылки на статью при наведении указателя мыши:

      2. Цвет фона меню “Контакты” при наведении указателя мыши:

      Эту нужно добавить(исправить) в файле *.css вашего шаблона. Вместо blue указывайте нужный цвет.

  10. Ирина Иванькина

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

    • Алексей Ершов

      Здравствуйте, Ирина!
      Заочно не всегда удается дать сразу верный ответ, нужно проверять результат. Если хотите, то можете написать мне на почту доступы и что конкретно нужно сделать. Я внесу необходимые изменения у Вас на сайте и напишу где их выполнил, а нужные цвета Вы подберете самостоятельно.

    • Алексей Ершов

      1. Фон пункта меню при наведении курсора меняется здесь:

    • Алексей Ершов

      2. Фон активного пункта меню. Добавил в этот код свойство background:

  11. Ирина Иванькина

    Гениально, Алексей! Спасибо большое!Оперативно, профессионально,КЛАССНО!Блог преобразился, несмотря на то, что еще восстанавливать и восстанавливать…Хочу к Вам в ученики!

  12. Влад

    Здравствуйте, Алексей! Можете подсказать как разместить в футере (тема твенти твелв) несклько записей ,например, логотип, контакты и т.д. У меня поучилось разместить в центре логотип ,а по сторонам контакты и другую инфу, но в этом случае все съезжает в разные стороны ( что-то вниз,а что-то вврех) никак не получается чтобы все на одном уровне было. Такая же проблема и в шапке сайта,т.е логотип я разметил слева . Он отлично там встал, но сейчас мне потребовалось разместить там некоторые данные , и когда я туда добавляю тескт, то все опять поехало. Помогите, пожалуйста!!!

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

Для размещения кода в комментарии используйте теги <pre> </pre>, например:


Подписаться, не комментируя