Урок по сборке дизайна

[La mignonne]

Когда-то писала в своем дневнике урок по сборке одного из дизайнов в соо.
Оставлю это здесь, может кому-то пригодится.

Урок по сборке дизайна

Лучше подключить css, создать новое оформление и по кусочкам собирать этот код у себя, чтобы все получилось на практике.
____________________________________

Основа:
1. art-by-designplus.diary.ru/p180919720.htm - тут я писала про структуру самого дизайна, что есть body, что такое #wrapper и тд. ЧИТАТЬ ОБЯЗАТЕЛЬНО
2. art-by-designplus.diary.ru/p122822168.htm - "полезные ссылки" и "шрифты" ЧИТАТЬ ОБЯЗАТЕЛЬНО
3. htmlbook.ru/ - сайт о css, где все обо всем написано
4. desu.idzaaus.org/cssdict - название всех элементов наших дайриков. У каждой ссылки, блока, текста тут есть свои названия, которым и надо задавать стили.
5. art-by-designplus.diary.ru/p178726221.htm - оооочень полезная штука, которая Вам тоже покажет названия блоков. Того, на который тыкните мышкой.

Ну, поехали по частям.
Макет, который нам надо собрать, выглядит так:

автор  Blimm

• Во-первых, ширина #wrapper (вы же уже прочли по ссылке выше, что это, да?) должна быть не более 980px!!
Это минимальная ширина экрана из стандартных разрешений, поэтому дизайн должен выглядеть так как планируется изначально на этом разрешении.
Все картинки, которые шире, нужно будет уменьшать.
Если добавляете какие-то элементы, продумывайте, чтобы они влезали в ширину 980px.
• Во-вторых, шрифты. Они должны быть из стандартного набора для тех элементов, которые меняются. Например, название дневника и никнейм, заголовок поста и пр.

Часть 1

Часть 1

Свойства, которые тут будут:
Частично расшифровка есть в ссылках выше, добавлю:
1. background задает фон для элементов
2. padding и margin задает величину отступа. Padding - отступ внутри элемента (например, текста от краев записи), margin - внешний отступ от элемента (например, высота между блоками записей). Пример на картинке.
3. -o-linear-gradient задает цветовой градиент для фона

Первое, что я тут сделаю - задам цветовые настройки и фон.
Цветовые настройки берем из фотошопа и вбиваем их в стандарные поля цвет ссылок, текста и тд.
Фон. На картинке у нас градиент. Раньше я бы делала его картинкой, но теперь мы можем использовать свойство -o-linear-gradient. Применим его к фону background для всей страницы body и зададим нужные нам цвета.

