Может, кому-нибудь пригодится)



Настройки

Настройки
Эпиграф:
<div align="center"><img src="https://img-fotki.yandex.ru/get/4309/185644012.c/0_131705_d56120f8_orig"></div>
(Исходник принадлежит своему автору; в хорошем качестве, к сожалению, утерян)

Фоновая картинка

Цвета:
Цвет текста заголовка, записи - #8f6751, ссылки #745242, оффтопика #73514e
Цвет фона дневника #432021, записи #432926, границы #8f6751

@темы: Девушки, Темные цвета, Для бесплатных дневников, by Clochette_, Осень

— Продан


Комментарии

— Дизайн в единственном экземпляре.
— Проверен в браузерах: Opera, Chrome, Firefox, IE (все последние версии)
— Разрешение экрана: 1024х800 и выше
— Динамика: Дизайн не динамический, выровнен по левому краю.
— Меню: статично.
— Анимация стандартная - меняют цвет ссылки при наведении.
— Есть кнопка "наверх", оформлена цитата, иконки у ссылок, эпиграф перенесен под блок меню.
— Страница комментариев
— При необходимости можно будет внести небольшие правки по Вашему желанию.

@темы: Цветы, Светлые цвета, CSS, Дизайн на продажу, Нежные, by [ShokolaD]

В общий доступ



При использовании дизайна просьба ставить баннер сообщества

КОММЕНТАРИИ

— Дизайн в единственном экземпляре.
— Проверен в браузерах: Opera, Chrome, Firefox, IE (все последние версии)
— Разрешение экрана: 1024х800 и выше
— Динамика: Дизайн не динамический
— Меню: статично. Есть анимация на ссылках - при наведении плавно немного уезжают в бок.
— Ссылка "Комментарии" перенесена наверх рядом с временем написания поста. Ссылка картинкой, при наведении появляется надпись "Комментировать".
— При необходимости можно будет внести небольшие правки по Вашему желанию.
— Картинки: анимация, анимация 2, страница комментариев, страница комментариев 2

Настройки

Настройки

КАК УСТАНОВИТЬ ДИЗАЙН
или
"что это за код и куда его вставлять, памагити!?"
Инструкция по установке - читать

Дизайн - блочный, меню - справа
ссылки - #7DA382
текст - #22332C
заголовок - #FE1D19
офф - #999
Остальное #

