Оформление ЖЖ на примере темы Flexible Squares

Jun 04, 2006 23:24

Поводом для написания данной статьи стало желание настроить оформление ЖЖ для себя - сделать его максимально индивидуальным. Ну и еще немного масла в огонь подлили вопросы некоторых людей, на которые я не сумел найти ответ в своей памяти.

Сам текст статьи с картинками, естественно, под

Поэтому - приступим к раскрашиванию своего блога.

При своих экспериментах я использовал Internet Explorer 6.0 - для совместимости со всеми наворотами современного Интернета. В жизни я им (IE) не пользуюсь.

По умолчанию считается, что вы уже давно вошли в ЖЖ под своим акаунтом и, соответственно, можете менять свои настройки. Заходим по ссылке http://www.livejournal.com/portal/ и попадаем в свой ЖЖ. Вверху наблюдается синяя (у меня - синяя) полоса, на которой идут надписи - "Портал, Журнал, Фотоальбом, Редактировать, Поиск, Магазин и т.д. Кажется, эта строка правильно называется "меню". В этом меню нас интересует пункт "Редактировать". При наведении мыши на слово "Редактировать" строкой ниже где-то там в конце справа появляется подпункт с названием "Оформление". Вот туда нам и надо.


Тут все расписано по шагам. По ним и пойдем.

Старая и новая система стилей отличаются довольно сильно. Пользоваться будем новой - она допускает больше индивидуальных настроек. Поэтому выбираем в выпадающем списке "Новая система (S2)" и жмем кнопку "Изменить". Страница просто перегружается, на ней ничего не изменяется. Теперь делаем шаг первый - выбираем схему оформления. Мне наиболее понравилась схема под названием Flexible Squares. Поэтому в выпадающем списке выбираем ее и жмем на находящуюся рядом кнопку "Изменить".

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

Шаг второй - Изменить вид страницы .

Язык мы выбираем русский - тема довольно неплохо его поддерживает. Нажимаем кнопку "Изменить", после чего страница опять перегружается. В пункте Темы оставляем все без изменения - в состоянии "(По умолчанию для стиля)". Почему так? Ведь мы стараемся сделать индивидуальный ЖЖ. А там стоят заранее сделанные авторами варианты оформления. Хотя, конечно, можно взять понравившийся из них и чуток с ним поиграться. Но мы не ищем легких путей в науке :)

Переходим к разделу Изменить отдельные параметры - тут и хранится то, ради чего мы затеяли все эти приколы с оформлением. Жмем кнопку "Настроить". После некоторого ожидания появляется страница, изображенная на скриншоте:


Тут мы видим семь вкладок с различными настройками - Presentation, Colors, Fonts, Images, Text, Sidebar, Custom CSS. Пойдем по порядку.

I. Presentation - настройки внешнего вида

1. Number of journal entries to show on recent entries page - тут указывается количество постов, которое будет отображаться на тиутльной странице вашего ЖЖ. По умолчанию стоит цифра 20. Рекомендую оставить - экономьте трафик своим френдам в офисах! А вот для изменения настроек ставим галочку напротив слов "Отключить настройки по умолчанию ", после чего в окне ввода вместо числа 20 ставим любое другое в разумных пределах.

2. Number of journal entries to show on friends page - количество постов во френдленте. Логика аналогична предыдущему пункту, только тут вы уже экономите свой трафик.

3. Disable customized comment pages for your journal - в процессе разработки, кто подскажет - буду благодарен!

4. Show user picture icons with each of your entries? Отвечает за отображение вашего юзерпика в каждом вашем посте. Состояние по умолчанию - Да. Отключает юзер-пик только в постах, в остальных местах (профиль и т.д.) ю-пик остается.

5. Set the user picture position for each entry - устанавливает выравнивание юзер-пика в постах относительно текста поста. Состояние по умолчанию - Left. Нагляднее - ниже:



6. Use friends colors when viewing Friends page - когда вы кого-то френдите, у вас есть возможность выделить определенный цвет текста и фона для юзерпика этого френда. Данная опция включает или отключает выбранное вами отображение. Мутно все тут, короче.