body
{padding: 0!important;
background:
-moz-linear-gradient(left, #E5D4D0, #EFE5E2, #fefefe);
-webkit-linear-gradient(left, #E5D4D0, #EFE5E2, #fefefe);
-o-linear-gradient(left, #E5D4D0, #EFE5E2, #fefefe);
-ms-linear-gradient(left, #E5D4D0, #EFE5E2, #fefefe);
linear-gradient(left, #E5D4D0, #EFE5E2, #fefefe);}

• Для разных браузеров для градиента задается свой префикс, например, для Mozilla это -moz-.
• Также задается направление градиента. У нас это left - то есть слева направо. Это значение можно менять как вам нужно, варианты можно посмотреть по ссылке выше.
• И я задала цвет. У нас два основных - серо-розовый и белый, их я и задала (#E5D4D0, #fefefe) + взяла промежуточный цвет из середины картинки, чтобы переход был более плавный (#EFE5E2).
То есть сам код для цвета такой (left, #E5D4D0, #EFE5E2, #fefefe). Громоздкость кода только в том, что нужно задать его для разных браузеров, он поэтому повторяется 5 раз.
С этим все.
Дизайн у нас сейчас выглядит так:

Часть 2

Часть 2.

Свойства, которые тут будут:
1. border задает рамку для элементов.
border: Xpx стиль линии #цвет;
X - толщина рамки (например, 3px),
стиль линии - стиль обводки (solid - простая линия. Есть и другие стили),
#цвет - цвет обводки.

Теперь нужно сделать "каркас". Он включает в себя поле записи + меню + экстратоп + экстработ.
По селектору это #wrapper.
У нас стандартная схема расположения, для формирования этого кода у нас есть чудный генератор.
• Задаем ширину меню - обычно хватает 200px. Я чаще всего задаю именно такую ширину - влезают все ссылки + поле записи шире, но, когда нужно, можно и менять. В данном случае по макету меню чуть шире, делаю его 230px.
• Далее - отступ. По макету видим, что между меню и блоком записей он есть, задаем сколько нужно. В нашем случае - 30px.
• И потом - ширина блока записей. Исходя из того, что весь наш дизайн = #wrapper должен быть не более 980px в ширину, задаем поле записей как 980-230-30 = 720px.
Генерируем и копируем получившийся код.

#wrapper{width:980px;min-width:0;}
#side{width:230px;}
.left #page-c {margin-left:-260px;}
.left #page-t {margin-left:260px;}

Две последние строчки из генератора .right #page-c нам не нужны, потому что эти строки для правого меню, а у нас меню слева./span>.
Итак, наш дизайн приобрел ширину, встал по центру.

Чтобы наглядней было видно всю ширину и отступы, зададим для этих блоков фон и рамку как на макете.
Фон у нас белый #FFFFFF, цвет рамки #DEDAD8 шириной в 4px.

Строчка меню: #side{width:230px; background: #ffffff; border: 4px solid #DEDAD8;}
Строчка записей: .left #page-t {margin-left:230px; background: #ffffff; border: 4px solid #DEDAD8;}

Что у нас получилось:

Часть 3

Часть 3. Экстратоп

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

Значит, возвращаемся в п.1 и исправляем основной фон.
Я добавляю больше цветов из экстратопа и, чтобы все это встало на те места, какие мне нужны, я добавляю к этим цветам %% - это тоже самое что пиксели, положение цвета по горизонтальной оси.
(left, #E5D4D0, #E6D4D0 25%, #EDE2E0 50%, #fefefe 85%)
Вверху цвета не стыкуются с блоком "18+", поэтому для нее так же подбираем цвета.
(left, #E5D4D0, #E6D4D0 30%, #E9DBD8 50%, #fefefe 85%)
Итог:


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

.left #page-t {margin-left:260px; background: #ffffff; border: 4px solid #DEDAD8;width: 695px;}

Иии...так лучше.

Часть 4

Часть 4. Меню.

Свойства для этого этапа:
1. font позволяет одновременно задать несколько характеристик шрифта и текста.
По ссылкам выше Вы видели, что есть разные варианты: font-style, font-variant, font-weight, font-size, font-family, которые задают шрифт, начертание, размер штрифта и тд. Так вот font позволяет задать эти параметры в одной строчке.
2. line-height устанавливает межстрочный интервал текста
3. !important = обязательно! важно! приоритет!

Теперь нужно сделать красивое меню согласно макету.
а) Загружаем аватарку автора в стандартных настройках.

б) Ник и название дневника.
Они у нас одним штрифтом и цветом. Проблема в том, что заданы не стандартным шрифтом. Чтобы сделать дизайн доступным для всех, нам нужно подобрать вместо заданного другой шрифт из стандартного набора.
Мне кажется, Book Antiqua больше всего похож, начертание наклонное.
Задаем параметры для названия дневника #side h1 и никнейма #authorName.

#side h1 a, #authorName {
font: italic 30px Book Antiqua;
color: #F4770B!important;}.

• italic - это курсив, одно из свойств font-style
• 30px - размер шрифта
• Book Antiqua - название нужного Вам шрифта
• отдельно задала цвет парметром color

!!! код для названия дневника и никнейма я прописала через запятую. Лучше так и делать для блоков, которым хотите прописать одинаковые параметры, код будет меньше и легче.
!!! к коду для названия дневника я добавила параметр a - это означает "ссылка", без этого параметра название не меняло цвет. Для #authorName не понадобилось подставлять, он итак его меняет.

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

#side h1 a, #authorName
{font: italic 30px Book Antiqua;
color: #F4770B!important;
line-height: 0.9;}

Чем больше число, тем больше расстояние между строками.


б) Поиск

Свойства для этого блока:
1. visibility предназначен для отображения или скрытия элемента
2. display определяет, как элемент должен быть показан в документе.
3. border-radius делает скругленные уголки.

б.1) Для начала нужно сделать так, чтобы строка поиска была всегда открыта.

#YaSearchForm
{display:block !important;
visibility: visible!important;}

• #YaSearch - блок поиска целиком
#YaSearchForm - форма поиска, ее-то мы и открываем свойством visibility.
• block делает элемент как бы отдельным блоком на всю ширину, а не частью другого элемента. Появляется возможность применения свойств для блочных элементов, то есть мы можем заменить его картинкой, сделать видимым и тд. Можно еще почитать тут об этом. На этом мое понимание этого свойства, к сожалению, кончаются, но сейчас нам этого достаточно.
Вот, поиск появился


б.2) Теперь уберем заголовок "название по дневнику"

#YaSearchForm_title {display: none !important;}

Опять display, только теперь мы ему задаем параметр none - то есть удаляем его.

б.3) Сейчас сделаем рамочку/обводку для поля ввода текста, как на скрине.
Это поле называется #yaquery.
Этому же блоку сделаем скругленные края и установим высоту.

#YaSearchForm #yaquery {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-left: 1px solid #6F4328;
border-bottom: 1px solid #6F4328;
border-top: 2px solid #B39F94;
border-right: 2px solid #B39F94;
height: 23px;}

• border-radius задаем значение в пикселях, чем больше значение, тем больше скругление
в коде это значение 3 раза опять-таки для разных браузеров. Есть генератор.
• border уже знаком, но, так как у нас разные цвета и ширина обводки для разных сторон, то мы задаем эту рамку соответственно тоже для каждой стороны.
• height это высота.

б.4) Теперь нам нужно заменить кнопку поиска на картинку. Иконка

#YaSearchForm input.submit {
background: #ffffff url('/userdir/1/3/0/8/1308297/80893378.png') 0px 0px no-repeat;
width:25px !important;
height:20px!important;
font-size:0;
-moz-opacity:.99 !important;
opacity:.99 !important;
filter:alpha(opacity=99); !important;
margin-top:3px;
margin-left:-30px;}

• #YaSearchForm input.submit - код для кнопки "найти"
• background: #ffffff url('ссылка')- фон, которому я задала цвет и картинку, она вставляется ссылкой из Вашей БИ.
Цвет это необязательный тут параметр, но я его поставила: картинка поиска у нас прозрачная и под ней виден текст/фраза поиска, чтобы этого избежать, ставлю цвет.
• 0px 0px - это сдвиг картинки в данной ширине-высоте слева и сверху соответственно.
• repeat задает будет ли повторяться картинка. У нас без повторов.
• Обязательно задаем картинке ширину и высоту
width:25px !important;
height:20px!important;
• Для того, чтобы текст на кнопке "найти" не вылезал и не перекрывал нашу картинку, мы его прячем, задвая ему размер шрифта 0.
font-size:0;
• У кнопки "найти" изначально прописана в дайриках прозрачность. Что бы ее убрать у нашей картинки, для ее 100% видимости мы прописываем специальный код
opacity:.99 !important;
3 раза повторяем для разных браузеров.
• margin уже знаем, двигаем им нашу картинку в то место, куда она должна встать по плану.

б.5) Далее я опишу как делать надпись "Поиск по дневнику".

