Меню

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



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

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

Из этого урока, Вы узнаете:

  • как изменить размер шрифта;
  • как сделать шрифт более контрастным;
  • как изменить цвет шрифта;

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

Корректировка шаблона WordPress

Все эти манипуляции (изменения) можно делать через браузер Mozilla Firefox или Google Chrome. Щелкните в панели меню » Инструменты » -> » Дополнения «. Теперь в поисковой строке введите » Web Developer «. После поиска Вам нужно выбрать дополнение » Web Developer 1.2.1 «. Web Developer — это дополнение к браузеру Mozilla Firefox. Если по каким-то причинам Вы не можете найти это дополнение, тогда скачайте и установите его с этого сайта .

Щелкните » Установить «. После того, как это дополнение установится, нужно щелкнуть по ссылке » Перезапустить сейчас «. Браузер Firefox должен перезагрузиться. Все, дополнение к браузеру мы установили. У Вас в браузере должна появиться дополнительная панель, под адресной строкой.

Теперь нужно скачать программу для определения HTML-цветов.

Скачайте программу HTML Colors 2000. Библиотеку msvbvm50.dll я уже добавил в архив. Что с этой библиотекой делать написано в архиве, файл Readme.txt. Теперь у нас все готово для корректировки шаблона.

Прежде чем начинать редактировать стиль шаблона, сделайте резервную копию файла style.css! Щелкните » CSS » -> » Display Style Information » на панели, которая находится под адресной строкой браузера.

У Вас появится дополнительное окно внизу экрана. Если Вы считаете, что окно внизу экрана не очень удобно, то Вы можете его переместить в другое место. Для этого нужно щелкнуть с левой стороны дополнительного окна по значку в виде таблички и выбрать: left (слева), right (справа) или top (сверху).

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

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

Здесь видно, что за размер шрифта отвечает 57 линия. Теперь Вам нужно открыть файл style.css редактором Notepad++ и перейти на 57 линию, чтобы изменить размер шрифта. За размер шрифта отвечает строка font-size: 14px;

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

Main Content переводится как — главное содержание

  1. Стрелка №1 указывает на строку, которая отвечает за цвет шрифта
  2. Стрелка под №2 указывает на строку, которая отвечает за размер шрифта в статьях (эту строку пришлось добавить, потому что ее вообще не было)
  3. Стрелка под №3 указывает на строку, которая отвечает за цвет фона в тексте.

Определять цвета можно с помощью программы HTML Colors 2000, которую мы скачивали с сайта. Работает она просто. Программа не требует инсталляции на компьютер. Кликайте на ярлык HTML Colors 2000 чтобы запустить программу. Появится следующее окно:

  1. В это поле нужно вписать HTML-код цвет.
  2. Передвигая ползунки слева, можно менять цвет.

Если щелкнуть по кнопке «More» – появится окошко с цветами.

Посмотрите видео, как можно быстро изменить цвет и размер шрифта.

Точно так же можно менять цвет ссылок и всего, что только захотите. Я в своем шаблоне сделал ближе друг к другу название страниц: О себе, рекомендую, карта блога и т.д. Если Вы посмотрите, то сразу заметите, что они достаточно близко друг к другу находятся. Шрифт в шаблоне у меня был очень мелкий, около 11-12px, так я его увеличил до 17px. :). Давайте теперь рассмотрим, как можно быстро сменить фон шаблона.

Быстрое изменение фона шаблона WordPress

Перейдите по этой ссылке . Вы увидите следующее окно