7. Use community userpics instead of poster's userpic - использование юзерпика сообщества вместо юзерпика автора поста в сообществе. Значение по умолчанию - Нет.

8. Set page alignment - установки выравнивания текста в вашем ЖЖ. По умолчанию текст центрируется отночительно экрана. Доступно также выравнивание по левому или по правому краю экрана.

9. Journal width - Ширина журнала. Задается либо в процентах, либо в пикселях. Проценты удобнее - они высчитываются относительно разрешения монитора того человека, который просматривает ваше ЖЖ, в то время как при задании ширины в пикселях существует возможность появление горизонтальной полосы прокрутки, что неэстетично. Значение по умолчанию - 80%.

10. Unit of journal width - единицы измерения ширины журнала. По умолчанию стоят проценты, доступны также пиксели. Данный пункт вкладки связан с предыдущим. То есть если в этом пункте выбраны проценты, то число, написанное в предыдущем пункте высчитывается как процент от разрешения монитора пользователя. В связи с этим следует быть внимательным - 800 px (пикселей) и 800% - две огромные разницы.

II. Colors - настройки цвета

1. Background color for the page - фоновый цвет вашего ЖЖ. Для изменения данного параметра ставим галочку чуть ниже напротив слов "Отключить настройки по умолчанию". А далее два пути - либо вводить код цвета в окно ввода (муторно), либо жать на кпопку с надписью "Choose". Жмем. В итоге загружается вот такое окно:


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

2. Text color for the page - цвет текста в вашем ЖЖ. Но это не цвет текста постов!!! Подбор настроек как в п. II.1

3. Background color for box containing the main contents of the page - второстепенный цвет для блока, в котором находится содержание страницы. Если сказать проще - то фоновый цвет блоков, содержащих ваши посты и календаря.
4. Background color of the outer table - фоновый цвет внешней области вашего ЖЖ. Физически находится выше, чем фоновый цвет всего ЖЖ. Используется применительно к таблице, содаржащей посты и календарь.

5. Background color of the entries - фоновый цвет самого поста, не включая заголовок и дату поста, но включая фоновый цвет юзерпика.

6. Text color of the entries - цвет текста поста.

7. Border color of the content and header/footer boxes - цвет границы блоков вашего ЖЖ - блок постов, блок календаря и т.д.

8. Background color of the subject, date and comment links - фоновый цвет для двух блоков - блока,содержащего название и дату поста и блока, содержащего ссылки на страницу комментариев, ссылку на пост, ссылку для занесения поста в мемориз.

9. Background color for the headers in the sidebar - цвет фона для заголовка в календаре.

10. Text color for the sidebar - цвет текста в календаре.

11. Background color of the header and footer - фоновый цвет блоков, содержащих ссылки на профиль, архив, френдленту и блока с более старыми постами.

12. Text color for the header and footer - цвет текста в блоках, содержащих ссылки на профиль, архив, френдленту и блока с более старыми постами.

13. Text color for the subject of the entries - цвет заголовка поста

14. Text color for the date of the entries - цвет текста с датой поста

15. Link color for both visited and unvisited links - цвет для посещенных и непосещенных ссылок

16. Link color on hover - цвет ссылок в момент наведения на них курсора

17. Link color for visited and unvisited comment links - цвет ссылок на страницу с комментариями

18. Link color for comment links on hover - цвет ссылки на страницу с комментариями в момент наведения на нее (ссылку) курсора.

19. Link color for visited and unvisited sidebar links - цвет ссылок на страницы с постами в календаре

20. Link color for sidebar links on hover - цвет ссылок в календаре в момент наведения на них курсора

21. Link color for visited and unvisited links for the header and footer - цвет ссылок в блоках, содержащих ссылки на профиль, архив, френдленту и блока с более старыми постами

22. Link color for comment links on hover for the header and footer - цвет ссылок в блоках, содержащих ссылки на профиль, архив, френдленту и блока с более старыми постами в момент наведения на них курсора. I

II. Fonts - настройки шрифтов

1. Font unit - единицы измерения шрифтов. По умолчанию стоят пиксели, мы же выбираем точки (points). Также доступна непонятная лично мне величина Em (кто знает - буду благодарен за науку).

