Уроки по оформлению ЖЖ для S2. Часть III.
В этом уроке я расскажу о том, как лучше выбрать подходящий стиль и что понадобится для переделки.
Важные моменты:
1. чтобы никто не наткнулся в вашем журнале на ремонтные работы, лучше всего создать сообщество и делать свой дизайн на нём.
Почему сообщество, а не журнал?
Потому что для его создания и редактирования стиля в нём вам не надо будет выходить из ЖЖ и заходить под другим аккаунтом.
Редактируемый журнал выбирается на странице настроек вверху справа. Дальше настройки сообщества ничем не отличаются от обычного журнала, и потом надо будет просто перенести стиль из тестового сообщества в свой журнал.
Особо это имеет смысл если вы затеяли что-то грандиозное или планируете сделать несколько стилей.
2. за основу лучше брать уже готовые стили из тематических сообществ, потому что на создание стиля с нуля у вас уйдёт очень много времени, особенно если вы не имели до этого дела с Css.
Мои стили можно переделывать как угодно, и разрешение для этого спрашивать не нужно.
Некоторые авторы не разрешают переделывать, поэтому внимательно изучайте правила сообщества где берёте.
Вообще всегда внимательно читайте правила сообщества. Не только здесь, во всём ЖЖ. Это полезная привычка
Для того чтобы ознакомиться со всеми имеющимися стилями на основе S2, посмотрите таблицу стилей
Всего в каталоге представлена 31 группа стилей. В каждой группе содержится несколько стилей (от 1 до 250), имеющих общие свойства. То есть внутри одной группы стилей все настройки и возможности идентичны.
Выбираем основу
Если вы хотите только добавить фон страницы, выбирайте любой стиль. Фон можно добавить в абсолютно любой стиль.
Поменять цвета оформления так же можно в любом стиле. Как правило, настройками, иногда - кодами.
Чтобы разобраться в настройках S2, используйте этот пост
Пост писался по Flexible Squares, поэтому настройки для других групп стилей могут отличатся, но общее представление о логике страницы настроек получить можно.
Если вы планируете более серьёзные изменения, круг подходящих стилей будет ограничен всего 5-ю группами:
- Bloggish
- Expressive/Mixit
- Flexible Squares
- Minimalism
- Smooth Sailing
Важно знать, что стиль для переделки надо выбирать исходя из свойств, а не из цветовой гаммы (как блондинка ноутбук - "Он розовенький!!!"). Потому что цвета всегда можно изменить, в отличе от свойств.
Каждая группа стилей имеет свои особенности . Самые важные (на мой взгляд) различия заключаются:
- в расположении меню (горизонтальное вверху или в столбик в сайдбаре)
- в возможности менять местами блоки сайдбара и отключать лишние
- в виде ссылкок на комментарии под постом
Изучать различия начнём с меню:
Bloggish
Меню находится в сайдбаре
Expressive
Меню в шапке журнала, с помощью кодов можно сделать его столбиком и/или передвинуть в другое место.
Пример
Есть ссылка на Memories (избранное)
Flexible Squares
Меню в шапке журнала, с помощью кодов можно сделать его столбиком и/или передвинуть в другое место
Пример
Есть ссылка на Website (сайт, который задан в профиле)
Minimalism
Меню может быть горизонтальным или вертикальным, в зависимости от выбранного стиля. С помощью кодов можно изменить его вид передвинуть в другое место
В этом же меню могут быть ссылки на Rss и Добавление в друзья
Smooth Sailing
Меню в шапке журнала. С помощью кодов можно сделать его столбиком и/или передвинуть в другое место
Пример
Есть ссылка на Memories (избранное) и навигация по страницам.
Переназначать ссылки в верхнем меню нельзя (за исключением Website), но можно скрыть стандартное меню и создать своё - через список ссылок.
Список ссылок есть во всех стилях.
Другой способ сделать меню - вставить нужный код в поле для текста в сайдбаре. Так же делается меню в виде картинки (ImageMap).
Этот способ доступен только для Expressive и Flexible Squares
Второе различие - настраиваемость сайдбара
Bloggish
не настраивается, но лишние блоки можно скрыть кодами
Expressive
блоки сайдбара можно скрывать и менять местами. Удобно делать своё меню
Flexible Squares
блоки сайдбара можно скрывать и менять местами. Удобно делать своё меню
Minimalism
блоки сайдбара можно скрывать, но нельзя менять местами!
Своё меню делать неудобно, но пункты стандартного меню имеют нужные идетификаторы, для того чтобы менять их вид как угодно.
В других стилях такой возможности нет.
Smooth Sailing
блоки сайдбара можно скрывать и менять местами.
Своё меню сделать не получится, потому что для этого надо будет скрыть верхнее меню, а в нём навигация по страницам, она тоже пропадёт.
Исходя из выше сказанного, самые удобные сайдбары в Expressive и Flexible Squares.
Единственный минус Expressive - заголовки сайдбара не настраиваются и не русифицируются.
Это можно сделать создав слой в платном аккаунте или скрыв заголовки и задав блокам сайдбара фоновые картинки с нужным текстом.
Пример 1, пример 2
С недавнего времени заголовки сайдбара можно задать в настройках
Третье различие между группами - вид ссылок на комментарии
Обратите внимание, что хозяин журнала и его посетители видят разное количество ссылок под постом. Например, посетителям не будут видны Edit Entry и Edit Tags, потому что у них нет прав редактировать ваши посты и метки.
Bloggish: рядом с ссылками показывается время записи, это можно отключить в настройках
Expressive
Flexible Squares: из стилей пригодных для переделки это единственный, в котором под постом всего две ссылки
Minimalism: в зависимости от выбранного стиля, ссылки на коммменты могут сильно различаться. Кроме того, у каждой ссылки под постом есть свой идетификатор, так что вы можете убрать лишние и/или настроить внешний вид каждой ссылки по отдельности
a.
b.
c.
d.
Smooth Sailing
Итак, на выбор есть три варианта вида ссылок:
- две ссылки под постом (Flexible Squares)
- гибко настраиваемые ссылки (Minimalism)
- много ссылок, количеством которых нельзя управлять, а вид можно менять только всем сразу (Bloggish, Expressive, Smooth Sailing)
Имея в виду эти принципиальные различия в свойствах стилей, выберите подходящий дизайн. Затем ему нужно будет придать желаемый вид с помощью Css.
Самый простой способ - взять готовые коды и просто переделать под свои нужды. Выбирайте самый подходящий по виду, чтобы потом меньше переделывать.
Примеры переделок: галерея раз, галерея два
Правило хорошего тона - указывать профиле источник кода, особенно если внесённые изменения незначительны. Готовый код экономит вам тучу времени, тем более что большинство юзеров просто не в состоянии написать его сами.
Указывая источник кода, вы выражаете таким образом признательность мастеру, который проделал за вас значительную часть работы. Постарайтесь следовать этому правилу вне зависимости от того где вы брали код.
Написать примеры всех кодов для всех стилей совершенно невозможно, потому что их будет просто громадное количество. Поэтому я предлагаю вам воспользоваться справочной информацией:
- о том какие Css-коды как работают можно узнать из этой таблицы и её продолжения.
Это не исчерпывающая информация, и далеко не единственная в сети. Можете поискать яндексом "Справочник по Css" или просто стиль по названию. Информации, на самом деле, море.
- узнать скелет страницы и свойство любого объекта можно с помощью аддона к Мозилле - Web Developer.
Урок по использованию аддона.
С помощью него же можно писать стили для журнала, обычно я именно его использую.
- огромная база справочной информации по кодам находится в ru_designhelp, пользуйтесь метками или поиском по сообществу. Если не нашли - создавайте там же новый пост.
Обратите внимание, что неправильно оформленные посты не пропускаются, чтобы потом не тратить время на выяснение подробностей. Правила оформления поста в сайдбаре справа.
Желаю понятных кодов и красивых дизайнов : )
Навигация по урокам: 1 2 3
Важные моменты:
1. чтобы никто не наткнулся в вашем журнале на ремонтные работы, лучше всего создать сообщество и делать свой дизайн на нём.
Почему сообщество, а не журнал?
Потому что для его создания и редактирования стиля в нём вам не надо будет выходить из ЖЖ и заходить под другим аккаунтом.
Редактируемый журнал выбирается на странице настроек вверху справа. Дальше настройки сообщества ничем не отличаются от обычного журнала, и потом надо будет просто перенести стиль из тестового сообщества в свой журнал.
Особо это имеет смысл если вы затеяли что-то грандиозное или планируете сделать несколько стилей.
2. за основу лучше брать уже готовые стили из тематических сообществ, потому что на создание стиля с нуля у вас уйдёт очень много времени, особенно если вы не имели до этого дела с Css.
Мои стили можно переделывать как угодно, и разрешение для этого спрашивать не нужно.
Некоторые авторы не разрешают переделывать, поэтому внимательно изучайте правила сообщества где берёте.
Вообще всегда внимательно читайте правила сообщества. Не только здесь, во всём ЖЖ. Это полезная привычка
Для того чтобы ознакомиться со всеми имеющимися стилями на основе S2, посмотрите таблицу стилей
Всего в каталоге представлена 31 группа стилей. В каждой группе содержится несколько стилей (от 1 до 250), имеющих общие свойства. То есть внутри одной группы стилей все настройки и возможности идентичны.
Выбираем основу
Если вы хотите только добавить фон страницы, выбирайте любой стиль. Фон можно добавить в абсолютно любой стиль.
Поменять цвета оформления так же можно в любом стиле. Как правило, настройками, иногда - кодами.
Чтобы разобраться в настройках S2, используйте этот пост
Пост писался по Flexible Squares, поэтому настройки для других групп стилей могут отличатся, но общее представление о логике страницы настроек получить можно.
Если вы планируете более серьёзные изменения, круг подходящих стилей будет ограничен всего 5-ю группами:
- Bloggish
- Expressive/Mixit
- Flexible Squares
- Minimalism
- Smooth Sailing
Важно знать, что стиль для переделки надо выбирать исходя из свойств, а не из цветовой гаммы (как блондинка ноутбук - "Он розовенький!!!"). Потому что цвета всегда можно изменить, в отличе от свойств.
Каждая группа стилей имеет свои особенности . Самые важные (на мой взгляд) различия заключаются:
- в расположении меню (горизонтальное вверху или в столбик в сайдбаре)
- в возможности менять местами блоки сайдбара и отключать лишние
- в виде ссылкок на комментарии под постом
Изучать различия начнём с меню:
Bloggish
Меню находится в сайдбаре
Expressive
Меню в шапке журнала, с помощью кодов можно сделать его столбиком и/или передвинуть в другое место.
Пример
Есть ссылка на Memories (избранное)
Flexible Squares
Меню в шапке журнала, с помощью кодов можно сделать его столбиком и/или передвинуть в другое место
Пример
Есть ссылка на Website (сайт, который задан в профиле)
Minimalism
Меню может быть горизонтальным или вертикальным, в зависимости от выбранного стиля. С помощью кодов можно изменить его вид передвинуть в другое место
В этом же меню могут быть ссылки на Rss и Добавление в друзья
Smooth Sailing
Меню в шапке журнала. С помощью кодов можно сделать его столбиком и/или передвинуть в другое место
Пример
Есть ссылка на Memories (избранное) и навигация по страницам.
Переназначать ссылки в верхнем меню нельзя (за исключением Website), но можно скрыть стандартное меню и создать своё - через список ссылок.
Список ссылок есть во всех стилях.
Другой способ сделать меню - вставить нужный код в поле для текста в сайдбаре. Так же делается меню в виде картинки (ImageMap).
Этот способ доступен только для Expressive и Flexible Squares
Второе различие - настраиваемость сайдбара
Bloggish
не настраивается, но лишние блоки можно скрыть кодами
Expressive
блоки сайдбара можно скрывать и менять местами. Удобно делать своё меню
Flexible Squares
блоки сайдбара можно скрывать и менять местами. Удобно делать своё меню
Minimalism
блоки сайдбара можно скрывать, но нельзя менять местами!
Своё меню делать неудобно, но пункты стандартного меню имеют нужные идетификаторы, для того чтобы менять их вид как угодно.
В других стилях такой возможности нет.
Smooth Sailing
блоки сайдбара можно скрывать и менять местами.
Своё меню сделать не получится, потому что для этого надо будет скрыть верхнее меню, а в нём навигация по страницам, она тоже пропадёт.
Исходя из выше сказанного, самые удобные сайдбары в Expressive и Flexible Squares.
Единственный минус Expressive - заголовки сайдбара не настраиваются и не русифицируются.
Это можно сделать создав слой в платном аккаунте или скрыв заголовки и задав блокам сайдбара фоновые картинки с нужным текстом.
Пример 1, пример 2
С недавнего времени заголовки сайдбара можно задать в настройках
Третье различие между группами - вид ссылок на комментарии
Обратите внимание, что хозяин журнала и его посетители видят разное количество ссылок под постом. Например, посетителям не будут видны Edit Entry и Edit Tags, потому что у них нет прав редактировать ваши посты и метки.
Bloggish: рядом с ссылками показывается время записи, это можно отключить в настройках
Expressive
Flexible Squares: из стилей пригодных для переделки это единственный, в котором под постом всего две ссылки
Minimalism: в зависимости от выбранного стиля, ссылки на коммменты могут сильно различаться. Кроме того, у каждой ссылки под постом есть свой идетификатор, так что вы можете убрать лишние и/или настроить внешний вид каждой ссылки по отдельности
a.
b.
c.
d.
Smooth Sailing
Итак, на выбор есть три варианта вида ссылок:
- две ссылки под постом (Flexible Squares)
- гибко настраиваемые ссылки (Minimalism)
- много ссылок, количеством которых нельзя управлять, а вид можно менять только всем сразу (Bloggish, Expressive, Smooth Sailing)
Имея в виду эти принципиальные различия в свойствах стилей, выберите подходящий дизайн. Затем ему нужно будет придать желаемый вид с помощью Css.
Самый простой способ - взять готовые коды и просто переделать под свои нужды. Выбирайте самый подходящий по виду, чтобы потом меньше переделывать.
Примеры переделок: галерея раз, галерея два
Правило хорошего тона - указывать профиле источник кода, особенно если внесённые изменения незначительны. Готовый код экономит вам тучу времени, тем более что большинство юзеров просто не в состоянии написать его сами.
Указывая источник кода, вы выражаете таким образом признательность мастеру, который проделал за вас значительную часть работы. Постарайтесь следовать этому правилу вне зависимости от того где вы брали код.
Написать примеры всех кодов для всех стилей совершенно невозможно, потому что их будет просто громадное количество. Поэтому я предлагаю вам воспользоваться справочной информацией:
- о том какие Css-коды как работают можно узнать из этой таблицы и её продолжения.
Это не исчерпывающая информация, и далеко не единственная в сети. Можете поискать яндексом "Справочник по Css" или просто стиль по названию. Информации, на самом деле, море.
- узнать скелет страницы и свойство любого объекта можно с помощью аддона к Мозилле - Web Developer.
Урок по использованию аддона.
С помощью него же можно писать стили для журнала, обычно я именно его использую.
- огромная база справочной информации по кодам находится в ru_designhelp, пользуйтесь метками или поиском по сообществу. Если не нашли - создавайте там же новый пост.
Обратите внимание, что неправильно оформленные посты не пропускаются, чтобы потом не тратить время на выяснение подробностей. Правила оформления поста в сайдбаре справа.
Желаю понятных кодов и красивых дизайнов : )
Навигация по урокам: 1 2 3