В этом окне Вы можете выбрать рисунок для будущего фона в шаблоне WordPress. Рассмотрим настройки этого окна:

  1. Image opacity — настройка прозрачности рисунка. Если щелкнуть по цифре процентов — появится ползунок, который надо передвигать для изменения прозрачность рисунка.
  2. Image scale — Здесь можно изменить масштаб рисунка. Также появляется ползунок, который надо передвигать.
  3. Location — здесь можно изменить количество элементов в рисунке.
  4. Предварительный просмотр
  5. Скачать изображение на компьютер
  6. Изменяя разные параметры, меняется и сам вид рисунка в реальном времени.

  1. Foreground — цвет переднего плана
  2. HTML-код цвета
  3. Background — цвет фона
  4. Swap color — поменять цвета местами

  1. Значок в виде знака бесконечности закрепляет между собой горизонталь и вертикаль рисунка, за счет чего рисунок сохраняет свои пропорции, когда Вы изменяете его размеров. Если щелкнуть по этому значку — можно будет менять отдельно горизонталь или вертикаль рисунка.
  2. При щелчке появляется ползунок, с помощью которого можно изменять размер холста.
  3. Изменяет контрастность холста (непрозрачность)

Остался последний параметр — это вращение рисунка (Rotation)

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

Перед сохранением рисунка, щелкните «предварительный просмотр», и, если Вас все устраивает, жмите «Сохранить«. Размер сохраненного файла 190х190 и расширение PNG. Если файл фона в Вашем шаблоне имеет другое расширение, тогда Вам нужно будет через Фотошоп изменить расширение файла на такое же, как в Вашем шаблоне.

Если из этого урока Вам ничего не понятно – спрашивайте в комментариях 🙂

____________________________________
К уроку 75. Эффективные способы для ускоренной индексации сайта

Читайте также:  Почему бортовые номера разных цветов

Источник

Как редактировать шаблон wordpress самому?

Шаблон – это одежка блога, а по одежке, как известно, встречают. С просьбой о создании уникального дизайна можно (и даже нужно!) обратиться к профессионалу, но мы прекрасно понимаем, что не у каждого есть на это средства. Да и желание их тратить тоже.

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

Ниже я на примере шаблона Xmarkup из бесплатного курса «Как сделать блог за час» приведу способы, как можно подправить оформление блога самостоятельно. Я не буду описывать более сложные элементы CSS и кода jQuery – уроки по ним можно найти самостоятельно в интернете – расскажу только базовые понятия, освоить которые под силу каждому.

Главное – не бойтесь экспериментировать!

Структура шаблона WordPress .

Описание некоторых файлов темы и возможностей их редактирования:

Файл style . css и изменение внешнего вида шаблона.

Основные селекторы CSS .

Добавление новых элементов в шаблон блога.

Изображения в шапке;

Баннера в single.php;

Замена исходных изображений.

Структура шаблона WordPress .

По запросу «темы вордпресс скачать» Гугл выдает нам тысячи вариантов сайтов. От обилия выбора разбегаются глаза – бесплатные и платные, адаптированные и нет, белые, серые, коричневые, стилизованные и современные темы. Одни нравятся, другие очень нравятся. У одних в коде заложены лишние ссылки, другие написаны на английском языке… Как уж тут выбрать =)

Количество файлов шаблонов в каждой из тем может различаться, однако существует «костяк», всегда остающийся неизменным. Откроем папку с темой Xmarkup:

Из всех этих файлов можно выделить основные элементы:

Папка Images – изображения, используемые в шаблоне.

Js – папка со скриптами.

Style . css – файл, который описывает внешний вид блога.

Screenshot – скриншот темы. Отображается в разделе «Внешний вид/Темы».

name. php – шаблоны различных элементов темы. Количество их в зависимости от фантазии создателя в разных темах может быть различным. Вот основные:

«Страница не найдена» — страница ошибки 404

Страница сайта

Наглядное изображение страницы блога и шаблонов, ее составляющих. Похоже на пазл, не правда ли?

Редактировать шаблон темы можно двумя способами:

— через админку: «Внешний вид/Редактор/…»;

скопировав на компьютер и открыв блокнотом N otepad++ (рекомендуется) .

! Внимание. Перед исправлением любых файлов шаблона не забывайте создавать его резервные копии!

Описание некоторых файлов темы и возможностей их редактирования