код
html {background: #E4F0E6 url("ФОН-1") repeat;background-attachment: fixed!important;} body{background: url("ФОН-2") repeat-x;padding: 0!important;} #extratop {background: url('ЭКСТРАТОП') 0px bottom no-repeat; height: 193px; width: 805px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; -webkit-box-shadow: 0px 0px 0px 2px #303B37, 0px 0px 0px 11px rgba(71,123,120,0.22); box-shadow: 0px 0px 0px 2px #303B37, 0px 0px 0px 11px rgba(71,123,120,0.22); margin: 75px 0 0px 0; position:relative; z-index:10!important; top: -40px;} {----------------------------} {----------------------------} img { max-width: 700px !important; max-height: auto;} .avatar img {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; -webkit-box-shadow: 0px 0px 0px 2px #303B37, 0px 0px 0px 11px rgba(71,123,120,0.22); box-shadow: 0px 0px 0px 2px #303B37, 0px 0px 0px 11px rgba(71,123,120,0.22); margin: 10px 0px 0 10px; max-width: 100px!important; height: auto; } .blockquote img { max-width: 600px !important; } a:hover, .postLinksBackg a:hover {color: #174A37!important; text-decoration: none!important;} .postContent {overflow-x: auto!important;} #w18p {position: absolute; right:30%; top:0; height: 10px; padding: 0!important;} #w18p a {color: #618C70;} .text, #message {border: 3px solid #EB593C!important; padding: 5px!important;} #add_block1 { position:fixed; width:100%; left:0px; bottom:0px; background: #EB593C; height: 5px;} #add_block5 { position:absolute; width:165px; left:50%; top:228px; background: #EB593C; height: 25px;z-index:1; margin-left: 325px;} .quote_text {background: #CDDFC7;} .submit {padding: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} .submit:hover {background: #CDDFC7;} {-------------записи--------------------} #wrapper{width:980px;padding: 0!important;position: relative;background: url('/userdir/1/3/0/8/1308297/81176860.png') 800px 50px repeat-y;top: 40px!important;padding-bottom:40px!important;} #page-t {width: 810px;} #postsArea, #commentsArea, #addCommentArea {padding: 0px 40px 0px 0px; margin-top: 30px;} .singlePost {position: relative; margin-bottom: 80px!important;} .singleComment {position: relative; margin-bottom: 40px!important;} #epigraph .singlePost{margin: 0!important} #epigraph {margin-top: -30px!important;} .header h2 {text-transform: uppercase; font:20px Garamond,Times New Roman; position:absolute; left:0; bottom: 25px; } .header span {font:bold 13px Arial; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background: #303B37; padding: 4px 15px 3px 15px; color: #E9592B;} .postDate {position: absolute;right:0px;text-transform: uppercase; font:15px Garamond,Times New Roman!important; color: #FD3805!important; top: 8px;} .header {position :relative;} .postLinksBackg {text-transform: uppercase; font:9px Arial; float: left; color: #7DA382;} .atTag em a {text-transform: uppercase; font: bold 9px Arial; color: #7DA382; text-decoration: none!important; font-style: normal!important;} .atMood em, .atMusic em{text-transform: uppercase; font: normal 9px Arial; color: #7DA382; text-decoration: none!important; font-style: normal!important;} .atTag em {color: #7DA382; margin: 0 0 0 -4px; } .paragraph div{min-height:20px!important;} .postActionLinks {top: -25px; position:absolute; right: 0;} #addCommentArea_title, #commentsArea_title, #new_post_title {text-align: center;text-transform: uppercase; font:20px Garamond,Times New Roman; padding: 0px 0 20px 0;} .postActionLinks {position:relative; top: -15px;z-index: 10;} {------------меню-----------------------} #side {width: 160px; margin-right: 10px; margin-top: -80px!important;} #side a {color: #22332C; font: normal 12px Verdana;line-height: 1.5;} .menuSection ul li {width: 155px;-webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;} .menuSection ul li:hover { background: #97C29D; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;width: 150px;margin:0px 0 0px -10px!important; padding: 0px 0 1px 15px!important; } #myDiaryLink, #allDiaryLink, #all_links, #pchs_title, #lastComments_title{background: #709483; padding: 3px 0 3px 10px!important; width: 155px; margin: 0px 0 5px -10px!important; } #mainpageLink {position :absolute; top:112px;z-index:5; margin-left: 3px!important;} #mainpageLink a{font: normal 18px Times New Roman!important;white-space: nowrap!important; } #mainpageLink:hover { background: none!important; transition: none!important; margin:0px 0 0px 3px!important;padding:0!important;} #side h1 {position:absolute!important; top:-100px; white-space: nowrap!important; left: 0; } #side h1 a {color: #A00515!important; font: normal 36px Times New Roman;text-shadow: -1px -1px #40534C, 1px 1px #AACAB0; } #authorName {position: absolute; top: 42px;font: normal 20px Times New Roman!important; color:#455542!important; width: 130px!important;white-space: pre-line!important;text-align: center!important; right: 22px;text-shadow: -1px 1px #AACAB0;} #TagsList ul li{background: none!important;margin:0px!important; padding: 0 0 5px 0!important;} #TagsList ul li a:hover {color: #D0E1C9!important;} #TagsList ul a {line-height: 1;} a#menuNewUmails, a#menuNewDescussions, #myDiaryLink span.count_box a, #myCommunityLink span.count_box a, #myDraftLink span.count_box, #tagslistlink span.count_box a, #myAccountLink .count_box a{font: bold 13px Arial; color: #F43605;} #side h1 a:hover, #authorName:hover { color: #CD3007!important;} {---} #Journal .comments a { background: url('/userdir/1/3/0/8/1308297/81159926.png') 0px 0px no-repeat; white-space: nowrap!important;line-height:11px; height: 24px !important; text-decoration: none; width: 28px;display:block !important;overflow: hidden; color:#7E8086!important; position:absolute; top: 2px; left: 70px;} #Journal .comments a:hover{ background: url('/userdir/1/3/0/8/1308297/81159927.png') 0px 0px no-repeat;overflow:visible; text-decoration:none; white-space: nowrap!important; } #Journal .comments a span {position: relative; top: 3px; float: left; height: 10px;background:#174A37!important; left: 30px; padding: 4px; color: #D7E9DA; z-index: 100;} #Journal .comments_count_link a:first-child {color: #FD3805!important; font: bold 18px Arial!important; position: absolute; top: 4px!important; left: 102px!important; background: none!important; display: block !important; text-decoration: none!important; text-align: left!important; padding:0;} #Journal .comments_count_link a:hover:first-child {color: #174A37!important;} #Journal .comments_count_link { font-size: 0 !important;} {----------none--------------} #randomDiaryLink, #diarySpiritLink, #diarySupportLink, #faqLink, #myProfileLink, #albumLink, #postsCalendar, #rssLink, #myLinksLink, #YaSearchForm_title, #YaSearch, #thisDiaryPhoto, .atTag span, .order_button, .prevnext, .Attention, .sign{display: none!important;}

картинки
ФОН-1 static.diary.ru/userdir/1/3/0/8/1308297/8114829...
ФОН-2 static.diary.ru/userdir/1/3/0/8/1308297/8114830...
ЭКСТРАТОП static.diary.ru/userdir/1/3/0/8/1308297/8114831...

Все исходники принадлежат их авторам

@темы: Цветы, CSS, Яркие, by [ShokolaD], Природа

ПРОДАН!


КОММЕНТАРИИ

— Дизайн в единственном экземпляре.
— Проверен в браузерах: Opera, Chrome, Firefox, IE (все последние версии)
— Разрешение экрана: 1024х800 и выше
— Динамика: Дизайн не динамический.
— Меню: не фиксировано. При наведении на блок меню картинка плавно уезжает в сторону и открывает ссылки. линк1, линк2, линк3.
— Анимация стандартная - ссылки меняют цвет при наведении.
— Оформлена цитата, графы музыки/настроения/тем.
— Фон фиксирован.
— При необходимости можно будет внести небольшие правки по Вашему желанию.

@темы: Цветы, Светлые цвета, CSS, Дизайн на продажу, Нежные, by [ShokolaD]

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

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

Лучше подключить 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+ на картинку, потому что имхо это лишнее и крупная картинка очень привлекает внимание к ненужному блоку)).

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

