Меню

Как изменить цвет темы для вордпресс



WordPress Блоггинг темы. Как изменить Цветовую схему сайта

Наша Команда техподдержки ража представить новый туториал, который покажет, как изменить Цветовую схему WordPress блоггинг темы.

Откройте Внешний вид > Настроить (Appearance > Customize) в вашей админ панели WordPress, выберите Цветовая схема (Color Sсheme):

Вы увидите 2 вкладки: Обычная (Regular) и Инвертированная (Invert) цветовая схема. Обе имеют следующие настройки:

Главный цвет (1) – первая версия основного цвета темы

Главный цвет (2) — вторая версия основного цвета темы

Главный цвет (3) — третья версия основного цвета темы

Цвет текста – цвет текста

Цвет ссылки – цвет ссылок

Цвет ссылки при наведении – цвет ссылок при наведении

Цвет H1 – цвет заголовка H1

Цвет H2 — цвет заголовка H2

Цвет H3 — цвет заголовка H3

Цвет H4 — цвет заголовка H4

Цвет H5 — цвет заголовка H5

Цвет H6 — цвет заголовка H6

Внесите нужные изменения, выберите новые цвета при помощи Инструмента выбора цвета:

Закончив внесение изменений, нажмите на кнопку Сохранить & Опубликовать (Save & Publish):

Выполнив вышеперечисленные шаги, проверьте ваш сайт:

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Похожие записи

Этот урок покажет как создать пункт меню без ссылки (menu separator) в WordPress шаблоне.

We have prepared for you a fantastic selection of 50 best themes, with which you can create a perfect site from scratch.

Из этого туториала Вы узнаете, как изменить скорость прокрутки сайта в WordPress

Submit a ticket

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

Источник

Как поменять цвета на сайте WordPress

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

Я считаю, что поиграв с цветами, можно изменить шаблон WordPress до не узнаваемости. От вас лишь требуется немного креатива, и усилий. В таблице стилей (в папке style.css) цвета Сайта указаны в виде HTML-кода, и чтобы поменять цвета на вашем Сайте, вам нужно для начало узнать HTML-код цвета, который вы хотите заменить. Так будет проще отыскать HTML код, и заменить его.

Итак, выяснить точный HTML-код цвета, который вы хотите заменить, нам поможет программа – Pixie, данная программа очень проста, не требует установки на компьютер, так как программу можно загрузить в виде приложения, и сразу же начать ей пользоваться. Программа – Pixie бесплатная, скачать вы её сможете с официального Сайта. (кликни по фото, чтобы перейти на Сайт, и скачать Pixie)

Выберите вкладку – Как портативное приложение, и нажмите на неё, чтобы скачать программу Pixie. Программа автоматически загрузится на ваш компьютер, в папку для загруженных файлов. Значок программы выглядит вот таким образом:

Читайте также:  Как лучше накрасить ногти каким цветом

Чтобы запустить программу , просто кликните по ней 2 раза. У вас откроется окно программы, в окне программы отображаются параметры цвета, на который вы наведёте курсор мыши. В параметрах есть значение HTML, это как раз то что нам надо.

Зайдите на свой Сайт, наведите курсор мыши на тот элемент, цвет которого вы хотите заменить. Программа Pixie покажет HTML-код цвета, на который вы навели курсор мыши. На примере у меня показан HTML-код Белого цвета, так же и в окошке программы отображается белый цвет.

Скопируйте получившийся HTML-код цвета, либо запишите его куда-нибудь. Теперь зайдите в свою административную панель WordPress, и перейдите по вкладке Внешний вид – Редактор , у вас откроется для редактирования Таблица Стилей CSS.

Затем вам нужно нажать на комбинацию клавиш Ctrl+F , справа вверху у вас откроется поле для ввода информации, в него вам нужно вставить полученный HTML-код, который вы хотите заменить. Вставьте в поле HTML-код и нажмите Enter. На странице редактирования style.css, вам будет показаны все места на вашем Сайте, где имеется данный цвет.

Теперь вам осталось лишь выбрать желаемый цвет, скопировать его HTML-код, и вставить его вместо того цвета который вы нашли в Таблице стилей. Вот сервис где вы можете выбрать цвет для своего Сайта, и скопировать HTML-код данного цвета. (кликни по фото, чтобы попасть на Сайт)

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

Header – Верх вашего Сайта, где находится меню, заголовок, логотип.

Footer – Низ Сайта.

Sidebar, vidget – Сайдбар и виджеты.

Comments – Комментарии.

Typography – Текст, шрифты.

Blog, Content – Блог, контент, основная часть вашего Сайта.

Источник

Как изменить шаблон WordPress (работаем с CSS меняем дизайн)

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

А кто-то просто боится лезть в эти дебри, поэтому либо оставляют стандартный внешний вид шаблона, либо пользуются платными услугами профессионалов для того чтобы изменить дизайн шаблона WordPress. Но поверьте все не так страшно, как кажется на первый взгляд)