Свойства:
1. position устанавливает расположение блока относительно других элементов.
2. content позволяет добавить текст к элементу, изначально не существующий в верстке.

#YaSearch:after {
Content: 'Поиск по дневнику...';
position: absolute;
margin-top: -21px;
margin-left: 30px;
color: #544233;
font: italic 10.5px Georgia;}
#YaSearch:hover:after{Content: '';}

• Псевдоэлементы :after и :before указывают, отображать новое содержимое после или до элемента, к которому добавляются.
В данном случае #YaSearch:after то есть Поиск:после
• И пишем, что должно быть написано после поиска
Content: 'Поиск по дневнику...'
• Надпись появилась под полем поиска, теперь нам надо ее сдвинуть в центр поиска, делаем это с помощью position.
Задаем ему absolute, то есть абсолютное положение, не зависящее от других элементов и его исходного местоположения.
• Задаем отступы, цвет, шрифт.
• Надпись встала как надо, но теперь нам надо сделать, чтобы она исчезала, когда мы хотим там что-то написать. То есть когда мы наводим мышкой на поиск и он становится активым (используемым в данный момент) элеменом.
#YaSearch:hover:after = Поиск:активный:после
И там где у нас текст делаем пустое место, то есть не отображать ничего. {Content: '';}

Все, наш Поиск готов.


