Обложки для журналов
от Yoksel

Дизайны для ЖЖ

Хамелеон: модель для сборки (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.cssNO
2. В поле Custom stylesheet вставляется код:




Должен получиться простой черно-белый дизайн.
Можно оставить так, а можно в полной мере воспользоваться возможностями Хамелеона : )

Вот какие варианты получились у меня (картинки кликабельны):




Как видите, можно получить несколько шаблонов с разным расположением элементов.
Итак, поехали!

Меняем фон


Настройки дизайна, вкладка 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);


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

Справочник по кодам Хамелеона

Если кто-то дочитал это всё до конца и решился на эксперименты, покажите что у вас получилось : )
Вступите в сообщество, чтобы увидеть все дизайны
промо journals_covers август 1, 2013 11:15 64
Разместить за 200 жетонов
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
Здорово!
Спасибо большое за раскраску.
Это именно то, что мне не хватало в прошлых шаблонах.
Попробую на каникулах обязательно.
А то такие хорошие картинки для шапки пропадают))
А я похвастаться хочу. Настроила хамелеончика под себя, очень довольна.
Единственное что, не нашла, где менять цвета ссылок. Вроде бы, ссылки на социальные сети - это несколько иное, верно?
Настройка шрифтов планируется, но её пока нет, поэтому сейчас это можно сделать только кодом

цвет всех ссылок меняется так:

A {
color: #22729c;
}
A:hover {
color: #4c8eb0;
}


если вы хотите помимо этого покрасить ссылки в каких-то отдельных местах - свистите

Мне нравится что у вас получилось : )

Edited at 2012-12-24 11:02 (UTC)
?

Log in

No account? Create an account