изменяем тему twentyfifteen

Twenty Fifteen: настраиваем стандартную тему wordpress

Здравствуйте, сегодня будем настраивать бесплатную wordpress тему — Twenty Fifteen, а именно: перенесем сайдбар слева направо, изменяем цвета блока контента и др.
PS: Статья в процессе написания…


Скачать исходники для статьи можно ниже

1. Переносим сайдбар слева направо.

В итоге получим:
настройка twentyfifteen

Код для файла стилей — style.css (админка wordpress — в левом меню пункт «Внешний вид» — подпункт «Редактор» — справа в списке шаблонов выбираем файл style.css), можно просто добавить код в самый низ:

@media screen and (min-width: 59.6875em) {
	.site-content {
		float: left;
		margin-left: 0px;
		width: 70.5882%;
	}
	
	.sidebar {
		float: right;
		right:0;
		margin-right: 0px;
		max-width: 413px;
		width: 29.4118%;
	}
	
	body:before {
		right: 0;
		left:auto;
	}
}

2. Изменяем цвет блока контента:

Что получим:

изменяем тему twentyfifteen

Для этого можно использовать следующий код:

.hentry {
    background: #f4df30;
}
 
.entry-footer {
    background: #303030;
    color: #fff;
}
 
.entry-footer a {
    color: #fff;
}

Продолжаем…, чтобы сделать вот такую тему:
украшаем стандартную тему wordpress

Нужно к выше написанному, зайти в админке в пункт «Внешний вид» и его подпункт «Настроить», в нем зайти в подпункт «Цвета» и выставить следующие:

изменяем бесплатную тему twentyfifteen

Цвет фона: #000000
Цвет текста заголовка и боковой колонки: #f7f7f7
Цвет фона заголовка и боковой колонки: #303030

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Twenty Fifteen: настраиваем стандартную тему wordpress: 3 комментария

  1. Александр Максимов

    Давно хотел узнать как делаются такие вещи.Спасибо за понятное и адекватное объяснение.Можно ли таким же образом менять внешний вид в других темах? Менять цвет блока контента? Надеюсь на продолжение урока,спасибо

  2. Сергей

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

  3. Константин

    Сергей, просто подредактируйте стили для отображения сайта на планшете (можно сделать фоновую картинку для сайдбара поменьше и прописать ее в стилях для планшета), для этого прочитайте статью:
    http://mnogoblog.ru/mobilnaya-i-shirokoformatnaya-versiya-sajta-vruchnuyu-i-cherez-plaginy

Добавить комментарий