На данном этапе меню у нас выглядит так:


в) Теперь приступим в созданию кружочков около блоков меню.
Вырезаем их из макета. Иконка
Вижу, что картинка задана не конкретной ссылке, а просто первой ссылке каждого блока. Значит я задам фоновую картинку именно блокам.
Блоки меню у нас зовутся .menuSection

.menuSection {
background: url('/userdir/1/3/0/8/1308297/80898021.png') 7px 4px no-repeat;
padding: 5px 0 0 30px!important;
width: 150px;}

• background вам уже знаком. Если не задать ему другого положения, то картинка встает стандартно в левом верхнем углу. Сейчас нам так и надо.
• Ставим ей "без повторов" = no-repeat.

• Видим, что картинка появилась, но ссылки на нее налезают. Нам нужно сделать отступы ссылок.
padding: 5px 0 0 30px!important (верх право низ лево)

• Так лучше, лишь слегка сдвигаем иконку на один уровень со ссылками параметрами 7px 4px.
• Ширину width: 150px для блоков я задала для того, чтобы они не вылезали вправо за рамки меню.

Все встало как надо, НО так как поиск и блок никнейм-фото тоже являются частью .menuSection, то иконка+отступ+ширина применились и к ним.

Убираем это, прописывая этим блокам свои отступы, свою ширину и none отсутствие картинки.

#YaSearch {
background: none!important;
padding: 0!important;
width: 200px!important;}
#thisDiaryInfo {
background: none!important; }

Все.

г) И осталось последнее на этом этапе.
На макете видим, что часть ссылок из меню находится под экстратопом.

Для начала нам нужно дать больше места под этот блок, т.к сейчас у нас экстратоп вплотную прилипает с блокам запись+меню.
Мы можем просто отступами margin подвинуть вниз эти блоки, но я не люблю их трогать, поэтому если у меня есть экстратоп, то все, что я тут делаю - увеличиваю его высоту в коде и все.
Ищем код для экстратопа и меняем height

#extratop {
padding: 0!important;
background: url('/userdir/1/3/0/8/1308297/80886774.jpg') 0 top no-repeat;
height: 420px;
width: 980px;}

Все, теперь знакомым нам position: absolute переносим каждую нужную ссылку по отдельности (ссылку на названия элементов давала вначале).
!!! Для того, чтобы перенести блок "добавить в избранное" и тд, то есть те ссылки, которые видит только посетитель, я захожу на дневник с другого никнейма и оттуда смотрю, где они стоят и куда их надо сдвинуть.

#iAmQuit a, #optionsLink a, #writeThisDiary a, #mainpageLink a, #tagslistlink a, #addToFav a, #writeToAuthor a
{font: bold 11px Arial;
color: #61201B;
text-transform: uppercase!important;}

• Задали ссылке (именно ссылкам a) цвет, шрифт и начертание заглавными буквами, за которое отвечает свойство text-transform

