Обложки для журналов
от 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);


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

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

Если кто-то дочитал это всё до конца и решился на эксперименты, покажите что у вас получилось : )
Вступите в сообщество, чтобы увидеть все дизайны
Здорово!
Спасибо большое за раскраску.
Это именно то, что мне не хватало в прошлых шаблонах.
Попробую на каникулах обязательно.
А то такие хорошие картинки для шапки пропадают))
А я похвастаться хочу. Настроила хамелеончика под себя, очень довольна.
Единственное что, не нашла, где менять цвета ссылок. Вроде бы, ссылки на социальные сети - это несколько иное, верно?
Настройка шрифтов планируется, но её пока нет, поэтому сейчас это можно сделать только кодом

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

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


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

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

Edited at 2012-12-24 11:02 (UTC)
Очень симпатично выглядит Chameleon в таком виде, хотя до этого как-то он мне не приглянулся. Напоминает утреннюю деловую газету.

А вот эти колонки на скриншотах, как это сделано? Это возможность шаблона?
собственно, под газету и делался : )

а колонки это Css3 http://www.w3schools.com/css3/css3_multiple_columns.asp. Волшебная штука, только с ними надо аккуратнее, потому что картинки в колонках выглядят не очень, значит применять их можно только к элементам с текстом

спасибо большое! как раз хотела новый дизайн для сообщества :) тест-страничка http://molkoholics.livejournal.com/

вопрос: можно ли в сайдбаре, рядом с заголовками блоков (Profile, Links, Tags...), поставить маленькие картинки, как здесь http://placebo-russia.livejournal.com/
и можно ли сделать заголовок журнала курсивом?

Edited at 2012-12-24 17:13 (UTC)
Добрый день

1) как сделать шрифт чуть темнее тегов под постом
2)тэги слева от страницы, не поместились все
3)как сделать больше постов на странице
Найдите и отредактируйте

.j-e-meta A,
.j-e-meta A:visited {
color: #AAA;
}


> тэги слева от страницы, не поместились все

Проверьте настройки облака меток в настройках сайдбара

> сделать больше постов на странице

http://www.livejournal.com/customize/options.bmlNumber of journal entries to show on recent entries page
очень здорово - буду и я тренироваться:) только я так поняла код черно-белый, а загрузка картинки и т.д.- все настраивает человек сам? уже в настройках стиля?

Edited at 2012-12-24 19:55 (UTC)
спасибо! с удовольствием начала осваивать.))
Пока журнал выглядит так: http://raisa-obrazcova.livejournal.com/

А еще у меня вопросы:
1) подскажите, как вы добавили в хедере ссылку "Сайт". И можно ли вообще взять и заменить ссылки из "Избранное", "Архив" и т.д. на внутренние страницы моего журнала?
2) в соц.медиа ссылках у меня не активен первый пункт "Добавить в друзья". Это можно как-то изменить?
Имеет смысл добавить фон ленты, вкладка Page → Background color of the feed

> подскажите, как вы добавили в хедере ссылку "Сайт"

Сайт и название для него задаются в редактировании профиля

> И можно ли вообще взять и заменить ссылки из "Избранное", "Архив" и т.д. на внутренние страницы моего журнала?

Нет. Но если они вам не нужны - удалите их названия в настройках меню, ссылки должны исчезнуть со страницы

> в соц.медиа ссылках у меня не активен первый пункт "Добавить в друзья". Это можно как-то изменить?

а вы видите эту кнопку на странице?
?

Log in