Уроки по дизайну ЖЖ. Часть II.

[yoksel]

Внимание: это уроки для устаревшей системы стилей S1, хотя, возможно, вы найдете в посте полезную информацию по CSS.
Перейти к актуальным урокам →
Что такое CSS?
Это каскадные таблицы стиля для HTML-документа, а если проще - язык, на котором мы объясняем нашему дизайну каким же мы хотим его видеть.

Comments

[eediter]

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

Было бы неплохо указать на то, что статья относится к S1. А уже тем, кто немного "втыкает", показать все плюсы каскадных таблиц стилей на примере разбора простенького макета, измененного средствами CSS, на S2-базовом аккаунте. Там больший контраст на CSS непосредственно

Один момент: "образца видно не будет, так что не делаю". А про рамку-то забыли (border:1px solid #ccc;) :)

какие-то глюки с комментами..

[yoksel]

желающим изучать CSS я бы не советовала пользоваться этими уроками, я пытаюсь упростить всё насколько возможно : )

про S2 вообще не в курсе. Может как-нить и гляну.. : ) вернее, я уже смотрела, но поняла что css мне ближе и понятнее : )) и зачем S2 для демонстрации стилей?
Для дизов, как я понимаю, большинство юзает S1, и зачем изобретать велосипед с S2, если вид журнала меняется фактически копипастом? Или я чего-то не понимаю? просветите меня в области S2 : )

Макет будет, в следующем уроке или через один. Я хочу сначала описать ЧТО можно сделать, а потом уже КАК. Не думаю что имело бы смысл начинать с HTML-кода, мы же всё равно к нему доступ не имеем и полностью свою вёрстку не можем сделать.

Там больший контраст на CSS непосредственно
не поняла смысл фразы

Один момент: "образца видно не будет, так что не делаю". А про рамку-то забыли (border:1px solid #ccc;) :)
ну там же не про рамки спич : ))

Это не глюки, это я не нашел, где редактировать коммент

[eediter]

Ок, я подойду с другой стороны ;)

Что гласит нам страница Customize? Я процитирую:

• S1 - For users who are comfortable with HTML and CSS. (первый пункт)
• S2 - For users who don't know HTML or CSS, or make only minor alterations (второй пункт)

Ну факты на лицо: S1 - это инструмент, а S2 - какашка*. В принципе, я в какой-то мере согласен с этим, ведь в S2 мы действительно никак на сам каркас повлиять не можем. Именно это и привело к всеобщему заблуждению, что при помощи S2 из базового акка ничего не выжмешь. Вы очень верно заметили по поводу копипаста! Большинство юзеров именно так и поступают, наткнувшись на отличный тутор с готовыми вариантами s1-фишек. Для оформления своего я использовал S2.
Немного об S2

Фишка S2-базового не в том, что можно посчелкать в опциях и изменить цвет текста и фон, а в том, что управление внешним видом осуществляется средствами CSS. При изучении общедоступных макетов я выделил Flexible Squares. Он наиболее "чистый", соответственно изменения во внешний вид внести легче, чем в остальные. Объясняю смысл непонятой

Re: Это не глюки, это я не нашел, где редактировать комме

[yoksel]

про копипаст речь была про смену диза путём вставки готового кода, а не про возню с его кусками

[eediter]

Ок, направление community я уяснил ;)
У меня чувство, что я был не правильно понят.
Если кому-то комфортнее с Css - выбирает S1, кому нет - S2.
s2 делает по сути тоже самое что s1, только вероятность что-нить случайно снести меньше, поэтому я соглашусь со вторым пунктом : ) Кстати, в S2 большой выбор вариантов оформлений, можно повыбирать : )

Теперь моя очередь не понимать )) Изменять пункты в S2 вовсе не обязательно. Все это можно поправить на уровне CSS. Просто, проще снести тот же Sidebar в Flexible Squares вовсе, чем определять правило display: none; для его удаления, вот и все. Нет, я определенно понят неверно :) S2-шаблоны реализуются отнюдь не веб-интерфейсом, а составленным вручную CSS файлом, который подключается к одному из общедоступных шаблонов (в которых это разрешено). И почему же, тогда CSS - выбор S1 o_0?
о собирании какого макета идёт речь? диза? он не собирается, как правило - просто перекрашивается.
Согласен, возможно несколько неудачное слово "сборка". Назовем это формированием. Макеты S2 в этом плане более гибкие и

[yoksel]

это не направление коммьюнити, а моё собственное, здесь кроме меня никто дизы не выкладывает

[yoksel]

мдаа.. дивы - это отлично : )) но своё меню картинками туда не сделаешь, как я поняла

Чет я ветками промахиваюсь o_O

[eediter]

Да, палок в колеса понаставили. Все стили у меню одинаковые :( Неструктурным подходом это все же решается. Опять же, UL'ку менюшную под display: none;, а новую в пост 2020-м годом. Если кошмары по ночам не замучают, то все пучком.

[eediter]

Дык, я в вашем лице комьюнити и рассматривал ))
Усилия ваши отнюдь не напрасны ;)
А свои дизы у меня не очень, я ж не дизайнер..

[yoksel]

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

судя по тому что у вас в журнале, ваши дизы должны быть очень даже : )

[degro]

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

Спасибоулыбнулсо.

[yoksel]

что-то не тик-так? : )

[shkaev]

ему понравилось слово отпозиционировать ))

[yoksel]

может : ))

[air_man1]

очень просто написано,спасибо.
но я не могу понять, можно ли вставить фото в фон стиля minimalism, оставив при этом полностью остальной стиль. у меня не получается.
вставляю в Custom CSS:
body{
background-image: url('http://ic.pics.livejournal.com/air_man1/3213924//.......jpg');
background-repeat: repeat;
background-position: center top;
background-attachment: scroll;
}

[yoksel]

Используйте такой селектор вместо body: body.theme-x5

[air_man1]

а я попробоывал #page {
и получилось)

[yoksel]

minimalism он такой, с сюрпризами