Перед позиционированием ссылок нужно добавить в код для #wrapper свойство position: relative
Этот код двигает блок относительно того места, где он стоит. То есть он не становится отдельным независимым элементом, влияя на положение остальных как при position: absolute, он остается на своей месте, если не задавать ему других положений.
Для чего же нам код, который никак не влияет на элемент? для того, чтобы все остальные элементы внутри него, которым мы задаем position: absolute, позиционировались только в рамках #wrapper, не вылезая за его границы.
В картинках:
Блок #wrapper обведен красной рамочкой.
1. Для #wrapper НЕ задано position: relative
Поэтому когда мы двигаем кнопку "Выход" вправо, то она прилипает к правому краю страницы и двигается вместе с ней.
2. Для #wrapper задано position: relative
И когда мы двигаем кнопку "Выход" вправо, то она прилипает к правому краю #wrapper и не двигается, потому что ширина #wrapper у нас величина постоянная.
1.
2.

#wrapper {
width:980px;
position: relative;}

Позиционируем:

#iAmQuit {position: absolute; top: 385px; right: 60px;}
#optionsLink {position: absolute; top: 385px; right: 160px;}
#writeThisDiary {position: absolute; top: 385px; right: 255px;}
#mainpageLink {position: absolute; top: 385px; right: 375px;}
#tagslistlink {position: absolute; top: 386px; right: 525px;}
#addToFav {position: absolute; top: 385px; right: 645px;}
#writeToAuthor {position: absolute; top: 385px; right: 815px;}

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

Это из-за того, что "Темы записей" это не просто ссылка, это заголовок, открывающий другой подблок (#TagsList - список тем). И они связаны, поэтому когда этот подблок открывается такой широкий, заголовок тоже отъезжает.
Нам нужно задать этому подблоку свое абсолютное место на странице, чтобы он не мешал остальным.
Поэтому ему мы тоже зададим position: absolute. Ну и фон, ширину, отступы - все как обычно.

#TagsList {
position: absolute;
width: 200px;
margin: 5px 0 0 0;
background: #ffffff;
border: 4px solid #DEDAD8;}

ВСЕЕЕ....меню готово.

Часть 5

Часть 5. Блок записи.

1) Сначала оформим цветами ссылки и внутренние элементы.
Давайте сделаем цитату .quote_text.
Она у нас оформлена градиентом - это нам уже знакомо, скругленные края - тоже проходили, отступы - есть, display:block знаем (без нее фон задается только тексту).