@темы: Урок/ Материалы/ Полезно знать

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


Цена: 600р.
Сборка: 1-7 дней.

@темы: CSS, Дизайн на продажу, by Ester Calhoun

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


Цена: 700р.
Сборка: 1-7 дней.

@темы: CSS, Дизайн на продажу, by Ester Calhoun

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



Продано.

@темы: CSS, Дизайн на продажу, by Ester Calhoun

Огромное спасибо  La mignonne , что сверстала этот дизайн!



Установить автоматически
Настройки

@темы: Знаменитости, CSS, by Alizeya, Кино/Сериалы/Мультфильмы, Лето, Яркие, Мужчины

Код дизайна целиком и полностью прописывала La mignonne ♥


Установить автоматически
Для внесения корректировок нужно вручную задать Настройки.
При использовании дизайна просьба ставить баннер сообщества

@темы: CSS динамические, CSS, by Суза-Муза, Рисованные (вектор/кисти/рисунки), Лето, Яркие

Пример



При использовании дизайна просьба ставить баннер сообщества

Настройки

Автоматичеcки установить цвета и фон - ЖМИ

Если хотите что-то изменить, нужна ручная установка!

Дизайн - блочный, меню - слева
Шрифт - Verdana
Размер и гарнитуру шрифта можно менять
заголовок - жирный, 13, цвет #023063
текст - обычный, 12, цвет #4a4a4a
ссылки - цвет #023063
оффтоп - цвет #3bb9b7

фон записи - цвет #b5d3d3
граница - цвет #ca2e4b

картинки
ЭПИГРАФ

img-fotki.yandex.ru/get/5103/185644012.a/0_127e...
<div align="center"><img src="https://img-fotki.yandex.ru/get/5103/185644012.a/0_127eea_25d5ad1a_orig" ></div>