2. Preferred/base font - базовый шрифт ЖЖ. Менять тут настройки следует аккуратно. Не стоит выбирать какой-то экзотический шрифт, ибо на машине того, кто просматривает ваше ЖЖ данного шрифта может не оказаться и в итоге ваш блог будет отображаться кривовато. Выбирать следует из стандартной поставки Windows - Arial, Comic Sans MS, Courier, Georgia, Impact, Tahoma, Times New Roman, Sans Serif и еще нескольких.

3. Alternative font style - альтернативный стиль шрифт - на случай, если основновной шрифт на машине пользователя таки отсутствует. Доступны варианты: Sans Serif, Serif, курсив, моноширинный и установленный в настрокайх браузера.

4. Base font size - базовый размер шрифта. По умолчанию стоит число 11. После того, как в первом пункте выбраны точки, сюда можно вписывать любои число. Размеры шрифтом практически идентичны таким же в Microdoft Word.

5. Font for the entry/date/entry subject- шрифт, которым отображается пост, дата и тема поста, местоположение, музыка, настроение.

6. Alternative font style - см. п. 3

7. Entry/date/subject font size - размер шрифта для поста, даты поста, заголовка поста

8. Date font size - размер шрифта даты поста. Имеет более высокий приоритет чем п. 7

9. Subject font size - размер шрифта заголовка поста. Имеет более высокий приоритет чем п. 7

10. Font for the sidebar - шрифт календаря.

11. Alternative font style - см. п. 3

12. Sidebar font size - размер шрифта в календаре. Можно ставить поменьше, все равно календарем редко кто пользуется ))

13. Font for the header and footer - тут задается шрифт для блока, содержащего ссылки на профиль, архив, френдленту и блока с более старыми постами

14. Alternative font style - см. п. 3

15. Header and footer font size - размер шрифта для блока, содержащего ссылки на профиль, архив, френдленту и блока с более старыми постами

16. Font for the title and subtitle - шрифт заголовка и подзаголовка вашего журнала.

17. Alternative font style - см. п. 3

18. Title font size - размер шрифта заголовка

19. Subtitle font size - размер шрифта подзаголовка

IV. Images - фоновый рисунок

Позволяет придать настоящую индивидуальность вашему ЖЖ.

1. Background image URL - ссылка на внешний файл с картинкой, которую вы бы хотели установить себе в качестве фоновой. Ближайший пример: фоновая картинка - это как обои на вашем Рабочем столе. По умолчанию картинка отсутсвует, поэтому ставим галочку в пункте "Отключить настройки по умолчанию" и в окне ввода прописываем ссылку на фоновую картинку.

2. Background image repeat - "Повторение" фоновой картинки. Если ваша фоновая картинка имеет небольшой размер (например, 300х200), то она не сможет залить собой весь фон вашего ЖЖ и будет сиротливо висеть в углу. В этом случае надо с ней что-то делать из ращрешенного нам: повторить ее по всей площади страницы (Repeat), не повторять (Don't repeat), повторить исключительно в линию (Repeat across only) и повторить исключительно вниз (Repeat down only)

3. Background image position - местонахождение вашей фоновой картинки: по центру (Centered), по центру слева (Center-left), по центру справа (Center-right), сверху (Top), верхний левый угол (Top-left), верхний правый угол (Top-right), внизу (Bottom), нижний левый угол (Bottom-left), нижний правый угол (Bottom-right), ну, и на конец, просто слева (Left) или просто справа (Right). Если вы, например, выставили картинку в левый нижний угол (Bottom-left), а она все равно растиражировалась по всей площади ЖЖ, то в таком случае в п.2 выставьте опцию Don't repeat.

4. Background image scrolling - опция, отвечающая за то, будет ли пролистываться картинка при скроллинге титульной страницы вашего ЖЖ. Имеет два положения - Scroll (пролистывать) и Fixed (зафиксированно). Мне больше нравится второе.

V. Text - настройки служебных текстов

Тут я расскажу вам как изменить текст различных служебных полей - типа музыки, настроения, текущего местоположения, комментариев и т.д.

1. Text for 'Current Music' - текст для поля "Текущая музыка". Вписываем сюда что-то типа "В наушниках", "Музло", "Музон", "Сейчас играет" - насколько хватит фантазии.

2. Text for 'Current Mood' - текст для текущего настроения

3. Text for 'Current Location' - текст, показывающий ваше текущее местоположение

4. Link text to leave a comment - текст для ссылки "оставить комментарий" - любимое место полета фантазии многих блоггеров ))