.quote_text {
background:
-moz-linear-gradient(top, #FAF8F5, #F7F4F0, #F3EEE9, #F1ECE6);
-webkit-linear-gradient(top, #FAF8F5, #F7F4F0, #F3EEE9, #F1ECE6);
-o-linear-gradient(top, #FAF8F5, #F7F4F0, #F3EEE9, #F1ECE6);
-ms-linear-gradient(top, #FAF8F5, #F7F4F0, #F3EEE9, #F1ECE6);
linear-gradient(top, #FAF8F5, #F7F4F0, #F3EEE9, #F1ECE6);
display: block;
padding: 15px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

Вот такая у нас вышла цитата


2) Ссылки в записи "комментировать и пр".
Блок со ссылками у нас называется .postLinksBackg, сами ссылки .postLinksBackg a
Сделаем им цвет и шрифт как на картинке.

.postLinksBackg, .postLinksBackg a {
color: #5A483A!important;
font: normal 11px Verdana!important;}

3) Изменим цвет для тем/музыки/настроения
"темы" - .atTag, "музыка" - .atMusic, "настроение" - .atMood.

.atMusic, .atTag, .atMood {
color: #5A483A;
font: italic 11px Verdana!important;}

4) Ссылки в блоке записей у нас будут другим цветом.
Поэтому их цвет мы пропишем отдельно для .postContent - обёртка содержимого записи (см. селекторы)

.postContent a {color: #CDB69F;}

5) Так, теперь сами блоки.
Самое видимое тут - блоки с записями идут отдельно друг от друга.
Делаем отступ с помощью margin для блока, где находится содержимое записи - .singlePost (см. селекторы)

.singlePost {margin-bottom: 40px!important;}

Видим, что отступ внизу каждой записи появился, но в отдельные блоки они не встали. Почему?
Потому что ранее блоку, который находится под .singlePost, а именно .left #page-t, мы задавали белый фон. Нужно это убрать и задать его для .singlePost.
Ищем ту строку и убираем оттуда background и border

.left #page-t {margin-left:260px; width: 695px;}

А сюда вписываем

.singlePost {
margin-bottom: 40px!important;
background: #ffffff;
border: 4px solid #DEDAD8!important;}

Сделали.

Но видим, что у нас текст вплотную прижат к своей оболочке, а между всем блоком и текстом появилась дырка.
Убираем это все с помощью padding.
Для начала сделаем отступ текста от краев, добавив его в код выше.

.singlePost {
margin-bottom: 40px!important;
background: #ffffff;
border: 4px solid #DEDAD8!important;
padding: 30px!important;}

А вот чтобы убрать отступ между блоком .left #page-t и записью, нужно задать отступ = 0.
Зададим его для оболочки #postsArea (см.селекторы).

#postsArea {padding: 0px!important;}

Вот так


6) Мне тут хочется поменять цвет запятых между темами записей.
Поэтому я вернусь в п.3 и немного его переделаю: уберу из кода .atTag и отдельно пропишу параметры для надписи "темы" - .atTag span, отдельно для блока с самими ссылками-темами .atTag em

.atMusic, .atMood { color: #5A483A!important; font: italic 11px Verdana!important;}
.atTag span {
color: #5A483A!important;
font: italic 12px Verdana!important;}
.paragraph a, .atTag em {color: #CDB69F;}

7) Заголовок
Заголовок - .header
У автора два варианта заголовка на выбор, я выбрала первый.
Нужно задать ему фон и нижнюю рамку

.header {
background: #F9F7F4!important;
border-bottom: 2px solid #C7C7C7!important;}

Видим вот такую картину (фон для наглядности на примере сделала красным)

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

.singlePost {
margin-bottom: 40px!important;
background: #ffffff;
border: 4px solid #DEDAD8!important;
padding: 30px;}

Уберем это, оставив только нижний.

.singlePost {
margin-bottom: 40px!important;
background: #ffffff;
border: 4px solid #DEDAD8!important;
padding: 0px 0 30px 0!important;}

Теперь так

Заголовок встал на место, но теперь нам нужно задать убранные отступы для текста
Будем дедать это отдельно для текста записи .postContent, для ссылок .postLinksBackg и для самого заголовка.

.postContent, .postLinksBackg {
padding: 10px 30px 0 30px!important;}
.header {
background: #F9F7F4!important;
border-bottom: 2px solid #C7C7C7!important;
padding: 12px 30px 10px 30px!important;}

Все отступы опять встали как надо, но в постах в датой записи нам сама эта дата .postDate портит всю малину.

Зададим ей тоже фон и отступы. А еще margin, чтобы не было зазоров между ней и заголовком.

.postDate {
background: #F9F7F4!important;
padding: 12px 30px 10px 30px!important;
margin: 0!important;}

8) Ссылкам на страницы в дневнике зададим свой стиль.

Новое свойство
1.box-shadow добавит тень к блокам
2. text-align расположение текста в блоке - справа/слева/по центру.

По верстке этот блок #pageBar сделан как бы табличкой, поэтому чтобы двигать текст вправо/лево, нужно задать ширину столбцов td в таблице.
Вот так этот бок выглядит (для наглядности сделала рамочку)

Отдельный блок для ссылки "следующая", отдельно для "предыдущая" и ниже отдельный блок для ссылок на страницы.

#pageBar td {
width: 695px;
margin:0!important;
text-align: right;
height: 30px;}

Задали ширину, нулевые отступы, расположили текст справа и прописали высоту ячеек.

.pages_str a {margin:0;}

Нулевые отстутпы для ссылок следующая/предыдущая = .pages_str, чтобы прижались к краям.

#pageBar a {
color: #555555;
font: normal 13px Arial;
margin-left:7px;
padding: 4px 6px 4px 6px;}

Задали ссылкам всего блока стиль и отступы.

.pageBar strong, #pageBar a:hover {
color: #fff!important;
background: #70482C!important;
padding: 4px 6px 4px 6px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: inset 0 0 6px #25160C;
-webkit-box-shadow: inset 0 0 6px #25160C;
-moz-box-shadow: inset 0 0 6px #25160C;}

Прописываем для активной и выделенной ссылок стиль: цвет, фон, отступы, закругления и по новому свойству - тень.
inset - тень "внутри" блока
0 0 6px - сдвиг лево низ (0 0) и размытие (6px)
#25160C - цвет тени

#pageBar {margin-top: -20px;}

Сдвинем весь блок чуть выше.

.pages_str td[align="left"] {text-align: left!important;}

.pages_str td[align="left"] - ссылка "предыдущая страница", ей я залала левое положение в блоке.
Следующая страница будет соотв-но .pages_str td[align="right"]

Вот в общем-то с дизайном главной страницы практически и все, осталось только доработать


9) Удаляем кнопки сортировки
Кому они нужны вообще) добавляем в имеющийся код