Header . php – один из основных файлов шаблона, задействованный практически на всех страницах блога. Он отвечает за отображение шапки блога, главного меню, дает возможность прикреплять виджеты и т.п.

Если рассмотреть код, ясно видно, что типовый хэдер состоит из нескольких разделов:

Код DOCTYPE – указывает на тип документа, необходимо для корректного отображения страницы браузерами:

Информация об языке :

Тег head >… head > содержит техническую информацию, помогающую браузеру и поисковикам:

Мета-теги кодировки, отображения на мобильных устройствах и т.д;

Мета-тег title – текст, который отображается в заголовке браузера – название блога и постов:

Мета-тег, указывающий ключевые слова и описание страницы. Часто его заменяют плагином All in one SEO pack ;

Связь с внешними документами: фавикон, rss фид, файл стилей, шаблон оформления и т.п.

link rel =»как относится документ к текущему» href =»путь к файлу»/>

Теги, подключающие внешние скрипты и их библиотеки — ;

Код, обеспечивающий работу плагинов:

Тег body > — все, что выводится на экран компьютера:

Шапка блога – вывод изображения или текста

Тег, выводящий название блога:

Главное меню блога:

Таким образом, для уникализации внешнего вида шаблона в файле header . php мы можем сделать следующее:

— настроить отображение и стиль текста или картинки в заголовке;

— изменить основное меню блога и его расположение относительно шапки блога;

— по желанию добавить картинку-кнопку или рекламный баннер.

Большая часть этих действий не требует прямого вмешательства в код шаблона – достаточно вносить изменения в админке: «Внешний вид/Настроить».

В файле шаблона WordPress footer . php задается отображение нижней части блога – так называемого «подвала».

Код, обеспечивающий работу плагинов. Аналогичный находится и в header . php . Если какой-либо плагин не действует, первым делом стоит проверить наличие этих двух кодов.

Копирайты – указание авторства, год создания блога – со ссылкой на главную страницу

Год также можно добавлять с помощью php-кода ( ). Но лучше вводить временные рамки самостоятельно, иначе блог будет «вечно молодой». Хотя это уж кому как нравится =)

Дубль главного меню :

Виджеты. Сначала идет проверка, есть ли в наличии виджет. Если есть – выводится. Пример: счетчик посещаемости Liveinternet . Добавляется: «Внешний вид/Виджеты/Код счетчика посещаемости»

Ссылка на разработчиков данного шаблона Вордпресс

По желанию, в «подвал» блога можно поместить виджеты, не влезшие в сайдбар. Для этого надо просто перенести соответствующие куски кодов из файла sidebar . php .

По умолчанию через админку в футер ставится блок с контекстной рекламой: «Внешний вид/Виджеты/Текст/Контекстная реклама»

Что можно сделать для уникализации:

— изменить стиль написания и расположения;

Универсальный элемент шаблона, выводящий главную страницу блога. Иногда носит название home . php .

При этом его функции разделяют и другие файлы: отдельные записи выводит single . php ; статичные страницы — page . php ; архивы — archive . php ; страницу ошибки — 404. php .

Основной шаблон index . php очень важен, он соединяет в единое целое шапку блога, сайдбар и футер + записи блога.

Из чего состоит основной шаблон:

Код подключения хэдера:

Вывод ленты статей блога:

В каждом посте стабильно повторяются:

— описание сообщения: дата и время, автор, рубрика, наличие комментариев. При этом, заголовок является ссылкой на сообщение.

— кнопка-ссылка на комментарии и кнопка «Читать», разворачивающая статью полностью

Что можно менять в файле index . php :

— формат даты и времени;

— подключать или убирать сайдбары.

Как правильно ввести дату и время:

j – день месяца цифрами – 1, 2, 3. ;

S – суффикс английского порядкового числителя ( second = 2 nd и так далее);

m — обозначение месяца цифрой с нулем впереди (02, 04, 11);