5. Link text to read comments - текст для ссылки на чтение всего количество комментариев и сами комментарии. Пишется в формате "# комментарий // # комментария // # комментариев", то есть "1 комментарий // 4 комментария // 18 комментариев". Меняем ,соответственно, на, например, такое: "1 поумничал // 4 поумничало // 18 учудили"

6. Link text to leave a comment on friends view entry - текст ссылки для каментов во френдленте

7. Link text to read comments on a friends view entry - текст для ссылки на чтение всего количество комментариев и сами комментарии во френдленте. Синтаксис аналогичен пункту 5.

8. Text used to link to the 'Recent Entries' view - текст для ссылки на последние посты в вашем ЖЖ

9. Text used to link to the 'Friends' view - текст ссылки на френд-ленту. Сюда пишут что-то типа "Враги", "Френды", "Камрады" и т.д.

10. Text used to link to the 'User Information' view - текст ссылки на ваше юзер-инфо (профиль).

11. Text used to link to the 'Archive' view - текст ссылки на календарь (раскладка постов по дням и месяцам)

12. Text to replace a subject line when no subject is specified - текст отображаемый в случае, если вы забыли прописать заголовок поста

13. Text for an entry's edit link - текст для ссылки на редактирование поста, виден только вам

14. Text for an entry's edit tags link - текст ссылки дял редактирования меток, виден только вам

15. Text to add an entry to the memories - тект для добавления записи в избранное (в мемориз!)

16. Text to link to the previous entry - текст ссылки на предыдущий пост

17. Text to link to the next entry - текст ссылки на следующий пост

18. Text to show in a link to skip back through entries - текст для ссылки на несколько постов назад

19. Text to show in a link to skip forward through entries - текст для ссылки на несколько постов назад. С синтаксисосм пока есть вопросы. К тому же, сдается мне, что пункты с 13 по 19 включительно в данной схеме не работают вообще.

VI. Sidebar - настройки календаря

Если быть точным, то sidebar - это не совсем календарь. Но пока более точного определения подобрать у меня не получается.

1. Show the sidebar? - показывать календарь? По умолчанию календарь показывается. Но я бы его отключил - только место занимает.

2. Set sidebar position - позиция календаря - слева (Left) или справа (Right). По умолчанию висит справа.

3. Show the default user picture on the sidebar - показывать ли ваш юзерпик в календаре. По умолчанию показывается.

4. Show the blurb/free text in the sidebar? - возможность отображения заголовка и краткого текста в календаре

5. Title of the blurb sidebar box - заголовок календаря. Хотя это лично я называю его заголовком, тут (http://moon-shade.livejournal.com/153409.html) его называют несколько иначе и дают несколько иные советы

6. Text to be added to the sidebar - текст в календаре под заголовком. Например, "тут могла бы быть ваша реклама". sidebar.jpeg

7. Title of the links sidebar box - заголовк для ссылок

8. Show the calendar in the sidebar? - показывать ли сам календарь? По умолчанию - показывается.

9. Set sidebar width, in pixels - установить ширину календаря, в пикселах

10. First box in the sidebar, Second box in the sidebar, Third box in the sidebar, Fourth box in the sidebar - порядок отображения различных позиций в календаре - юзерпика, blurb, листа ссылок и календаря.

VII. Custom CSS - подключение внешних каскадных таблиц стилей.

Про этот раздел ничего сказано не будет, ибо тот, кто понял заголовок данного пункта, в хелпе уже не нуждается.

Все это написано для себя - чтобы не забыть  и для вас - может, кому-то и пригодится. Поэтому прошу воздержаться от каментов типа "ни асилил, многа букф".

оформление

Previous post Next post
Up