Мастер-класс
по изменению внешнего вида на шаблоне AB-Inspiration

Цветовая гамма:


Оранжевый: #ffb739
Зеленый : #9dc955
Коричневый : #877d73
Розовый : #f998ba


Внешний вид:

Для того, чтобы создать такой блог Вам понадобятся:

  1. Шаблон AB-Inspiration последней версии - http://mlmcentr.ru
  2. плагин WP-Form "Живая форма+Слайдер" - http://wpform.ru
  3. Плагин "Отзывы" - http://wptestimonials.ru/
  4. Плагин "Входная страница" - http://blog.wphomepage.ru/wphomepage/

Инструкция

Настройки шаблона

Стиль блога:

Ширина блога: 1140px
Отсуп: 0
Фон вокруг блога: цвет - #ffffff, картинка - body.jpg: повторять все/сверху по-центру/прокручивается
Фон внутри блога цвет - #ffffff, картинка - нет
Граница: да
Цвет границы блога: #f3ece8
Закругления углов границы блога: 0px
Тень: тень вокруг

Стиль шапки

Высота: 140
ширина: 1060px
отступ: 0
Фон снаружи: цвет - нет, картинка: нет
Фон внутри: цвет - нет, картинка - border.png: повторять по горизонтали/внизу по-центру/прокручивается
Размер фона (картинки) в шапке: Исходный размер
Закругления границы шапки: 0px

Настройка заголовка блога в виде текста:
Стиль шрифта заголовка блога: 40px/Didact Gothic/Обычный/#9dc955,
При наведении мышки: #ffb339,
Трансформация букв: С Большой Буквы,
Отступ сверху: 25,
Отступ слева: 0

Настройка описания блога в виде текста:
Стиль шрифта заголовка блога: 12px/Arial/Обычный/#877d73
Трансформация букв: нет
Расстояние между буквами: 0
Отступ сверху: 0,
Отступ слева: 0


Стиль меню в шапке

Отображать меню в шапке? поставить галочку
Расположение меню по вертикали: по-середине
Расположение пунктов меню по горизонтали: справа
Высота меню: 40
Основной фон: нет
При наведении мышки: нет
Выпадающее: #ffffff
Закругления углов меню: 0px
Прозрачность фона: нет
Стиль: 18px/Didact Gothic/Обычный/#ffc782
При наведении мышки: #ab9f95,
Выпадающее меню: #ab9f95,
Трансформация:: маленькие


Стиль основного меню

Отображать основное меню?: убрать галочку


Стиль плавающее меню

Отображать плавающее меню?: убрать галочку


Стиль контента

Ширина общего поля вокруг статей и виджетов: 1060px
Отступ сверху: 0
Отступ снизу: 0
Фон вокруг статей и виджетов: цвет: #ffffff, картинка: нет
Отображать границу вокруг статей и виджетов?: нет
Отображать разделитель между статьями: поставить галочку
Цвет разделителя между статьями: #e0e0e0
Шрифт текста на всем блоге: Arial


Стиль Статьи

Фон внутри статей: цвет - #ffffff, картинка - нет
Отображать границу вокруг статей?: нет
Размер шрифта текста в статьях и на страницах: 16px

Заголовки Стиль заголовков статей: 30px/Didact Gothic/Обычный/#877d73,
При наведении мышки: #ffb739,
Цвет заголовка на внутренней странице: #877d73,
Шрифт заголовков в тексте статей: Didact Gothic

Ссылки
Цвет ссылок: #f998ba
При наведении мышки: #9dc955
Посещенная ссылка: #f998ba

Кнопки
Цвет кнопок: #9dc955
Цвет текста на кнопках: #ffffff

Комментарии
Фон комментариев: #ffffff
Фон комментариев автора: #ffffff


Стиль Виджетов

Расположение боковой колонки: справа
Фон внутри виджета: цвет - #ffffff, картинка - нет
Отображать границу вокруг виджетов?: да
Цвет границы виджетов: #f3ece8
Закругления углов виджетов: 3px
Стиль заголовков виджетов: 22px/Didact Gothic/Обычный/#877d73,
Трансформация букв: нет,
Цвет фона заголовка виджетов: #ffffff,


Стиль виджет в футер

Фон вокруг виджетов в футер: цвет - #f7f7f1, картинка: bg-footer.gif: Повторять по вертикали/Сверху по центру/ Прокручивается
Фон внутри виджета: цвет: нет, картинка - нет
Закругления углов виджетов: 0px
Стиль заголовков виджетов: 22px/Didact Gothic/Обычный/#877d73,
Трансформация букв: маленькие,
Цвет фона заголовка виджетов: #f7f7f1,


Стиль Футер

Ширина нижней части: 100%
Фон нижней части блога footer: цвет - #f7f7f1, картинка - нет
Цвет текста в footer: #877d73