Итак, после того как в прошлом уроке мы разобрались с php- структурой нашего шаблона, пришло время перейти непосредственно к оформлению.

Большинство настроек внешнего вида html страниц хранятся в таблице стилей CSS – файлах, отвечающих за отображение элементов нашей страницы.

Данный урок предполагает наличие базовых знаний о CSS. Если вы хотите изучить что такое таблицы стилей и как с ними работать то милости прошу сюда. Там вы найдете бесплатные уроки по CSS и html, которые познакомят вас с основами.

Читайте также:  Электронная сигарета белого цвета

А теперь давайте посмотрим на практике, что мы можем сделать с нашей темой оформления, благодаря правке CSS правил.

Для примера я выбрал стандартный шаблон Twenty Ten, он должен быть в комплекте с установленным вордпрессом.

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

Из инструментов нам понадобятся:

  • Браузер Mozilla Firefox
  • Установить на Мозилу плагин Firebug.
  • Для редактирования можно использовать обычный текстовый редактор, но лучше это делать с помощью Notepad++, там есть подсветка кода, и возможность смены кодировки, так что качаем и его.

Как поменять дизайн шаблона WordPress

После того как все скачано и установлено, открываем наш сайт в Мозиле и запускаем плагин firebug нажав на значек жука.

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

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

К примеру мы имеем такого вида страницу, и хотим изменить цвет панели навигации.

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

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

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

Теперь мы видим, что в коде выбранный нами блок это div с идентификатором “access” В правой части плагина, во вкладке стиль, у нас отображены все свойства для этого идентификатора. Он принадлежит файлу style.css и правило для этого элемента находится на 375й строке данного файла.

За свойства фона у него отвечает строчка background, а конкретно за цвет в сокращенной записи именно этот пункт #000000 Не пугайтесь, это всего лишь шестнадцатеричный код черного цвета 🙂

Кликнув по нему мышью вы сможете отредактировать значение по вашему усмотрению и посмотреть тут же в окне браузера, как изменится элемент страницы. Я например введу #3E6A97 что бы получился грязно-синий цвет этой панельки.

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

Можете поэкспериментировать с разными значениями и элементами. Не бойтесь — внесенные изменения в окне плагина никак не повлияют на вашу страницу на сервере – они действительны лишь в текущем кэше вашего браузера. При обновлении страницы все настройки сбросятся.

Читайте также:  Девушка с красными цветами арт

И как нам сделать так, что бы эти изменения сохранить для страницы на сервере, спросите вы?

Очень просто. Заходим через FTP клиент на наш сайт, переходим в папку с нашей темой, в данном случае это папка wp-content/ themes/ twentyten/ и находим там файл style.css.

Это и есть таблица стилей, где хранятся основные настройки внешнего вида нашего шаблона. Открываем ее с помощью Notepad++ ,находим нужную нам 375-ю строчку с правилом для идентификатора access и заменяем черный цвет на нужный нам #3E6A97.

Сохраняем файл(не забываем про кодировку UTF_8 без BOM) заливаем на сервер измененный файл, обновляем страницу браузера и наслаждаемся результатами)

Что можно изменить в шаблоне WordPress?

  • отображение текста — выделяем фаербагом текст и ищем в стилях его свойства, к примеру font-size: 14px это размер шрифта, color это цвет теста, font-family семейство шрифтов и т.д.
  • width и height размеры элементов длина и высота,
  • border рамки.
  • img картинки и иконки, обычно идут вместе с ссылками
  • margin и padding отступы внешние и внутренние
  • позиционирование элементов
  • background свойства фона
  • И многое другое, для любого элемента вашей страницы можно прописать свои стили.

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

Иногда случается, что стили для отдельных элементов прописываются не в style.css, а в других css-файлах, их название и местоположение вы можете легко увидеть в Firebug и спокойно править эти элементы.

Так же возможно и такое, что для отдельных элементов правила могут прописываться в самом html коде в атрибуте style. В таком случае нужно уже править php файл. Как найти нужный нам php файл мы узнали из предыдущего урока.

Внимание! Прежде чем вносить изменения в вашу тему, настоятельно рекомендую сделать резервные копии всех файлов вашей темы , что бы в случае ошибок вы могли откатить изменения. Ну и конечно же лучше сначала изучить CSS =)

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

Если вы так и не разобрались в тонкостях верстки вашего шаблона или не хотите тратить свое время на это занятие, то можете обратиться ко мне, за скромное вознаграждение я могу отредактировать ваш шаблон под ваши нужды. Писать на email mail@ruskweb.ru

Для тех кто уже знаком с CSS тема может показаться слишком разжеванной, для новичков же слишком сложной, поэтому если есть какие-то вопросы по вашим шаблонам или что-то непонятно, не стесняйтесь, обращайтесь в комментариях 🙂

Ну а теперь пришло время вплотную заняться плагинами и узнать как происходит их установка.

Источник