#YaSearchForm_title, .order_button {
display: none!important;}

10) Эпиграф
Так как все, что мы задавали для блока записей, действует и на эпиграф #epigraph, мы все это отменим специально для него.

#epigraph.singlePost {
border: none!important;
margin-bottom:0!important;
padding:0!important;}
#epigraph .header {
background: none!important;
border: none!important;}
#epigraph .editPostLink {margin:10px 30px 0 30px!important;}

.editPostLink - кнопка редактирования эпиграфа

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

11) Делаем цвет ссылки при наведении другой

a:hover {color: #F4770B!important;}

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

a:hover, .postLinksBackg a:hover {color: #F4770B!important;}
#side h1 a:hover, #authorName:hover {color: #5B2113!important;}

13) устанавливаем максимальную ширину картинок в записи, чтобы они не вылезали за границы.

img { max-width: 620px !important; }

max-width = максимальная ширина

14) Теперь нам нужно пройтись по всем служебным страницам
и проверить, как они отображаются.
Это страницы "все темы/новая запись/блокнот/избранное/цитатник/черновики/календарь записей/мой альбом/мои ссылки/комментарии"

а) И самое главное и первое - страница комментариев.
Открываем ее и видим

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

.singlePost, .singleComment {
margin-bottom: 40px!important;
background: #ffffff;
border: 4px solid #DEDAD8!important;
padding: 0px 0 30px 0!important;}

Тоже самое с отступами #postsArea, про которые я рассказывала в п.5, у страницы комментариев этот блок называется #commentsArea.
Ищем код, добавляем

#postsArea, #commentsArea {padding: 0px!important;}

Теперь сдвинем поровнее никнейм комментатора .authorName и зададим рамочку аватарке .avatar img

.authorName {padding: 10px 0 0 30px!important;}
.avatar img {border: 4px solid #C7C7C7!important;}

Сделали.


Теперь нужно доработать поле добавления комментария #addCommentArea
Зададим ему, как нашим блокам с записью, фон, рамку, отступы.

#addCommentArea {
background: #ffffff;
border: 4px solid #DEDAD8!important;
padding: 0px 0 30px 0!important;}

А также отступы блоку для текста и ссылок внутри него #msg_form, но пока только для страницы комментариев #JournalComments

#JournalComments #msg_form {
padding: 10px 30px 0px 30px!important;
border: none!important;}

Отсутствие рамки border: none я тоже тут прописала, тк собираюсь для #msg_form на другой странице эту рамку сделать, и тут бы она тоже вылезла.

Сделаем рамочку для поля ввода комментария #message и заголовков .text

#message, .text {border: 2px solid #C7C7C7!important;}

И поменяем цвет кнопок "Отправить", "Сохранить" и пр. - видимую и активную (при наведении мышкой на кнопку - hover)