ФОН
img-fotki.yandex.ru/get/11/185644012.a/0_127ee9...

ФОТО
img-fotki.yandex.ru/get/4812/185644012.a/0_127e...

Картинка, используемая в дизайне: img-fotki.yandex.ru/get/5202/185644012.a/0_127e...

Все исходники принадлежат их авторам.

@темы: Для бесплатных дневников, by Симбелин, Лето, Яркие, Музыка, Животные

Разгребаю прошлогоднее и раздаю))


страница комментариев // меню

При использовании дизайна просьба ставить баннер сообщества
Настройки

Настройки

КАК УСТАНОВИТЬ ДИЗАЙН
или
"что это за код и куда его вставлять, памагити!?"
Инструкция по установке - читать

Дизайн - блочный, меню - вверху
ссылки - #9A9F79
текст - #2B3326
заголовок - #9B2045
офф - #925D65
Остальные цветовые настройки не нужны!!! Не нужно их самостоятельно вставлять!
Проверьте, чтобы все остальные поля, не указанные тут, были пустыми!

КАРТИНКИ

код
{---------------------------------КАРТИНКИ--------------------------------} body {background: #EAE7D6 url('ФОН') repeat-x 0 0; padding: 0;} #extratop {height: 280px;background: url('ЭКСТРАТОП') no-repeat 80px 21px; width: 930px;} #add_block1 { position:relative; width:100%; left:0px; bottom:0px; background: url('ПОЛОСКИ') 0px 0px repeat-x; height: 12px;} .menuSection {background: url('МЕНЮ') no-repeat; height: 40px; width: 120px; padding: 12px 0 0 10px!important; text-transform: lowercase;} .countSecond {background: url('БЛОК-1') repeat-y right 0;padding: 0px 50px 0px 0px!important;} .countFirst{background: url('БЛОК-2') repeat-y left 0;padding: 0px 0px 0px 50px!important;} {-----------------------} #wrapper {min-width:930px!important;width:930px;position: relative; } #w18p {position: absolute; left: 0; width: 150px; top: 20px;z-index: 3;} .avatar img{border-radius: 50px;max-width: 100px; height: auto;max-height: 100px;border: 2px solid #909C76;} .submit {padding: 5px;border-radius: 3px;} .submit:hover {background: #C1BDA0;} .quote_text {font: normal 13px Arial;background: #C1BDA0; color: #3F4539; border-radius: 3px;} .text, #message {border: 3px solid #C1BDA0!important; padding: 3px;} img {max-width: 800px; max-height: auto;} a:hover {text-decoration: none; color: #8B2453!important;} {---------------меню---------------} #side h1{top: -70px; position: absolute;left:10px;} #side h1 a {font: bold italic 24px Georgia; color: #88254C!important; line-height: 0.9;} .menuSection_title {color: #B4B08C!important; white-space: nowrap!important;margin-bottom: 10px;font: normal 12px Arial;} #thisDiaryOwner_title {padding-left: 35px;} #myDiaryLinks_title {padding-left: 20px; } #globalLinks_title{padding-left: 15px;} #side {position: absolute; top: 140px; left: 360px;font: normal 13px Arial; padding: 0!important;} #thisDiaryInfo {position: absolute; top: -35px!important; left: 0px;background: none!important;} #authorName {float: left!important; color: #3F5441;font: normal 12px Arial;} #side ul {background:#DDDAC5; margin-left: -9px!important; width: 116px!important;} #side ul li {white-space: pre-line!important; border-bottom: 1px solid #CFCAA4;padding-bottom: 3px;} {---------------------------} .singlePost, .singleComment {margin-bottom: 40px!important;} .header span{font: bold 15px Arial; color: #999B7F; padding-right: 5px;} .header h2{font: bold 20px Arial; color: #9B2045;} .countSecond .header {text-align: right!important;} .countSecond .postActionLinks{float: left!important;} .postLinksBackg {color: #A0A480;text-transform: lowercase;font: bold 12px Arial;} .atTag em{color: #A0A480;} .atTag span {color: #2B3326;} #epigraph .singlePost {margin: 0!important;} {-----none--------------} #myLinks, #pchs, #lastComments,#iAmQuit, #YaSearch, .order_button, #epigraph .postLinksBackg, #thisDiaryLinks{display: none!important;}

Все исходники принадлежат их авторам

@темы: Цветы, Светлые цвета, CSS, Весна, Лето, Нежные, by [ShokolaD], Природа

Сообществу сегодня исполнилось
9 лет!

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

— 1. В скором времени выложу еще пару дизайнов из запасов, а также на сборке есть дизайны у  Ai_Yamaneko.
— 2. Возможно проведу-таки конкурс, за который вы голосовали несколькими постами ниже.
— 3. Подумываю добавлять записи не только по дизайну, но и с интересными ссылками/архивами/уроками.
Т.е. хочу объединить это сообщество с вот этим, потому что объемы информации у обоих ресурсов ничтожны, нет смысла уже их разделять. По этому поводу ставлю голосовалку, просто хочу узнать Ваше мнение на счет захламления этого сообщества сторонними постами.
— 4. В свободное время пересохраняю все старые дизайны на другой ресурс, чтобы наш прекрасный архив совсем не канул в лету. Времени это занимает много и работа монотонная, но есть мысль обратиться к Вам, нашим постоянным читателем, за помощью-обменом =)
Если есть ответственные желающие помочь с пересохранением архива картинок взамен на заказ индивидуального дизайна - пишите мне в личку.

