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

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

День десятый: хозяйке на заметку

Тут некоторые жалуются, что переделывать уже больше нечего - всё сделали : ))
Вообще так и должно быть, хотя при желании всегда можно найти что подправить

Собственно, с оформлением журнала мы действительно закончили, и напоследок я поделюсь некоторыми тонкостями, которые, может быть, будут вам полезны.

Начнём с технических подробностей: дифференциация страниц - как писать разные коды для разных разделов журнала.

Как это можно сделать? С помощью классов, заданных body, и позволяющих нам отличать одну страницу от другой.

Они заданы не во всех стилях, но в самых нужных они есть.

Помимо них в классах body может содержаться другая информация, например, класс выбранного макета страницы, но мне не приходилось ими пользоваться, поэтому про них мы говорить не будем.

Итак, классы страниц:

Bloggish, Expressive/Mixit, Flexible Squares

.lj-view-recent - свежие записи
.lj-view-friends - лента друзей
.lj-view-archive - календарь
.lj-view-month - отдельный месяц
.lj-view-day - отдельный день
.lj-view-entry - отдельный пост
.lj-view-tags - страница меток

Minimalism

.view-recent - свежие записи
.view-friends - лента друзей
.view-archive - календарь
.view-month - отдельный месяц
.view-day - отдельный день
.view-entry - отдельный пост
.view-tags - страница меток

Smooth Sailing

страницы не имеют своих классов

Как этим пользоваться?

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

.lj-view-recent div.user-icon{
float:left;
margin-right:10px;
}

.lj-view-friends div.user-icon{
float:right;
margin-left:10px;
}

Как видите, всё очень просто. Перед классом элемента ставите класс страницы, и ваш код будет работать только для указанной страницы.

Теоретически, так можно все разделы журнала оформить по-разному, но это задача для настоящих маньяков : )


Следующий полезный навык - отлов багов

В переводе на русский - поиск ошибок : )

Первейшая задача - локализовать проблему, понять в каком именно блоке ошибка.

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

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

Решение: перенесите весь код в отдельный файл, удалите всё из поля кодов и из файла вставляйте коды блоков по одному - по два, пока не появится ошибка на странице.
Так вы узнаете в каких именно блоках ошибка и сможете рассмотреть их более детально.

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

Ну и конечно имеет смысл проверить, что вы обращаетесь к существующм классам элементов, а не к свежепридуманным вами : )
Используйте уроки как справочник, чтобы убедиться что вы не накосячили в названиях классов.
Подглядывайте в уроки, пока не будете 100%-но уверены, что всё верно напишете по памяти.

Web Developer screenshot
Теперь информация для тех, кто уже увлёкся созданием дизайнов и собирается копать дальше в этом направлении.

Есть прекрасный инструмент для работы со стилями: Web Developer

Это аддон к мозилле, который позволяет узнавать классы и id элементов, смотреть строение страницы и, самое главное, редактировать Css и мгновенно наблюдать как ваши стили применяются на странице.

Никаких подсказок и подсветки синтаксиса, коды писать руками, но, если вы уже достаточно уверено ориентируетесь в кодах, - думаю, вы оцените этот инструмент по достоинству : )

Подробнее читать тут

brain
И ещё одна информация, которая, скорее всего, будет полезна всем: не берите коды штурмом, пожалейте свой мозг : )

Если чувствуете, что мозги кипят - займитесь чем-то другим. Прогуляйтесь, выпейте чаю с печенюшками (кстати, сладкий чай и шоколадки улучшают деятельность мозга) - отвлекитесь, одним словом.

Дайте вашим мозгам переварить новую непривычную информацию.

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


Вишня? Ну а теперь по случаю завершения курса предлагается устроить чаепитие с плюшками : )

Все желающие могут похвастаться тем что у них получилось.

Для этого в теме коммента укажите стиль взятый за основу.
В самом комменте дайте ссылку на журнал где смотреть, так же напишите всё что сочтёте нужным добавить по поводу своего оформления.
Можете приложить небольшой скриншот.
Скриншот небольшой, до 300px по большей стороне.
Большинство сервисов умеют выдавать картинки небольшого размера