n – обозначение месяца цифрой без нуля (2, 4, 11);

y – последние цифры года (90, 14);

H – время в 24-часовом формате с нулем впереди (01, 02, …, 23, 24);

h – время в 12-часовом формате с нулем впереди (01, 02, …, 11, 12);

G – время в 24-часовом формате без нуля впереди (1, 2, … 23, 24 (;

g – время в 12-часовом формате без нуля впереди (1, 2, …, 11, 12);

I – минуты (15, 50).

Сайдбар выводит на одну или несколько (бывает до 4х) боковых колонок элементы навигации по блогу и необходимую информацию. В нем можно размещать различные виджеты.

Пример сборки сайдбара:

Форма подписки на блог;

Виджеты можно редактировать, в админке в разделе: «Внешний вид/Виджеты». Там же их можно выбрать, добавить свои собственные и расставить в необходимом порядке.

Составные части sidebar.php :

Подключение к шаблону

Возможность добавления виджетов


При желании виджеты можно прописать в файле sidebar . php вручную.

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

Имя _ файла .php”);? >

Как уникализировать сайдбар:

— добавить завлекающую картинку-ссылку на страницу захвата;

— подобрать свой набор виджетов;

— изменить местоположение колонки;

— сделать 2 и более сайдбаров;

— изменить внешний вид.

Файл single . php отвечает за отображение записей блога.

Традиционное подключение шапки блога:

Читайте также:  Фреон для холодильника какого цвета

Блок записи может включать в себя:

Указание даты и времени публикации

Указание автора публикации

Наличие и количество комментариев

Название записи и ее текст

Ссылки для социальных сетей

Наличие комментариев, вывод на экран, если они есть;

Окно для ввода комментария + ввод адреса и имени;

Скрипт для смайликов

Таким образом, редактируя файл single . php , мы можем сделать:

— Добавить картинку перед текстом статьи. Полезно для рекламных баннеров;

— Добавить/Изменить форму подписки;

— Добавить/изменить социальные кнопки;

— Добавить комментарии ВКонтакте;

— Сделать индивидуальное оформление для какой-либо отдельной записи.

В этом файле заложен важный шаблон ошибки 404 « Not found ». Она информирует читателя о том, что сервер не может обнаружить требуемую страницу.

Создание привлекательной страницы 404 – важный этап уникализации блога.

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

Причины открытия страницы ошибки:

— Сменился заголовок статьи, изменилась ссылка на нее;

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

Вы легко можете на нее выйти, дописав какую-либо аракадабру в конце ссылки на сайт: « http ://Ваш_сайт. ru /ппым».

Вот так она выглядит по умолчанию:

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

Поэтому очень и очень желательно сделать сделать «Страница не найдена» более информативной для читателя. Убедите посетителя не покидать блог, а остаться и найти что-то интересное для себя!

Для этого на страницу 404 можно поместить:

— Несколько строчек о том, почему нет страницы;

— Предложение перейти на главную страницу;

— Предложение сообщить в службу поддержки;

— Список рубрик блога;

— Перечень всех статей блога;

— Новые сообщения блога;

— Форму поиска или предложение ей воспользоваться;

— Для пущей привлекательности добавить картинку.

Полезные php -коды:

— Ссылка на картинку:

Ваш _ сайт /images/ Название картинки « width=»x» height=»y» alt=» « >

/images/название картинки» width=»x» height=»y» alt=»«/>

Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы » или «Медиафайлы/Добавить новый»

a href =»ссылка»>заголовок ссылки a >

— Вывод последних 10 записей блога

php get _ archives (‘ postbypost ’, 10); ?>

— Форма поиска берется из searchform . php

3. Файл style . css и изменение внешнего вида шаблона

Теперь перейдем к style . css . В нем описаны элементы стиля CSS , применяемые к каждому из объектов шаблона. Редактируя этот файл, мы легко можем изменить внешний вид своего блога.

Подключается файл стиля в хэдере:

Там же мы по необходимости можем подключить дополнительные файлы стиля.

Структура style . css :

CSS файл любого шаблона начинается с закомментированного знаками /* текст */ описания темы:

— Страница темы (если для общественного использования);

— Родительская тема (если есть);

Затем сбрасываются все стили, присвоенные браузером. Вот начало:

И, наконец, идут стили шаблона.

! По-прежнему не забываем про резервные копии!

Как можно изменять CSS стиль шаблона:

Редактировать style . css непосредственно в админке: «Внешний вид/Редактор/ style . css »;

Скопировать на компьютер с помощью FTP -клиента ( FlieZilla ) и редактировать в блокноте Notepad ++ или Akelpad ;

Добавлять необходимые изменения в файл стиля дочерней темы.

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

— Можно не бояться наделать глупостей, ведь исходную тему мы не трогаем =)

