Хамелеон: модель для сборки (S2)
Давно хотела сделать что-то простое черно-белое, как Georgia, и вот результат: дизайн-конструктор на основе нового стиля Chameleon!
Увеличить
Возможности:
- можно задать ширину журнала и ширину боковой колонки
- скрыть сайдбар
- добавить фон страницы и ленты постов
- можно двигать меню внутри шапки или отправить его в сайдбар
- можно добавить заглавную картинку, задать ей высоту и расположение
- можно включить кнопки для ссылок на ваши профили в твиттере, фейсбуке и вконтакте, выбрать вид их и расположение
И всё это через настройки дизайна! : )
Теперь этот дизайн можно установить из каталога стилей:
Black and White 01
Шапка на всю ширину
журнала
Black and White 02
Шапка только
над постами
Кликните на название темы, чтобы перейти к ней в каталоге.
Чем отличаются темы из каталога: иконки соцсетей аккуратнее, а тенью под лентой можно управлять прямо из настроек.
В темах по-прежнему можно менять фон, добавлять заглавную картинку, управлять сайдбаром и положением меню.
Если вы планируете взять тему и основательно её переделать - берите код ниже, если же вам просто нужен лаконичный гибко настраиваемый стиль - установите темы из каталога: Black and White 01 или Black and White 02.
Как ставить и настраивать?
Установите Unstyled 01
Далее: Custom CSS
1. ВАЖНО! Use base.css → NO
2. В поле Custom stylesheet вставляется код:
/* Design by Yoksel @http://community.livejournal.com/journals_covers/ */ BODY { font: 14px/1.4 Georgia, Times, serif; color: #333; } A { color: #333; } A:hover { text-decoration: underline; color: #000; } H1 {font-size: 48px;} H2 {font-size: 36px;} H3 {font-size: 27px;} H4 {font-size: 18px;} .j-page-title { margin-bottom: 25px; font-size: 22px; } /* Common ------------------------------------------*/ .j-w-menu-item { font-size: 16px; } /* Containers ------------------------------------------*/ .j-l-container { padding: 0; } .j-l-page { margin: 0 auto; } .j-l-page-inner { padding: 0 25px 20px; } .j-l-footer { margin-bottom: 20px; padding-top: 5px; border-top: 1px solid #000; font-size: 22px; } /* Header ------------------------------------------*/ .j-l-header { margin-bottom: 30px; border-top: 7px solid #000; border-bottom: 1px solid #000; } .j-p-menu-inheader_bottom .j-l-header { border-bottom: 0; } .j-header-user-name, .j-header-user-pic { display: none; } /* Title, subtitle ----------------------------*/ .j-header-user { margin: 20px 0; text-align: center } .j-p-menu-inheader_bottom .j-p-header-image-top .j-header-user, .j-p-menu-inheader_top .j-p-header-image-middle .j-header-user, .j-p-menu-in_beta .j-p-header-image-top .j-header-user { padding-top: 5px; border-top: 1px solid #000; } .j-p-menu-inheader_top .j-p-header-image-bottom .j-header-user, .j-p-menu-inheader_bottom .j-p-header-image-middle .j-header-user { padding-bottom: 20px; border-bottom: 1px solid #000; } .j-p-menu-in_beta .j-p-social-networks-big .j-header-user, .j-p-menu-in_beta .j-p-social-networks-small .j-header-user { margin-top: 0; } .j-p-menu-in_beta .j-p-header-image-middle .j-header-user, .j-p-menu-in_beta .j-p-header-image-bottom .j-header-user { margin-top: 10px; padding: 0 0 20px; border: 1px solid #000; border-width: 1px 0; } .j-user-journal-title { line-height: 1.2; } .j-user-journal-subtitle { margin-top: 15px; font-size: 18px; } /* Header image ----------------------------*/ .j-w-header-image { margin: 20px 0; } .j-p-menu-in_beta .j-p-header-image-top .j-w-header-image { margin-bottom: 10px; } /* Journal nav in header ----------------------------*/ .j-l-header .j-w-journal-nav { width: 100%; height: 39px; border-top: 1px solid #000; border-bottom: 3px double #000; text-align: center; } .j-p-menu-inheader_top { border-top: 0; } .j-journal-nav { width: 100%; } .j-journal-nav-item { line-height: 40px; font-size: 19px; } .j-journal-nav-item A { display: block; } .j-header-nav .j-journal-nav-item { margin-right: 30px; } .j-beta-nav .j-journal-nav-item { border-bottom: 1px dotted #000; } .j-p-social-networks-text .j-header-nav .j-journal-nav-item { display: inline-block; //display: inline; float: none; margin: 0; padding: 0 20px; zoom: 1; } .j-journal-nav-item-current { padding: 0 7px; background: #000; } .j-beta-nav .j-journal-nav-item-current { margin-top: -1px; } .j-journal-nav-item-current A { color: #FFF; } /* Social networks ----------------------------*/ .j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-big, .j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-big { margin-top: 5px !important; } .j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-small, .j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-small { margin-top: 13px !important; } .j-l-header .j-w-social-networks-nav-text { padding-top: 15px; //padding-bottom: 10px; text-align: left; } .j-p-menu-in_beta .j-l-header .j-w-social-networks-nav-small, .j-p-menu-in_beta .j-l-header .j-w-social-networks-nav-big { margin: 10px 0; } /* Beta ------------------------------------------*/ .j-beta-w { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #DDD; } .j-p-menu-in_beta .j-w-journal-nav { padding-bottom: 0; border-bottom: 0; } .j-w-title { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #000; line-height: 1.2; } .j-w-item:before { content: " - "; } .j-p-tagcloud .j-w-item:before { content: ""; } .j-w-profile-image{ margin-bottom: 10px; } .j-w-profile-name { margin-bottom: 10px; } /* Social networks ------------------------------------------*/ .j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-big, .j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-big { margin-top: -9px; } .j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-small, .j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-small { margin-top: 3px; } /* Entry ------------------------------------------*/ .j-e { margin-bottom: 45px; } .j-e-title { padding-bottom: 5px; border-bottom: 1px solid #000; line-height: 1.2; } .j-e-user { position: relative; z-index: 10; text-align: center; padding: 0 0 7px 7px; background: #FFF; } .j-p-userpic-left .j-e-user { padding: 0 7px 7px 0; } .j-e-user-name { max-width: 110px; margin: 5px 0; font-size: 12px; } .j-e-date { margin: 0 0 5px; font: 15px/1.4 Georgia, Times, serif; color: #AAA; } .j-e-reposted-by { margin-top: 7px; font: 12px/1.4 Georgia, Times, serif; color: #AAA; } .j-e-text { margin: 10px 0 0; } .j-e-text A { text-decoration: underline; } .j-e-text A:hover { text-decoration: none; } .j-e-text BLOCKQUOTE { margin: 5px 20px; padding-left: 15px; border-left: 1px dotted #DDD; } .j-e-meta { clear: both; margin: 20px 0 0 20px; font-size: 14px; color: #AAA; } .j-e-meta A, .j-e-meta A:visited { color: #AAA; } .j-e-nav { margin-top: 20px; padding: 10px 0 0; border-top: 1px solid #DDD; } .j-e-buttons { border-top: none; } .j-e-nav-item { margin-right: 10px; font-size: 15px; } .no-entries-text { margin: 20px 0; text-align: center; font: 12px/1.4 Arial; color: #AAA; } /* Archive ------------------------------------------*/ .j-years-nav { margin-bottom: 30px; font-size: 25px; } .j-w-calendar-nav { margin-bottom: 10px; } .j-years-nav-item-current { font-weight: bold; } .j-w-calendar-arr { border-color: transparent #000; } .disabled .j-w-calendar-arr { border-color: transparent #DDD; } .j-calendar-month { text-align: center; padding-bottom: 10px; font-weight: bold; } .j-calendar-table TD { width: 14%; padding: 2px 0; border-bottom: 1px solid #DDD; font-size: 12px; line-height: 2; } .j-calendar-weekday { border: 1px solid #000; border-width: 2px 0 1px; } .j-calendar-table TR:last-child TD { border-bottom: 0; } .j-calendar-table TD A { display: inline-block; background: #000; width: 2em; border-radius: 50%; font-weight: bold; color: #FFF; } /* Month ------------------------------------------*/ .j-month-nav { margin-bottom: 20px; } .j-month-nav A { font-size: 20px; } .j-day { margin-bottom: 20px; } .j-day-date A, .j-day-date A:visited { display: inline-block; background: #000; padding: 0 4px; border-radius: 50%; font-size: 18px; color: #FFF; } .j-day-subjects { margin-left: 10px; } /* Comments ------------------------------------------*/ .j-e-buttons { margin-top: 0; padding: 0; } .j-comments-nav { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #000; } .j-comments-nav-bottom { margin-top: 35px; } .j-comments-pages-top { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #000; } .j-comments-pages-bottom { margin: 20px 0; } .j-comments-pages-list { padding: 0 5px; } .j-comments-pages-current { background: #000; padding: 0 6px; border-radius: 50%; font-weight: bold; color: #FFF; } .j-w-multyform { margin-top: 15px; padding-top: 15px; border-top: 1px solid #000; } .j-c { margin-bottom: 5px; } .j-c-full { margin-top: 15px; } .j-c-reply { margin-bottom: 25px; } .j-c-head { margin-bottom: 10px; } .j-c-subject { font-weight: bold; } .j-c-date { margin: 5px 0 0; font-size: 12px; color: #AAA; } .j-c-user-ip { font-size: 12px; color: #AAA; } .j-c-multyform-check { padding-left: 15px; } .j-c-user-pic { padding: 0 5px 5px 0; border: 0; } .j-c-user-pic IMG { height: auto; max-width: 70px; } .j-c-nav { padding: 5px 0; border-top: 1px solid #DDD; } #qrform TABLE { margin: 20px 0; border: 0 solid !important; } #userpics { display: block; margin-bottom: 5px; } .textbox { margin-bottom: 7px; border: 1px solid #DDD; font: 14px/1.4 Arial; } #qrform .de, #postform .de { font: 12px/1.4 Arial; color: #AAA; } .j-c-screened { padding: 5px; border: 1px solid #DDD; background: #EEE; color: #777; } .j-c-frozen { font-style: italic; color: #777; } .j-c-spam { padding: 5px; border: 1px solid gold; }
Должен получиться простой черно-белый дизайн.
Можно оставить так, а можно в полной мере воспользоваться возможностями Хамелеона : )
Вот какие варианты получились у меня (картинки кликабельны):
Как видите, можно получить несколько шаблонов с разным расположением элементов.
Итак, поехали!
Меняем фон
Настройки дизайна, вкладка Page
Я выделила основые поля, но остальные настройки тоже можно крутить и дёргать, экспериментируйте.
Можно использовать мои фоны:
http://img-fotki.yandex.ru/get/6428/5091629.7e/0_706a2_6dd9e65d_orig
http://img-fotki.yandex.ru/get/6425/5091629.7e/0_706a3_c525a707_orig
Так же пользуясь случаем хочу напомнить, что большое количество моих фонов можно найти тут: colourlovers.com/lover/yoksel/patterns
Попробуйте задать в настройках картинку или цвет фона, сохраните и посмотрите что получилось.
Идём дальше:
Вставляем заглавную картинку
Вкладка Header
Настройки в первом блоке отвечают за поведение заглавной картинки.
Второй блок - поинтереснее. Первый пункт отвечает за расположение заглавной картинки относительно других блоков в шапке, второй управляет расположением меню.
Экспериментируйте : )
А теперь самое время вспомнить, что дизайн у нас полурезиновый, поэтому заглавная картинка может начать повторяться или вообще вести себя странно, поэтому:
Задаем ширину журнала
Снова вкладка Page
Если ваша заглавная картинка должна занимать строго всю шапку по ширине, задайте фиксированную ширину.
Если картинки нет, или она спокойно переносит растягивание ленты - можно использовать полурезиновую ширину, с ней журнал лучше адаптируется под различные разрешения экрана.
А теперь
Ссылки на социальные сети
Вкладка Social networks
Верхняя настройка позволяет расположить кнопки в шапке либо в виджете профиля (убедитесь что у вас есть сайдбар и включен виджет профиля!).
Нижняя - выбор отображения иконок:
- большие
- маленькие
- иконки с текстом.
Обратите внимание, что если иконки находятся в шапке, иконки с текстом будут рядом с заголовком, а без текста - над заголовком либо в меню. Они кочууют, да.
Ниже задаются ссылки на ваши аккаунты в соцсетях и названия для этих ссылок.
Далее:
Настраиваем сайдбар
Вкладка Sidebar
Пунктир посередине намекает нам, что между настройками, которые на скриншоте, есть ещё всякое разное, но я оставила только самое интересное.
Первая настройка скроет сайдбар, если он вам не нужен.
Блок профиля - хороший способ кратко рассказать о себе вашим читателям.
Можете вставить свою фотографию и написать что-нибудь о себе, а можете вставить просто красивую картинку или любимые цитаты.
Сюда же можно переместить иконки социальных сетей, чтобы вся информация о вас была удобно расположена в одном месте
Включить или выключить отдельные блоки сайдбара, а так же выстроить их в желаемом порядке, можно в настройке Order of widgets in sidebar (порядок блоков в сайдбаре).
И напоследок:
Добавляем тени
Чтобы добавить тень ленте записей, вставьте код выбранной тени в блок .j-l-page.
Должно получиться примерно так:
.j-l-page {
margin: 0 auto;
box-shadow: 0 0 15px rgba(0,0,0, 1);
}
Легкая тень, рекомендуется светлого фона
Код: box-shadow: 0 0 15px rgba(100,100,100, 0.3);
Тёмная тень, подойдет для темного фона
Код: box-shadow: 0 0 15px rgba(0,0,0, 1);
Внимание: если вы не видите тени вокруг надписей с кодом, ваш браузер их не поддерживает.
Если задали тени, не забудьте задать ленте фон, чтобы тень не висела в воздухе.
Справочник по кодам Хамелеона
Если кто-то дочитал это всё до конца и решился на эксперименты, покажите что у вас получилось : )
Увеличить
Возможности:
- можно задать ширину журнала и ширину боковой колонки
- скрыть сайдбар
- добавить фон страницы и ленты постов
- можно двигать меню внутри шапки или отправить его в сайдбар
- можно добавить заглавную картинку, задать ей высоту и расположение
- можно включить кнопки для ссылок на ваши профили в твиттере, фейсбуке и вконтакте, выбрать вид их и расположение
И всё это через настройки дизайна! : )
Теперь этот дизайн можно установить из каталога стилей:
Black and White 01
Шапка на всю ширину
журнала
Black and White 02
Шапка только
над постами
Кликните на название темы, чтобы перейти к ней в каталоге.
Чем отличаются темы из каталога: иконки соцсетей аккуратнее, а тенью под лентой можно управлять прямо из настроек.
В темах по-прежнему можно менять фон, добавлять заглавную картинку, управлять сайдбаром и положением меню.
Если вы планируете взять тему и основательно её переделать - берите код ниже, если же вам просто нужен лаконичный гибко настраиваемый стиль - установите темы из каталога: Black and White 01 или Black and White 02.
Как ставить и настраивать?
Установите Unstyled 01
Далее: Custom CSS
1. ВАЖНО! Use base.css → NO
2. В поле Custom stylesheet вставляется код:
/* Design by Yoksel @http://community.livejournal.com/journals_covers/ */ BODY { font: 14px/1.4 Georgia, Times, serif; color: #333; } A { color: #333; } A:hover { text-decoration: underline; color: #000; } H1 {font-size: 48px;} H2 {font-size: 36px;} H3 {font-size: 27px;} H4 {font-size: 18px;} .j-page-title { margin-bottom: 25px; font-size: 22px; } /* Common ------------------------------------------*/ .j-w-menu-item { font-size: 16px; } /* Containers ------------------------------------------*/ .j-l-container { padding: 0; } .j-l-page { margin: 0 auto; } .j-l-page-inner { padding: 0 25px 20px; } .j-l-footer { margin-bottom: 20px; padding-top: 5px; border-top: 1px solid #000; font-size: 22px; } /* Header ------------------------------------------*/ .j-l-header { margin-bottom: 30px; border-top: 7px solid #000; border-bottom: 1px solid #000; } .j-p-menu-inheader_bottom .j-l-header { border-bottom: 0; } .j-header-user-name, .j-header-user-pic { display: none; } /* Title, subtitle ----------------------------*/ .j-header-user { margin: 20px 0; text-align: center } .j-p-menu-inheader_bottom .j-p-header-image-top .j-header-user, .j-p-menu-inheader_top .j-p-header-image-middle .j-header-user, .j-p-menu-in_beta .j-p-header-image-top .j-header-user { padding-top: 5px; border-top: 1px solid #000; } .j-p-menu-inheader_top .j-p-header-image-bottom .j-header-user, .j-p-menu-inheader_bottom .j-p-header-image-middle .j-header-user { padding-bottom: 20px; border-bottom: 1px solid #000; } .j-p-menu-in_beta .j-p-social-networks-big .j-header-user, .j-p-menu-in_beta .j-p-social-networks-small .j-header-user { margin-top: 0; } .j-p-menu-in_beta .j-p-header-image-middle .j-header-user, .j-p-menu-in_beta .j-p-header-image-bottom .j-header-user { margin-top: 10px; padding: 0 0 20px; border: 1px solid #000; border-width: 1px 0; } .j-user-journal-title { line-height: 1.2; } .j-user-journal-subtitle { margin-top: 15px; font-size: 18px; } /* Header image ----------------------------*/ .j-w-header-image { margin: 20px 0; } .j-p-menu-in_beta .j-p-header-image-top .j-w-header-image { margin-bottom: 10px; } /* Journal nav in header ----------------------------*/ .j-l-header .j-w-journal-nav { width: 100%; height: 39px; border-top: 1px solid #000; border-bottom: 3px double #000; text-align: center; } .j-p-menu-inheader_top { border-top: 0; } .j-journal-nav { width: 100%; } .j-journal-nav-item { line-height: 40px; font-size: 19px; } .j-journal-nav-item A { display: block; } .j-header-nav .j-journal-nav-item { margin-right: 30px; } .j-beta-nav .j-journal-nav-item { border-bottom: 1px dotted #000; } .j-p-social-networks-text .j-header-nav .j-journal-nav-item { display: inline-block; //display: inline; float: none; margin: 0; padding: 0 20px; zoom: 1; } .j-journal-nav-item-current { padding: 0 7px; background: #000; } .j-beta-nav .j-journal-nav-item-current { margin-top: -1px; } .j-journal-nav-item-current A { color: #FFF; } /* Social networks ----------------------------*/ .j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-big, .j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-big { margin-top: 5px !important; } .j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-small, .j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-small { margin-top: 13px !important; } .j-l-header .j-w-social-networks-nav-text { padding-top: 15px; //padding-bottom: 10px; text-align: left; } .j-p-menu-in_beta .j-l-header .j-w-social-networks-nav-small, .j-p-menu-in_beta .j-l-header .j-w-social-networks-nav-big { margin: 10px 0; } /* Beta ------------------------------------------*/ .j-beta-w { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #DDD; } .j-p-menu-in_beta .j-w-journal-nav { padding-bottom: 0; border-bottom: 0; } .j-w-title { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #000; line-height: 1.2; } .j-w-item:before { content: " - "; } .j-p-tagcloud .j-w-item:before { content: ""; } .j-w-profile-image{ margin-bottom: 10px; } .j-w-profile-name { margin-bottom: 10px; } /* Social networks ------------------------------------------*/ .j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-big, .j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-big { margin-top: -9px; } .j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-small, .j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-small { margin-top: 3px; } /* Entry ------------------------------------------*/ .j-e { margin-bottom: 45px; } .j-e-title { padding-bottom: 5px; border-bottom: 1px solid #000; line-height: 1.2; } .j-e-user { position: relative; z-index: 10; text-align: center; padding: 0 0 7px 7px; background: #FFF; } .j-p-userpic-left .j-e-user { padding: 0 7px 7px 0; } .j-e-user-name { max-width: 110px; margin: 5px 0; font-size: 12px; } .j-e-date { margin: 0 0 5px; font: 15px/1.4 Georgia, Times, serif; color: #AAA; } .j-e-reposted-by { margin-top: 7px; font: 12px/1.4 Georgia, Times, serif; color: #AAA; } .j-e-text { margin: 10px 0 0; } .j-e-text A { text-decoration: underline; } .j-e-text A:hover { text-decoration: none; } .j-e-text BLOCKQUOTE { margin: 5px 20px; padding-left: 15px; border-left: 1px dotted #DDD; } .j-e-meta { clear: both; margin: 20px 0 0 20px; font-size: 14px; color: #AAA; } .j-e-meta A, .j-e-meta A:visited { color: #AAA; } .j-e-nav { margin-top: 20px; padding: 10px 0 0; border-top: 1px solid #DDD; } .j-e-buttons { border-top: none; } .j-e-nav-item { margin-right: 10px; font-size: 15px; } .no-entries-text { margin: 20px 0; text-align: center; font: 12px/1.4 Arial; color: #AAA; } /* Archive ------------------------------------------*/ .j-years-nav { margin-bottom: 30px; font-size: 25px; } .j-w-calendar-nav { margin-bottom: 10px; } .j-years-nav-item-current { font-weight: bold; } .j-w-calendar-arr { border-color: transparent #000; } .disabled .j-w-calendar-arr { border-color: transparent #DDD; } .j-calendar-month { text-align: center; padding-bottom: 10px; font-weight: bold; } .j-calendar-table TD { width: 14%; padding: 2px 0; border-bottom: 1px solid #DDD; font-size: 12px; line-height: 2; } .j-calendar-weekday { border: 1px solid #000; border-width: 2px 0 1px; } .j-calendar-table TR:last-child TD { border-bottom: 0; } .j-calendar-table TD A { display: inline-block; background: #000; width: 2em; border-radius: 50%; font-weight: bold; color: #FFF; } /* Month ------------------------------------------*/ .j-month-nav { margin-bottom: 20px; } .j-month-nav A { font-size: 20px; } .j-day { margin-bottom: 20px; } .j-day-date A, .j-day-date A:visited { display: inline-block; background: #000; padding: 0 4px; border-radius: 50%; font-size: 18px; color: #FFF; } .j-day-subjects { margin-left: 10px; } /* Comments ------------------------------------------*/ .j-e-buttons { margin-top: 0; padding: 0; } .j-comments-nav { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #000; } .j-comments-nav-bottom { margin-top: 35px; } .j-comments-pages-top { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #000; } .j-comments-pages-bottom { margin: 20px 0; } .j-comments-pages-list { padding: 0 5px; } .j-comments-pages-current { background: #000; padding: 0 6px; border-radius: 50%; font-weight: bold; color: #FFF; } .j-w-multyform { margin-top: 15px; padding-top: 15px; border-top: 1px solid #000; } .j-c { margin-bottom: 5px; } .j-c-full { margin-top: 15px; } .j-c-reply { margin-bottom: 25px; } .j-c-head { margin-bottom: 10px; } .j-c-subject { font-weight: bold; } .j-c-date { margin: 5px 0 0; font-size: 12px; color: #AAA; } .j-c-user-ip { font-size: 12px; color: #AAA; } .j-c-multyform-check { padding-left: 15px; } .j-c-user-pic { padding: 0 5px 5px 0; border: 0; } .j-c-user-pic IMG { height: auto; max-width: 70px; } .j-c-nav { padding: 5px 0; border-top: 1px solid #DDD; } #qrform TABLE { margin: 20px 0; border: 0 solid !important; } #userpics { display: block; margin-bottom: 5px; } .textbox { margin-bottom: 7px; border: 1px solid #DDD; font: 14px/1.4 Arial; } #qrform .de, #postform .de { font: 12px/1.4 Arial; color: #AAA; } .j-c-screened { padding: 5px; border: 1px solid #DDD; background: #EEE; color: #777; } .j-c-frozen { font-style: italic; color: #777; } .j-c-spam { padding: 5px; border: 1px solid gold; }
Должен получиться простой черно-белый дизайн.
Можно оставить так, а можно в полной мере воспользоваться возможностями Хамелеона : )
Вот какие варианты получились у меня (картинки кликабельны):
Как видите, можно получить несколько шаблонов с разным расположением элементов.
Итак, поехали!
Меняем фон
Настройки дизайна, вкладка Page
Я выделила основые поля, но остальные настройки тоже можно крутить и дёргать, экспериментируйте.
Можно использовать мои фоны:
http://img-fotki.yandex.ru/get/6428/5091629.7e/0_706a2_6dd9e65d_orig
http://img-fotki.yandex.ru/get/6425/5091629.7e/0_706a3_c525a707_orig
Так же пользуясь случаем хочу напомнить, что большое количество моих фонов можно найти тут: colourlovers.com/lover/yoksel/patterns
Попробуйте задать в настройках картинку или цвет фона, сохраните и посмотрите что получилось.
Идём дальше:
Вставляем заглавную картинку
Вкладка Header
Настройки в первом блоке отвечают за поведение заглавной картинки.
Второй блок - поинтереснее. Первый пункт отвечает за расположение заглавной картинки относительно других блоков в шапке, второй управляет расположением меню.
Экспериментируйте : )
А теперь самое время вспомнить, что дизайн у нас полурезиновый, поэтому заглавная картинка может начать повторяться или вообще вести себя странно, поэтому:
Задаем ширину журнала
Снова вкладка Page
Если ваша заглавная картинка должна занимать строго всю шапку по ширине, задайте фиксированную ширину.
Если картинки нет, или она спокойно переносит растягивание ленты - можно использовать полурезиновую ширину, с ней журнал лучше адаптируется под различные разрешения экрана.
А теперь
Ссылки на социальные сети
Вкладка Social networks
Верхняя настройка позволяет расположить кнопки в шапке либо в виджете профиля (убедитесь что у вас есть сайдбар и включен виджет профиля!).
Нижняя - выбор отображения иконок:
- большие
- маленькие
- иконки с текстом.
Обратите внимание, что если иконки находятся в шапке, иконки с текстом будут рядом с заголовком, а без текста - над заголовком либо в меню. Они кочууют, да.
Ниже задаются ссылки на ваши аккаунты в соцсетях и названия для этих ссылок.
Далее:
Настраиваем сайдбар
Вкладка Sidebar
Пунктир посередине намекает нам, что между настройками, которые на скриншоте, есть ещё всякое разное, но я оставила только самое интересное.
Первая настройка скроет сайдбар, если он вам не нужен.
Блок профиля - хороший способ кратко рассказать о себе вашим читателям.
Можете вставить свою фотографию и написать что-нибудь о себе, а можете вставить просто красивую картинку или любимые цитаты.
Сюда же можно переместить иконки социальных сетей, чтобы вся информация о вас была удобно расположена в одном месте
Включить или выключить отдельные блоки сайдбара, а так же выстроить их в желаемом порядке, можно в настройке Order of widgets in sidebar (порядок блоков в сайдбаре).
И напоследок:
Добавляем тени
Чтобы добавить тень ленте записей, вставьте код выбранной тени в блок .j-l-page.
Должно получиться примерно так:
.j-l-page {
margin: 0 auto;
box-shadow: 0 0 15px rgba(0,0,0, 1);
}
Легкая тень, рекомендуется светлого фона
Код: box-shadow: 0 0 15px rgba(100,100,100, 0.3);
Тёмная тень, подойдет для темного фона
Код: box-shadow: 0 0 15px rgba(0,0,0, 1);
Внимание: если вы не видите тени вокруг надписей с кодом, ваш браузер их не поддерживает.
Если задали тени, не забудьте задать ленте фон, чтобы тень не висела в воздухе.
Справочник по кодам Хамелеона
Если кто-то дочитал это всё до конца и решился на эксперименты, покажите что у вас получилось : )