Комменты с большими картинками будут удалены, не щёлкайте клювом.

Как сделать скриншот?

Откройте нужную страницу на полный экран
Нажмите на клавиатуре кнопку Print Screen (она вверху справа)
Откройте графический редактор, создайте новый файл и вставьте туда ваш скриншот (Ctrl+V).
Сохраните как обычное изображение и залейте его на какой-либо картинкохостинг.


Ну и последнее.

Друзья мои, посмотрите какой огромный путь вы прошли!
У вас есть все основания гордиться собой : )

Кроме того, теперь в профиле своего журнала можете гордо написать что дизайн сделан вами собственноручно! Если использовали свои же картинки - тоже напишите, это вполне повод для гордости.
Если брали не свои - уместно указать где брали, в знак благодарности к автору подборки.

 

1. Уроки никуда не денутся, и все могут пользоваться ими и дальше.

2. Я буду продолжать отвечать на вопросы к урокам, но при одном условии: вы пробуете делать сами и просите помощи только если не получается.
Если вы раскрыли клювик и ждёте готовые коды - вы не по адресу.
Напротив - если вы думаете, действуете, экспериментируете - я всегда рада помочь.
Задавайте вопросы строго по теме поста

3. Если вы производите стилей больше, чем успеваете носить - добро пожаловать в layouts_ru : )

На память об участии в акции можете повесить в профиль баннер:







Навигация по урокам
Назад День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку
 

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



в живую здесь - http://community.livejournal.com/skyisbeautiful/
Ну а я хоть не выполняла домашние задания, зато исправно читала ваш учебник:) Спасибо за этот титанический труд, и я надеюсь когда-нибудь выучить по нему Expressive!!!
Потрясающе! Ты проделала огромную работу!!!!!
У меня два вопроса возникло. Как представить дизайн журнала , не скриншот, а как в сообществах? И ещё. Каким способом представлять код? Я заметила, он всегда в сообществах в отдельной рамке с стрелками. Как это сделать?
Ух, Ох, Ах!!!
Огромное вам спасибо за проделанную работу!!! Побольше бы таких людей в разных областях :))
Если честно то особой гармонии и красоты в дизайне я не добивалась - целью было понять что надо писать и как это работает.
Больше всего увлекал и завораживал сам процесс превращения луковицы в розочку :)) Так что буду пробовать еще и еще и еще... Как говорится - нету предела для совершенства - и это прекрасно!!!
Стиль - Expressive

Clean/Simple
спасибо!
мой стиль не в списке послушных, и я стремилась лишь к аскетизму, но мне так нравится :)
Сделала вверху украшение в виде своих фотографий, кое-что подредактировала
Уроки законспектирую - на будущее :)
Огромная благодарность Вам, дорогая Ёксель! За Ваш труд и Ваше долготерпение, что не послали меня куда подальше за моё паникёрство! Дизайн стоит уже в моём родном ЖЖ и я уже принимаю поздравления. Сейчас напишу пост о Вас.

Милая yoksel, я не знаю, какие слова найти, чтобы отблагодарить Вас - за ум, за щедрость, за такт, за юмор, за терпение, и ещё за то, что Вы всё понимаете :)

Насчёт кипящих мозгов - прямо в точку!!! )))
На основе стиля Subway Black, Expressive
Спасибо Вам еще раз, я получила огромное удовольствие от работы :)
Я особо не напрягалась, правда, сложного ничего не делала, но результатом довольна на все сто :)))
Вот мой результат:
Bloggish Wedding
получила как раз то, что всегда и хотела. главным своим достижением считаю разделители для комментариев, которых в оригинале не было и которые мне удалось победить.
сам журнал:
http://morikelebven.livejournal.com/

и скрин комментариев:


большое спасибо за уроки, за терпение и помощь!
?

Log in

No account? Create an account