Хамелеон: модель для сборки (S2)

Давно хотела сделать что-то простое черно-белое, как Georgia, и вот результат: дизайн-конструктор на основе нового стиля Chameleon!



Увеличить


Возможности:

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


И всё это через настройки дизайна! : )


Как ставить и настраивать?


Установите 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 { 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 { padding: 2px; 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: 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-size: 14px; } #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





Я выделила основые поля, но остальные настройки тоже можно крутить и дёргать, экспериментируйте.


Можно использовать мои фоны:







Так же пользуясь случаем хочу напомнить, что большое количество моих фонов можно найти тут: 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);
}








Внимание: если вы не видите тени вокруг надписей с кодом, ваш браузер их не поддерживает.





Если кто-то дочитал это всё до конца и решился на эксперименты, покажите что у вас получилось : )