— В случае обновления родительской темы наши правки не слетят. При больших объемах изменений – очень важно!

К тому же, так можно изменять и другие файлы шаблона.

Давайте сделаем дочернюю тему для нашей Xmarkup :

Создаем папку с названием «Child Xmarkup»;

С помощью Notepad ++ (или любого другого блокнота) делаем файл style . css нашей темы:

Прописываем названия дочерней и основной тем (закоментировано) и включаем стили из основной темы:

@import url (‘. /xmarkup_res/style.css’);

Все, темка готова, осталось добавить ее на сайт =)

С помощью клиента FileZilla импортируем нашу папку в папку с темами: «/httpdocs/wp-content/themes». Не забудьте после копирования обновить FTP -клиент.

Теперь можно активировать ее в админке («Внешний вид/Темы»)

(Чтобы у темы была иконка, я добавила файл screenshot . png в папку « Child Xmarkup ») При желании, к дочерней теме можно добавить больше информации – автор, описание и т.д.

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

Расширении для Google Chrome и других браузеров на его платформе — CSSViewer

С его помощью мы увидим параметры CSS любого объекта на странице блога: шрифт, фон, размеры, положение. Выделяемый объект подсвечивается пунктирной линией, в заголовке CSSViewer высвечивает класс в файле style . css :

Run Pixie, благодаря которой можно узнать код любого цвета, стоит лишь навести мышку:

Цветовая палитра. Можно воспользоваться фотошопом или просто вбить в поисковике и выбрать понравившийся сайт:

Не знаете, какую цветовую гамму выбрать для блога? Воспользуйтесь таблицами сочетания цветов!

И, наконец, самая полезная штука (думаю, все итак знают 😉 ) – сам браузер Гугл Хром! Просто щелкаем правой кнопкой мыши на любом элементе и просматриваем его исходный код.

Понравившийся дизайн на сайте конкурента? Тоже не вопрос! При желании можно просто вытащить чужой файл стиля.

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

Чтобы редактировать стиль, необходимо хоть немного знать основные элементы языка CSS – каскадных таблиц стилей.

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

er > — шапка сайта

div > — контейнер, в который мы заключаем фрагмент блога, будь то ссылка, страница или текстовое окно. Помогает структурировать документ.

Чтобы изменить вид содержимого этого блока, мы добавляем к нему атрибуты id и class .

Id – стилевой идентификатор. Это уникальное имя, одно id используется только 1 раз на странице. Может применяться для якорных ссылок: вот так

Class – назначает имя класса, одному элементу на странице можно присвоить несколько классов. Также один класс может быть присвоен нескольким элементам.

При этом, большей приоритет у атрибута id . Пример :

Текст будет черного цвета, так как идентификатор важнее.

Итак, селектор – часть CSS правила, к которому будет применен стиль. Более подробно вы сможете познакомиться со всеми ними в любом учебнике по CSS или сайте для вебмастеров.

В качестве селектора могут использоваться элементы страницы ( body , li , ul и т.д.), так и специально заданные атрибуты стиля ( id , class ) или атрибуты (ссылки и т.п.).