Вроде пока все =)

@темы: Рабочее

При использовании дизайна просьба ставить баннер сообщества.
Настройки

Настройки
блочный;слева
Цвет текста
заголовка #78390a
записи #79222A
ссылки #32420C
оффтопика #a0a57f

Цвет фона и границ
фона записи и дневника #e8dabe
Границы #6B6C19

эпиграф
<img src="https://img-fotki.yandex.ru/get/2/185644012.a/0_11ea1f_be2af57b_orig" border="0" />
фото
фон

Все исходники принадлежат их авторам.

@темы: Цветы, Светлые цвета, Для бесплатных дневников, by yeees@, Весна, Природа

Пример



При использовании дизайна просьба ставить баннер сообщества

Настройки

Автоматичеcки установить цвета и фон - ЖМИ

Если хотите что-то изменить, нужна ручная установка!

Дизайн - блочный, меню - слева
Шрифт - Verdana
Размер и гарнитуру шрифта можно менять
заголовок - жирный, 13, цвет #23311c
текст - обычный, 12, цвет #23311c
ссылки - цвет #005d00
оффтоп - цвет #5e985e

фон записи - цвет #b2ceb2
граница - цвет #005d00

картинки
ЭПИГРАФ

img-fotki.yandex.ru/get/5706/185644012.a/0_11e9...
<div align="center"><img src="https://img-fotki.yandex.ru/get/5706/185644012.a/0_11e999_d10b741b_orig" ></div>

ФОН
img-fotki.yandex.ru/get/16123/185644012.a/0_11e...

ФОТО
img-fotki.yandex.ru/get/6702/185644012.a/0_11e9...

Картинка, используемая в дизайне: img-fotki.yandex.ru/get/4405/185644012.a/0_11e9...

Все исходники принадлежат их авторам.

@темы: Цветы, Светлые цвета, Для бесплатных дневников, by Симбелин, Весна, Яркие, Нежные

Настройки

Цвета текста: заголовок, ссылки - #8c8575, записи - #757269, оффтопика #908a99
Фон записи - #e4e1df, границы - #a99f91

Фон
Эпиграф

<div align="center"><img src="https://img-fotki.yandex.ru/get/4510/185644012.a/0_11dc6f_82a7e031_orig"></div>

Исходники (второй) принадлежат их авторам (George Christakis, Jean-Baptiste Monge)

@темы: Светлые цвета, Для бесплатных дневников, by Clochette_, Рисованные (вектор/кисти/рисунки)

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


При использовании дизайна просьба ставить баннер сообщества
Настройки

КАК УСТАНОВИТЬ ДИЗАЙН
Инструкция по установке - читать

Дизайн - блочный
заголовок - #ea1b30
текст - #51414b
ссылки - #c9896d
фон записи - #F2F1E8 или #ffffff
границы - #f2e3d7