Настройка статей

Размер миниатюры: маленькая
Настройка стиля изображений: с границе (третья с лева)
Цвет текста в footer: #877d73


Форма в виджите

Общий стиль шрифта заголовка: 22px/Didact Gothic/Обычный/#9dc955,
Трансформация: С Большой Буквы
Цвет шрифта текста гарантии: #877d73
Изображение для формы: картинка: home4.png
Цвет фона формы подписки вверху - #ffffff
Цвет фона формы подписки внизу - #ffffff
Фон в виде изображения - нет
Отображать границу вокруг формы - поставить галочку
Цвет границы формы подписки - #f3ece8
Отображать тень вокруг формы? - нет
Закругления формы подписки - 3px
Создать свой стиль кнопки - поставить галочку
Цвет кнопки - #f998ba
При наведении мышкой - #9dc955
Закругления углов кнопки - 3px
Отображать тень внутри кнопки? - убрать галочку
Отображать тень вокруг кнопки? - убрать галочку
Граница вокруг кнопки? - убрать галочку
Высота кнопки - 40px
Стиль текста на кнопке - 16px/Didact Gothic/Обычный/#ffffff


Поделиться в конце статьи

Фон блока: #ffffff
Отображать границу вокруг блока "Поделиться"?: поставить галочку
Стиль шрифта заголовка для кнопок "ПОДЕЛИТЬСЯ": 22px/Didact Gothic/Обычный/#877d73
Расположение заголовка: слева


Форма в конце статьи

Цвет фона блоке "Форма подписки": цвет - #ffffff, картинка - нет
Отображать границу вокруг блока "Поделиться"?: поставить галочку
Цвет границы: #f3ece8
Закругления углов: 3px
Общий стиль шрифта заголовка: - 22px/Didact Gothic/Обычный/#9dc955
Изображение: home4.png
Стиль текста на кнопке - 16px/Didact Gothic/Обычный/#ffffff
Цвет фона кнопки: #f998ba


Настройки плагина WPForm (Слайды)

1. Активировать слайды

2. Вкладка "Ширина/Высота/Отступы блока"


Где показывать слайды: Только на главной
Ширина блока: 1060px
Высота блока: 390
Отступ внутри блока: сверху: 0 снизу: 0
Отступ за пределами блока: сверху: 0 снизу: 0
Общий фон блока: картинка - нет, цвет - нет

3. Вкладка "Слайды"

1. Загрузить слайды (slide1.jpg, slide2.jpg, slide3.jpg)
2. Заполнить поля "Заголовок", "Описание", "Ссылка"

4. Вкладка "Стиль слайдов"

Стиль смены слайдов: Появление
Граница блока: нет/1px/нет/цвет-нет

5. Вкладка "Стиль текста"

Настройка текста

Стиль заголовка Didact Gothic/40px/цвет - #9dc955
Стиль подзаголовка - Didact Gothic/30px/цвет - #f998ba
Стиль описания Arial/14px/цвет - #877d73

Настройка блока

Расположение: Слева
Ширина: 350
Отступы сверху: 0 снизу: 0
Фон: Поставьте галочку/ цвет - #ffffff/Сильная прозрачность
Анимация: Выплывает снизу

6. Вкладка "Стиль кнопки"

Цвет кнопки: #ffb739
Текст на кнопке: произвольный
Размер, шрифт, стиль, цвет, тень Didact Gothic/13px/Обычный/#ffffff
С тенью / Без тени? Без тени

Настройки плагина "Входная страница"

Общие настройки для всех уровней

Ширина уровней 1060px
Шрифт для заголовков Didact Gothic
Анимация поставить галочку
Отступ сверху 0
Отступ снизу 0
Граница убрать галочку
Закругления границы нет

Настройки контента



Уровень №1

Внешний вид уровня : 1 на всю ширину
Фон уровня: картинка - slider.png: не повторять/внизу по центру, цвет - #ffaf2d
Контент : произвольно, Текст : напишите свой текст в первом блоке
изображение : нет
Ссылка : укажите ссылку
Поле для произвольного текста уровня : поставить галочку (в поле написать заголовок, расположить по центру, после заголовка загрузить картинку границу: main-border.png)
Изображение : убрать галочку
Заголовок : убрать галочку
Анонс : поставить галочку
Кнопка "Читать далее" : по желанию


Остальные 2 уровня по желанию

Рекомендованные цвета
Оранжевый: #ffb739
Зеленый : #9dc955
Коричневый : #877d73
Розовый : #f998ba

Для отображения отзывов - используйте плагин "Отзывы"- : http://wptestimonials.ru/

Автор: Анфиса Бреус, Изменение внешнего вида блога на шаблоне AB-Inspiration