Рассмотрю примеры некоторых селекторов из нашего файла стиля.

Селектор идентификатора (имя + знак решетка #).

В шаблоне задан как header id = «header» >

Селектор класса (точка + имя)

Универсальный селектор «*» позволяет нам выбрать все элементы на странице (или дочерние элементы). В данном примере мы обнуляем стили браузера, убирая отступы.

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

Селектор, состоящий из двух элементов. Также позволяет выделить все элемент нужных типов на странице. В данном случае определяет написание текста в тегах b >… b > и strong >… strong >

Также можно объединять простые селектор при помощи комбинаторов.

Выбор всех дочерних элементов внутри данного элемента. Выбираем все заголовки h 1 внутри идентификатора id =” main _ content ”

Читайте также:  Молочный цвет сочетается с белым

Мы можем использовать знак ‘>’, чтобы выделить непосредственные дочерние элементы у данного родительского.

Существуют также псевдо-классы, действующие в результате взаимодействия с сайтом, перед ними всегда идет двоеточие: «элемент:название_псевдо-класса». К примеру, выделение ссылки при наведении на нее курсора:

! important – позволяет повысить приоритет вводимого стиля. Например, если не хочется искать в файле стиля нужный селектор, можно просто подписать в конце документа новый стиль и добавить в конце «! important ».

color: #000 !important

Ознакомиться со всеми CSS селекторами можно в специализированной литературе.

Самые простые и, думаю, всем известные свойства:

color : #цвет; /* цвет текста */

background :#цвет; /* цвет фона */

Для цвета можно указать прозрачность

background : url (‘адрес изображения’); /* картинка на фоне */

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

width: значение; /* ширина */

height: значение; /* высота */

Могут определяться автоматически или задаваться в единицах измерения или процентах.

font-size: значение; /* размер шрифта */

font-style: значение; /* стиль текста – курсив, обычный */

font-weight: значение; /* толщина */

font-family: семейство; /* основной шрифт и альтернативные ему (если идущий первым не установлен) */

text-align: left, right, center; /* выравниваниетекста */

border: толщина стиль #цвет; /* рамка */

Также можно указать границу отдельно для сторон: снизу, сверху и т.п.

margin : top , right , left , bottom ; /* значения отступов, идут по часовой стрелке */

В зависимости от количества указанных значений:

— 4 цифры: значения отступов по часовой стрелке;

— 3 цифры: верхний, левый+правый, нижний;

— 2 цифры: верхний и нижний, левый и правый;

— 1 цифра: все отступ одинаковые.

Можно также задавать один какой-то отступ. Например: ‘ margin — top : 10 px ;’ – 10 пикселей от верхнего края.

Принимает значения: авто, в единицах измерения или в процентах. Значения отступов могут быть отрицательными.

padding: top, right, bottom, left;

Работает аналогично margin . Отрицательных значений нет.

А теперь более «интересные» свойства =)

Тень (свечение) текста и объекта

text — shadow : смещение_по_вертикали смещение_по_горизонтали размытие #цвет;

— webkit — text — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

— moz — text — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

Примечание: — webkit — text — shadow , — moz — text — shadow используются для совместимости с браузерами.

Можно указывать отрицательные значения.

Также можно делать несколько теней – просто перечислить их через запятую – подробнее я покажу в случае с изображением.

Как видите, можно очень красиво оформить заголовки к постам, к примеру. Да и вообще простор для фантазии)

box — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

— webkit — box — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

— moz — box — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

Примечание: — webkit — box — shadow , — moz — box — shadow используются для совместимости с браузерами. Не требуются при наличии последних версий с поддержкой CSS3 .

Тень для какого-либо объекта получается аналогично тени для текста.

— Если устанавливать значение только для размытия, можно получить эффектное свечение:

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

border — radius : верхний_левый верхний_правый ниний_правый нижний_левый углы;