ФОН
img-fotki.yandex.ru/get/22/62306769.19/0_c50eb_...

ЭПИГРАФ (ссылку нужно вставлять в поле для эпиграфа, в html вкладку)

<div align="center"><img src="https://img-fotki.yandex.ru/get/6843/62306769.19/0_c50ea_fe2b75d_orig"></div>

АВА
img-fotki.yandex.ru/get/5111/62306769.19/0_c50e...

Все исходники принадлежат их авторам

При использовании дизайна просьба ставить баннер сообщества
Настройки

КАК УСТАНОВИТЬ ДИЗАЙН
Инструкция по установке - читать

Дизайн - блочный
заголовок - #d9857b
текст - #353437
ссылки - #8e8e94
фон записи - #f7f7f6
границы - #c8c3c3
офф - #33333a

ФОН
img-fotki.yandex.ru/get/5702/62306769.19/0_c50f...

ЭПИГРАФ (ссылку нужно вставлять в поле для эпиграфа, в html вкладку)

<div align="center"><img src="https://img-fotki.yandex.ru/get/52/62306769.19/0_c50f5_766e5315_orig"></div>

АВА
img-fotki.yandex.ru/get/5302/62306769.19/0_c50f...

Все исходники принадлежат их авторам

@темы: Цветы, Светлые цвета, Для бесплатных дневников, Весна, by [ShokolaD], Природа

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


Настройки

Эпиграф
<div align="right"><img src="https://img-fotki.yandex.ru/get/6804/185644012.a/0_11d950_dd8961dc_orig"></div>
Фон
Ава
Цвета:
Текст - заголовок, записи #e1dcff ; ссылки #b9d2ff ; оффтопик #63779b
Фон записи #7b7fca ; границы #7373cb

Настройки

Эпиграф
<div align="center"><img src="https://img-fotki.yandex.ru/get/15521/185644012.9/0_11d94a_a07cbeff_orig"></div>
(Исходник принадлежит своему автору)
Фон
Цвета:
Текст - заголовок, оффтопик #c5a47b ; записи #b98e78 ; ссылки #c5a47b
Фон записи #361a19 ; границы #582925

Настройки

Эпиграф
<div align="center"><img src="https://img-fotki.yandex.ru/get/16142/185644012.9/0_11d94f_def51ef4_orig"></div>
Фон
Цвета:
Текст - заголовок #5f3128 ; записи #6e2f1f ; ссылки #4f241b ; оффтопик #b76254
Фон записи #160a0a ; границы #4f241b

@темы: Темные цвета, Светлые цвета, Для бесплатных дневников, by Clochette_, Животные

Оформление по результатам опроса предыдущего поста.


При использовании дизайна просьба ставить баннер сообщества
Настройки

Настройки

КАК УСТАНОВИТЬ ДИЗАЙН
или
"что это за код и куда его вставлять, памагити!?"
Инструкция по установке - читать

Дизайн - табличный, меню - вверху
Шрифт - Arial
ссылки - #dadada
текст - #444e5f
заголовок - #b1bac7
офф - #999

Остальные цветовые настройки не нужны!!! Не нужно их самостоятельно вставлять!
Проверьте, чтобы все остальные поля, не указанные тут, были пустыми!