.submit {background: #E9DBD8!important; padding: 5px;}
.submit:hover {background: #DBC7C3!important; padding: 5px;}

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

#YaSearchForm input.submit {background: #ffffff url('/userdir/1/3/0/8/1308297/80893378.png') 0px 0px no-repeat!important; ......}

Дальше подправим стиль для заголовка "Комментарии" #commentsArea_title и наша страница готова.

#commentsArea_title {
border-top: 4px solid #DEDAD8!important;
border-left: 4px solid #DEDAD8!important;
border-right: 4px solid #DEDAD8!important;
border-bottom: none!important;
margin-bottom:0!important;}

б) открываем "Новая запись" и видим тоже блоки без фона.
И вот возвращаемся к #msg_form и прописываем ее параметры для всех остальных страниц - фон, рамку, отступы.

#msg_form {
padding: 10px 30px 10px 30px!important;
background: #ffffff;
border: 4px solid #DEDAD8!important;}

А для заголовка "Новая запись" задаем те же параметры, что и для "Комментарии"

#commentsArea_title, #new_post_title {
border-top: 4px solid #DEDAD8!important;
margin-bottom:0!important;
border-left: 4px solid #DEDAD8!important;
border-right: 4px solid #DEDAD8!important;
border-bottom: none!important;}

Теперь эта страница тоже готова.

в) Календарь записей и Ссылки.
Вся страница "Календарь записей" у нас называется #JournalCalendar, а страница "Ссылки" #JournalLinks.
Зададим для #postsArea именно на этой странице наши параменты - рамку, фон, отступы.

#JournalCalendar #postsArea {
background: #ffffff;
border: 4px solid #DEDAD8!important;
padding: 0px 0px 30px 0px!important;}

А так же как обычно отступы для текста, тут это блок #content

#JournalCalendar #content {padding: 10px 30px 10px 30px;}

Для ссылок тоже

#JournalLinks #content {padding: 10px 30px 10px 30px;
background: #ffffff;
border: 4px solid #DEDAD8!important;}

Заголовок "Ссылки" - #links_title добавляем в код к заголовку "Комментарии" и пр.
Готово.

г) Черновики
Правим заголовок как и для "Новая запись", добавляем #draft_title в наш код.

д) Избранное и Цитатник
Тут у нас появляется название сообщества .communityName, двигаем его также, как ник комментатора ранее.

.authorName, .communityName {padding: 10px 0 0 30px!important;}

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

.blockquote img { max-width: 400px !important; }

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

.postContent {overflow-x: auto!important;}

е) Все темы .tags_ul_all
Задаем отступы, ширину, рамку, фон.

.tags_ul_all {
padding: 10px 30px 10px 30px;
background: #ffffff;
border: 4px solid #DEDAD8!important;
width: 620px!important;}

Ура, наш дизайн готов!!

С разрешения автора, не буду тут менять блок 18+ на картинку, потому что имхо это лишнее и крупная картинка очень привлекает внимание к ненужному блоку)).

Ссылка на оригинал поста

Comments

Спасибо

[Tado_Arimoshi]

Спасибо огромное, забрала в цитатник )))

[Min Young-nim]

La mignonne, вот это труд! Если набраться терпения, то и без всякой сноровки можно будет собрать себе дизайн или основу для оного. Ты молодец! (:

[La mignonne]

Tado_Arimoshi, letantaniel, пожалуйста)
Min Young-nim, ох да, сама сегодня полистала этот фолиант, вспомнила как я это все писала))

можно будет собрать себе дизайн или основу для оного

на это и рассчитывала, поэтому старалась мелочи объяснять все)

Ты молодец! (:

спасибо, мне приятно, что ты оценила мой труд

[Min Young-nim]

La mignonne, даже не представляю себе, сколько времени у тебя ушло! Я в своё время писала только инструкции к программам и сайтам, тоже времени уходило порядочно, а тут...

на это и рассчитывала, поэтому старалась мелочи объяснять все)

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

[La mignonne]

пока не попробуешь хоть что-то простенькое оформить, никогда не поймёшь, что к чему.

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

[jihiri_kuro]

Прошу прощения, у вас ошибка в коде градиента: в первой сточке круглая скобка и точка с запятой перепутаны (у меня вообще смайлик отображается!)