— webkit — border — radius : верхний_левый верхний_правый нижний_правый нижний_левый углы;

— moz — border — radius : верхний_левый верхний_правый нижний_правый нижний_левый углы;

Примечание: — webkit — border — radius , — moz — border — radius используются для совместимости с браузерами. Не требуются при наличии последних версий с поддержкой CSS 3.

Значения присваиваются по часовой стрелки, их может быть от 1 до 4. Изменяя и комбинируя, можно красиво оформить изображения:

— 1 значение: одинаково скругляются все углы

— 2 значения: попарно скругляем [верхний_левый и нижний_правый] и [верхний_правый и нижний_левый]

— 3 значения: [верхний_левый] [верхний_правый и нижний_левый] [нижний_правый]

— 4 значения: задается отдельно для каждого угла

Используя тень, скругляя углы и добавляя рамки, можно оформлять изображения без помощи сторонних редакторов

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

Выбрали цветовую гамму, установили через «Внешний вид/Настроить» фон и шапку блога.

Остальные изменения я разберу на примере виджетов сайдбара.

Что нам потребуется сделать:

Изменить фон сайдбара;

Добавить тени и скругления;

Изменить стандартные кнопки и изображения

Совет: в файле style . css не забывайте комментировать для себя выполняемые действия – будет проще редактировать впоследствии.

Нажимаем ПКМ и выбираем «Просмотр кода элемента»:

Класс top _ comm _ wid в нашей теме относится ко всем виджетам сайдбара. Уж не знаю, почему у него такое название. Если нам надо изменить исключительно форму подписки, выбираем селектор идентификатора. При этом, наше свойство замещает предустановленные общие свойства. И так в случае каждого виджета.

Меняем фон формы и заголовка, добавляем скругления и тень. Для того, чтобы видеть изменения, можно писать правила прямо в окне стиля, показанного браузером.

! Учтите, при этом изменения в самом коде не производятся!

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

Иногда может произойти такое, что какие-то элементы блога съезжают, находят друг на друга и так далее. В этом случае используем внешние и внутренние отступы margin & padding .

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

Вот такой виджет у меня получился в итоге:

Вот часть правил CSS , которые я добавила в дочернюю тему:

Таким образом изменяем все страницы блога:

Не очень-то и сложно, не правда ли?

Добавление новых элементов в шаблон блога

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

Поменять местом главное меню и шапку сайта

Можно попробовать поднять главное меню над шапкой сайта. Для этого описание меню блога вырезаем и вставляем после тега

Вот, что у нас получится:

Добавить изображение в шапку сайта

Также помимо основного изображения может понадобиться добавить в шапку сайта еще одно изображение. К примеру, рекламный баннер или какую-либо кнопку (на те же конкурсы).

Берем любую картинку. Допустим, она называется 12345. png

С помощью FeliZilla загружаем изображение в папку Images: «httpdocs/ wp content / themes / xmarkup /images»

Вид ссылок на изображения:

img src =» http ://Ваш_сайт/ images /Название картинки» width =» x « height =» y « alt =» « >

/images/название картинки» width=»x» height=»y» alt=»»/>

Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы » или «Медиафайлы/Добавить новый». Там же можно сразу установить ссылку на сайт партнеров.

В файле шаблона header . php до или после кода шапки сайта прописываем тег, выводящий изображение:

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

Теперь картинку надо красиво оформить и присвоить ссылку:

Для примера, я ссылаюсь на главную страницу Яндекса.

Либо стиль можно прописать перед ссылкой на изображение, добавив теги style >… style >

Как добавить картинку перед текстом статьи.

Иногда может потребоваться, чтобы рекламный баннер шел перед заголовками статей. Для этого нам надо добавить код изображения в файл single . php перед кодом заголовка:

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

Изменение иконок социальных сетей и любых других изображений

Чтобы изменить иконки социальных сетей, надо заменить соответствующие файлы в папке Images

Источник