код
body{background: url('ФОН ДНЕВНИКА')} #wrapper{margin-top:-10px; width: 900px !important; max-width: 900px !important; min-width: 900px !important; position:relative; } #extratop{background: url('ЭКСТРАТОП'); width:1251px; height:559px; position:relative; top:70px; left:-185px; z-index:-1;} #add_block1{background: url('МЕНЮ'); position:absolute; top:0px; width:100% !important; height:70px !important; box-shadow: 1px 1px 20px #000; z-index:-1; margin: 0px -10px 0px -10px !important} #add_block2{background-image: linear-gradient(rgba(0,0,0,0), rgba(24,35, 60,0.7)); width: 100%; height: 40%; position:fixed; bottom:0px;margin: 0px -10px 0px -10px !important} #side{ width:695px !important; height:50px !important; position:absolute; top: 0px; left:100px; border-right: 1px dotted #444774; border-left: 1px dotted #444774;} #page-t{width:900px !important; position: relative; z-index:+1 !important} {-----------------------------------} .menuSection{ padding: 0px 20px 0px 20px;height:50px !important; font-size:16px;} #myDiaryLinks{ border-right: 1px dotted #444774; border-left: 1px dotted #444774;} .menuSection_title{color: #b1bac7 !important;} .menuSection ul{background: #3b3d6d !important; margin-top:-4px!important; margin-left:-20px !important; font-size:12px; paddig:7px; box-shadow: 2px 5px 20px #111; width:215px; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; border: 2px solid #543738 !important} .menuSection li{ border-bottom: 1px dotted #222345; text-align: center; padding-top:2px !important; text-transform: capitalize} #thisDiaryOwner_title{background: url('ЗАПИСИ') center center no-repeat; width:190px; height:70px; line-height:200px; overflow: hidden} #myDiaryLinks_title, #thisDiaryLinks_title{background: url('МОЙ ДНЕВНИК') center center no-repeat; width:190px; height:70px; line-height:200px; overflow: hidden} #globalLinks_title{background: url('ГЛАВНОЕ МЕНЮ') center center no-repeat; width:190px; height:70px; line-height:200px; overflow: hidden} #TagsList ul{margin-left:200px !important; margin-top:-24px !important} #side h1 {position: absolute; } #side h1 a{position: absolute; top:495px; left:320px; background: url('ДНЕВНИК') center center no-repeat; width:23px; height:27px; line-height:200px; overflow: hidden;} #authorName { background: url('ПРОФИЛЬ') center center no-repeat; width:23px; height:27px; line-height:200px; overflow: hidden} #thisDiaryInfo{ position: absolute; top:490px !important; border: 0px; left:335px ; width:23px !important;} {-----------------------------------} .singlePost, .singleComment, #msg_form, #content{background:#9a9aab url('ФОН ЗАПИСИ') repeat-y !important; margin-bottom:35px; border:2px solid #4d4766; box-shadow: 0px 0px 20px #bbb; padding:10px !important; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; } #post0{margin:0px !important; background:none !important; border:0px; box-shadow:none} .postDate{height:0px !important; margin-bottom: -35px !important} .postDate span{position:relative; top:-35px !important; } .singlePost .header, .singleComment .header { background: #3b3d6d !important; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; width:480px; margin-top:-25px !important; margin-left:200px; margin-bottom:7px} .postLinksBackg li{background: #616188 !important; margin-left: -4px; padding: 2px 8px} .pages a{background:#3b3d6d; box-shadow: 0px 0px 10px #bbb; padding: 4px 8px !important; border-radius: 26px; -moz-border-radius: 26px; -webkit-border-radius: 26px; -o-border-radius: 26px; margin-left:6px} .pages strong{background:#616188; padding: 4px 8px !important; border-radius: 26px; -moz-border-radius: 26px; -webkit-border-radius: 26px; -o-border-radius: 26px; margin-left:6px} #JournalCalendar #content, .header.calHeader {margin: 0px 175px 0px 175px; padding-left: 15px !important; } .cal-mnth{ background: #222345 !important; padding: 3px; box-shadow:1px 1px 7px #111;} .order_button, #bottomNav, #YaSearch, #login_form, #iAmQuit, #pchs, #thisDiaryLinks, #lastComments, #myLinks, .pages_str{display:none !important} .advertising{position:absolute; top:500px; width:100%; text-align:center; z-index:+1} {-----------------------------------------} a:hover{text-decoration:none; text-shadow: 0px 0px 5px #14163a; color: #b1bac7} a{-moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s;} img{max-width:600px; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; -moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s;} img:hover{ filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .menuSection li:hover{ background: #222345; }

картинки
ЭКСТРАТОП
МЕНЮ
ЗАПИСИ
МОЙ ДНЕВНИК
ГЛАВНОЕ МЕНЮ
ФОН ДНЕВНИКА
ФОН ЗАПИСИ
ДНЕВНИК
ПРОФИЛЬ

Картинки, используемые в дизайне
ССЫЛКА
Все исходники принадлежат их авторам

@темы: CSS, Сказка/Фэнтези, by Ester Calhoun, Нежные