№1378.

[Ai_Yamaneko]

Простенький и без наворотов =)



При использовании дизайна просьба ставить баннер сообщества
— Установить автоматически —

Настройки

диз блочный, меню слева
заголовок #e47f53
ссылки #bb4715
записи #575758
офф #999
фон дневника #f4eedf
остальное #

КАРТИНКИ

 {---------------------------------------------------КАРТИНКИ----------------------------------------------------}
 ///// {-------------1------------} .pages_str td[align="right"] a, .pages_str td[align="left"] a {background: url('СТРЕЛКИ') no-repeat;}
 ///// {-------------2------------} #add_block3 { position:fixed; width:1px; left:0%; top:0px; background: url('ЛИНИЯ-1') repeat-y top left; height: 100%; margin-left: 245px;z-index: 0;}
 ///// {-------------3------------} #epigraph {background: url('ЭПИГРАФ') no-repeat 0px 25px; padding-left: 180px!important; min-height: 160px; }
 ///// {-------------4------------} #Journal .countFirst .header, #JournalComments .countSecond .header {background: url('ОРАНЖ_ЗАГОЛОВОК') no-repeat center left;}
 ///// {-------------5------------} #Journal .countSecond .header, #JournalComments .countFirst .header {background: url('ГОЛ_ЗАГОЛОВОК') no-repeat center left;}
 ///// {-------------6------------}  .header span {background: url('ВРЕМЯ') no-repeat; height: 25px; padding: 0px 0 0px 23px;}
 ///// {-------------7------------} .postLinksBackg {background: url('ЛИНИЯ-2') repeat-x top left;}
 ///// {-------------8------------} .atMusic, .atMood {background: url('ИКОНКИ') no-repeat top left; height: 20px; padding-left: 15px;}
 ///// {-------------9------------}  #side{padding: 0px 0 0 44px!important; height: 45px!important;overflow:hidden; width: 0px;background:url('МЕНЮ') no-repeat 5px 5px; margin-top: 40px; position: relative; z-index: 20; left: -5px; text-align: center!important;color: #e47f53!important;}
 ///// {-------------10------------} #YaSearchForm input.submit {background: url('ПОИСК') 0px 0px no-repeat!important; width:22px !important; height:22px!important; -moz-opacity:.99 !important;opacity:.99 !important; filter:alpha(opacity=99); !important; margin-top:2px; margin-left:5px!important; font-size:0;border: none!important;}
 {---------------------------------------------------------------------}
 {---------------------------------------------------------------------}
 {---------------------------------------------------------------------}
 {---------------------------------------------------------------------}
 body {padding: 0px!important;overflow-x: auto!important;}
 #Journal img { max-width: 80%!important; }
 .paragraph img { max-width: 70% !important; }
 .avatar img {border: 1px solid #e47f53!important; }
 #Journal .blockquote img {max-width: 60%!important;}
 .blockquote img {max-width: 50%!important;}
 a:hover {color: #575758; text-decoration: none!important;transition: all 0.3s ease-out 0.0s;}
 .postContent {overflow-x: auto!important;}
 .text, #message {border:1px solid #e47f53!important;padding: 5px!important;width: 90% !important;}
 .submit {padding: 5px!important;background:#eca484!important;}
 .submit:hover {padding: 5px!important;background:#e47f53!important;}
 #Journal .countSecond .quote_text, #JournalComments .countFirst .quote_text {color: #484646; display: block; padding: 10px; margin: 0 30px 0 80px; border: 1px solid #b2cbcb; position: relative;}
 #Journal .countSecond .quote_text:before, #JournalComments .countFirst .quote_text:before {content: "ЦИТАТА:";font: normal 20px Impact;color: #b2cbcb!important; position: absolute; left: -80px; top: -5px;}
 #Journal .countFirst .quote_text, #JournalComments .countSecond .quote_text {color: #484646; display: block; padding: 10px; margin: 0 30px 0 80px; border: 1px solid #E47F53; position: relative;}
 #Journal .countFirst .quote_text:before, #JournalComments .countSecond .quote_text:before {content: "ЦИТАТА:";font: normal 20px Impact;color: #e47f53!important; position: absolute; left: -80px; top: -5px;}
 {-----------------------------------------------------------------------------------}
 {------------------------------------POSTS---------------------------------------}
 #wrapper {width: 99%!important; position: relative; }
 #add_block1 { position:fixed; width:45px; left:0%; top:0px; background: #e47f53; height: 100%; margin-left: 0px; z-index: -1;}
 #add_block2 { position:fixed; width:190px; left:0%; top:0px; background: #f4eedf; height: 100%; margin-left: 45px; z-index: -1;}
 #page-c {margin-right: -5px!important; }
 #postsArea,#addCommentArea, #commentsArea {padding: 10px 25px 25px 25px;}
 #commentsArea .postTitle.header span{left: -135px!important; position: absolute; width: 160px;}
 .singleComment {position: relative;}
 #epigraph.singlePost {margin-bottom: 10px!important;}
 .countFirst .header, .countSecond .header {padding: 0px 0 0px 75px!important; left: -76px!important; width: 675px; height: 55px; vertical-align: middle!important;display: table-cell; position: relative; z-index: 3;}
 .header h2 {line-height: 0.9; color: #ffffff;}
 .postContent {margin-top: 20px!important; min-height: 170px;}
 .singlePost {margin-bottom: 30px!important; position: relative;}
 .postDate {position: absolute; left: -185px; top: 70px; width: 150px; font: normal 20px Impact;text-transform: uppercase; line-height: 1.1; text-align: left;}
 #Journal .countSecond .postDate, #Journal .countSecond .header span, #JournalComments .countFirst .postDate, #JournalComments .countFirst .header span {color: #b2cbcb!important; }
 #Journal .countFirst .postDate, #Journal .countFirst .header span, #JournalComments .countSecond .postDate, #JournalComments .countSecond .header span {color: #e47f53!important; }
 .header span {position: absolute; left: -110px; top: 110px; font: normal 20px Impact;text-transform: uppercase;}
 #Journal .countSecond .header span, #JournalComments .countFirst .header span {background-position: 0 -39px;}
 #Journal .countFirst .header span, #JournalComments .countSecond .header span {background-position: 0 4px;}
 .postLinksBackg {width: 140px; text-align: right!important; position :absolute; top: 150px; left: -200px; padding: 10px 0 0 20px!important;}
 .postLinksBackg ul li{display: inline-block;text-align: right!important; font: normal 15px Courier New; color: #636363!important; text-transform: uppercase;}
 .postLinksBackg a {color: #636363!important;}
 .postLinksBackg a:hover, #Journal .comments_count_link a:hover:first-child {color: #bb4715!important;}
 .comments_count_link a:first-child {font: normal 15px Courier New; color: #636363!important; display: block !important; overflow: visible; text-decoration: none!important; float: left; margin-right: 5px; }
 .comments_count_link { font-size: 0 !important; float: left; }
 .atMusic {background-position: 0 2px; }
 .atMood {background-position: 0 -33px;}
 .atMood em, .atMusic em {font: normal 18px Courier New!important; color: #3b3b3b; font-style: normal!important;}
 .atTag em { color: #f4eedf; font-style: normal!important; }
 .atTag em a {text-decoration: none;color: #3b3b3b;font: normal 18px Courier New!important;}
 #Journal .countFirst .atTag em a:hover, #JournalComments .countSecond .atTag em a:hover {text-decoration: none;color: #e47f53; display: inline-block; font-style: italic!important; font-weight: bold!important; font-family:Times New Roman;}
 #Journal .countSecond .atTag em a:hover, #JournalComments .countFirst .atTag em a:hover {text-decoration: none;color: #b2cbcb; display: inline-block; font-style: italic!important; font-weight: bold!important; font-family:Times New Roman;}
 .atTag {margin-top: 3px;}
 .pages_str td[align="right"] a{display:block; width:15px; height:20px; line-height:800px; overflow:hidden; background-position: 0 -30px; position: relative; top: 25px; left: 35px; font-size: 0px!important; background-color: #f4eedf!important;}
 .pages_str td[align="left"] a {display:block; width:15px; height:20px; line-height:800px; overflow:hidden; background-position: 0 0; position: relative; top: 32px; left: -25px; font-size: 0px!important;background-color: #f4eedf!important;}
 #pageBar a{ color: #e47f53; line-height:30px;font: normal 20px Impact; text-align: center; padding:2px 4px 2px 4px; }
 .pageBar strong, #pageBar a:hover { color: #fff!important;text-align: center; line-height:30px; visibility: visible; background-color: #b2cbcb;font: normal 20px Impact; padding:2px 4px 2px 4px;}
 .authorName, .communityName {padding-top: 10px!important; }
 {-----------------------------------------------------------------------------------}
 {------------------------------------SIDE---------------------------------------}
 #side .bordered {padding-top: 0!important;}
 #side:hover {padding: 0px 0 0 50px!important; width: 185px; height: 100%;overflow:visible; }
 #side:hover:before { content: ''; position: fixed; top: 0; left: 45px; width: 199px; height: 100%; background: #f9f5ec; z-index: -4; }
 .menuSection_title {display: block; text-align: center!important;}
 #side .menuSection {z-index: 20!important; position: relative;}
 #authorName, #side h1 a {font: normal 20px Impact!important; color: #e47f53!important;text-transform: uppercase; }
 #YaSearchForm{display:block !important;visibility: visible!important; }
 #YaSearchForm #yaquery { height: 12px;width: 120px; padding-left: 10px;border: 1px solid #e47f53!important; border-radius: 50px; margin-left: -5px;}
 #thisDiaryPhoto img {border: 1px solid #e47f53!important; }
 #side ul a {font: italic 15px Times New Roman!important; color: #e47f53!important;}
 #side ul a:hover {font: italic 15px Times New Roman!important; color: #575758!important;}
 #thisDiaryOwner ul, #myDiaryLinks ul, #globalLinks ul, #myLinks ul {text-align: left!important; }
 #Stats {margin-top: 0px;}
 #thisDiaryOwner_title b, #myDiaryLinks_title b, #globalLinks_title b, #myLinks_title b, #Stats a{font: normal 25px Courier New!important; color: #e47f53!important;text-transform: uppercase;white-space: nowrap;letter-spacing: -0.08em!important;}
 #thisDiaryOwner, #myDiaryLinks, #globalLinks, #myLinks{padding: 0 0 0 0px!important; height: 25px;overflow:hidden;}
 #thisDiaryOwner:hover, #myDiaryLinks:hover, #globalLinks:hover,#myLinks:hover {height: 100%;overflow: visible;padding: 0 0 0 0px!important; }
 .menuSection ul { padding: 10px 0 0 0!important; width: 155px!important;}
 {----------------------------------------------------------------------------}
 {----------------------------------NONE-----------------------------------}
 .order_button, .prevNextLinks, .Attention, #lastComments, #thisDiaryLinks, #myLinks, #headlineList, #sortOrder, #Stats a+a, .urlLink, #epigraph .postLinksBackg, .atMusic span, .atMood span, .atTag span, #YaSearch_title,#YaSearchForm_title{display: none !important;}
 

P.S. Я все еще занимаюсь дизайнами CSS на заказ. Все подробности здесь

---

№1377

[Ester Calhoun]

Эпиграф

Ава

Фон


Дизайн - блочный
заголовок - #96826b
текст - #858985
ссылки -#96826b
офф - #999

фон записи - #f0f4f7
границы - #bcbcbc

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

---

№1376 Огоньки все делают нежнее

[Лисячий нос]

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

Настройки

Настройки
Эпиграф:

<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

---

Цветы в вазе

[La mignonne]

— Продан

Комментарии

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

---

№1375 Маки

[La mignonne]

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



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

КОММЕНТАРИИ

— Дизайн в единственном экземпляре.
— Проверен в браузерах: 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...

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

---

Спокойное лето

[La mignonne]

ПРОДАН!

КОММЕНТАРИИ

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

---

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

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

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

---

Осень

[Ester Calhoun]

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


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

---

Пляж

[Ester Calhoun]

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


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

---

Этно

[Ester Calhoun]

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



Продано.

---

Заказы для Ai_Yamaneko

[Ai_Yamaneko]

НАБОР ЗАКРЫТ

Привет, я начинающий дизайнер/мастер в этом соо, вот примеры моих работ.

Условия заказа:
1. Исходники. Во-первых, для того, чтобы понять, что Вам нравится. Во-вторых, на что опираться в поиске дополнительных картинок. В-третьих, если в дизайне обязательно должны быть Ваши исходники, постарайтесь найти большие их размеры.
2. Формулируйте, пожалуйста, четко то, что вы хотите. Какую цветовую гамму предпочитаете, расположения меню/блока записей и прочее. Чем больше Вы дадите мне информации, тем легче пойдет работа.
Если не понравился макет или ее части, тоже говорите сразу, не стесняйтесь. Это все сэкономит нервы и время.
Оставляю за собой право отказаться от заказа в процессе отрисовки, если пойму, что ничего путного не выходит.
Все неподошедшие Вам макеты или недоделанные дизайны я оставляю себе и могу распоряжаться на свое усмотрение.
3. Присылайте мне ссылки на дизайны, которые Вам нравятся по структуре/цветовой гамме. Не обязательно мои работы - любые, это нужно мне для примера, а не срисовки.
4. СРОКИ заказа от нескольких недель до нескольких месяцев. Время и вдохновение, к сожалению, есть не всегда.
5. НЕ делаю дизов из ваших фото. НЕ переделываю уже имеющиеся у Вас дизайн. За изменением каких-либо деталей обратитесь, пожалуйста, к автору. Так же оставлю за собой право отказаться, если мне не подойдет исходник или тема.
6. Открывайте для меня свой дневник (после выполнения заказа закроете).
7. Скриншот готового заказа выставляю отдельным постом в соо на свое усмотрение (без настроек естественно).
8. Оплата только на карту.

Стоимость:
от 1000р.
Цена может измениться от сложности и/или Ваших желаний для дизайна.


Дизайны на продажу:
1. Пират — 500р.
2. Зимний — 400р.
Смотреть макеты в этом посте.

запись создана: 08.09.2014 в 16:12

---

№1374 Breaking Bad

[Alizeya]

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



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

---

№1373. Летнее безобразие

[персеида]

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


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

---

Заказ для Корабельная Ассоль

[Ai_Yamaneko]

Заказ для  Корабельная Ассоль



Все настройки находятся у заказчика.

---

№1372. Флейта

[Симбелин]

Пример



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

Настройки

Автоматиче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...

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

---

№1371

[La mignonne]

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


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

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

Настройки

Настройки

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

Дизайн - блочный, меню - вверху
ссылки - #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;}
 

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

---

9 лет!

[La mignonne]

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

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

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

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

---

Заказ для Ver/o/nika

[Ai_Yamaneko]

Дизайн для  Ver/o/nika

+1

Все настройки находятся у заказчика.

---

№1370. Обитель зла

[Ai_Yamaneko]

Любителям игры =)

Настройки

Диз блочный, меню вверху
заголовок #ffffff
ссылки #742937
текст #d4d3d3
офф #9b8faa

КАРТИНКИ

 {------------------------------КАРТИНКИ------------------------------------}
{------1------}   body {padding: 0px!important;overflow-x: auto!important;background: #250712 url('ФОН') left top repeat-x;}
{------2------}    #add_block1 { position:absolute; width:148px; top:398px; background: url('ЭМБЛЕМА') no-repeat; height: 137px; margin-left: -115px;left: 50%;}
{------3------}    #extratop {background: url('ЭКСТРАТОП') -25px 0 no-repeat; height: 475px; width: 800px;}
{------4------}    #page-c { background-color: tranparent; background-image: url("ЗАЛИВКА-1"), url("ЗАЛИВКА-2"), url("ЗАЛИВКА-3"); background-position:left top,1px bottom, left top!important; background-repeat: no-repeat, no-repeat, repeat-y !important; padding: 25px 0 50px 0!important; width: 774px!important; min-height: 800px;}
{------5------}    .paragraph{padding: 0px 0 30px 0!important;background: url('РАЗДЕЛИТЕЛЬ-2') center bottom no-repeat;}
{------6------}     .header {text-align: center!important; position:relative;background: url('РАЗДЕЛИТЕЛЬ-1') center bottom no-repeat;min-height: 35px;}
{------7------}    .atMusic SPAN, .atMood SPAN, .atTag SPAN {background: url('ТЕГИ') 0px 0px no-repeat; display:inline-block; width:70px; height:14px; line-height:500px; overflow:hidden; }
{------8------}    #commentsArea .header span{background: url('ДАТА') 15px 15px no-repeat; font: normal 14px Georgia!important; color: #696868!important; height: 20px!important;width: 200px!important;}
{------9------}    .postDate span {background: url('ДАТА') 0px 0px no-repeat; padding: 1px 0 0 25px; font: normal 14px Georgia!important; color: #696868!important; }
{------10------}     .header span {background: url('ВРЕМЯ') 3px 0px no-repeat; width: 92px!important; height: 59px!important; display: block; position: absolute; padding: 16px 5px 0px 0px!important; color: #ffffff; font: normal 28px Georgia!important; left: -80px; margin-top: -20px;}
{------11------}      .comments_count_link a:first-child {color: #ffffff; font: normal 25px Georgia!important; position: absolute; top: -58px!important; right: -133px!important; background: url('КОММЕНТЫ') no-repeat 0px 0px; display: block !important; overflow: visible; text-decoration: none!important; text-align: center!important; width: 85px; height: 42px; padding: 16px 5px 0px 0px!important;}
{------12------}     .menuSection_title, .menuSection_title:hover, #iAmQuit a, #iAmQuit a:hover {background: url('МЕНЮ') 0px 0px no-repeat;}
{------13------}     #side ul {background: url('МЕНЮ-2') no-repeat!important; width: 170px; min-height: 110px; padding: 60px 20px 10px 30px!important;margin:-9px 0 0 -40px;}
{------14------}      #YaSearchForm input.submit {background: url('ПОИСК') 0px 0px no-repeat!important; width:18px !important; height:18px!important; -moz-opacity:.99 !important;opacity:.99 !important; filter:alpha(opacity=99); !important; margin-top:3px; margin-left:-25px; font-size:0;border: none!important;}
 {-----------------------------------------------------------------------------------}
 {-----------------------------------------------------------------------------------}
 {-----------------------------------------------------------------------------------}
 {-----------------------------------------------------------------------------------}
 {-----------------------------------------------------------------------------------}
 #Journal img { max-width: 700px!important; }
 img { max-width: 500px !important; }
 #Journal .blockquote img {max-width: 600px!important;}
 .blockquote img {max-width: 500px!important;}
 a:hover {color: #953547; text-decoration: none!important;transition: all 0.3s ease-out 0.0s;}
 .postContent {overflow-x: auto!important;}
 .text, #message {border:2px solid #7e2d3c!important;padding: 5px!important;}
 #w18p {position:absolute; top: 0px; width: 150px; right: 0;z-index: 50;}
 .submit {padding: 5px!important;background:#7e2d3c!important;}
 .submit:hover {padding: 5px!important;background:#581824!important;}
 .quote_text {color: #d4d3d3; display: block; padding: 0px 0 0px 20px; margin: 0 30px 0 30px; border-left: 3px solid #7e2d3c; font-family: Courier New;font-style: normal!important;}
 {-----------------------------------------------------------------------------------}
 {------------------------------------POSTS---------------------------------------}
 #wrapper {width:839px!important; position: relative;min-width:0px!important; padding-bottom: 40px!important;}
 .singlePost {margin-bottom: 100px!important; position:relative;}
 .postLinksBackg {color: #696868; padding: 10px 0 10px 0!important; width: 500px; float: right;}
 #Journal .paragraph {padding: 35px 0 30px 0!important;}
 .postLinksBackg a {color: #696868;}
 .postLinksBackg a:hover {color: #6f2635!important;}
 #postsArea {padding: 35px!important; }
 .header h2 {font: normal 24px Georgia!important; color: #ffffff; text-shadow: 0px 0px 1px #a27474, 1px 1px 2px #8b1a1a; position: absolute; width: 620px; margin-left: -140px;bottom: 5px; left:165px;}
 .atTag SPAN {background-position: 0 5px; margin-bottom:0px;}
 .atMood SPAN {background-position: 0 -30px; margin-bottom:-2px;}
 .atMusic SPAN {background-position: 0 -65px; margin-bottom:-2px;}
 .atMusic em, .atMood em, .atTag em a,.atTag em{color: #7e2d3c!important; font-style: normal!important;font: normal 14px Georgia!important; text-decoration: none!important; border: none!important;}
 .atTag em a:hover {color: #a13c4f!important;}
 .postDate {position: absolute; bottom: -30px;}
 .postActionLinks {position: relative; z-index: 10; top: -30px; right: 5px;}
 .comments {position: absolute; top: 43px; right: 60px;}
 .comments_count_link a:hover:first-child {color: #3b0d16!important;}
 .comments_count_link { font-size: 0 !important;}
 {-------------}
 #post0 {background: none!important;margin: 0px!important; padding: 0!important;}
 #epigraph .singlePost {margin: 0px!important; }
 #epigraph .paragraph {padding: 5px 0 15px 0!important}
 #epigraph{padding: 0!important;margin-bottom: 70px!important;}
 #epigraph .postActionLinks {top: -15px; }
 {-------------}
 #JournalComments #postsArea{padding-top: 70px!important;}
 #addCommentArea, #commentsArea {padding: 0 35px 30px 35px!important; }
 #commentsArea {margin-top: -50px;}
 .singleComment {position: relative; margin-bottom: 60px!important;}
 #commentsArea_title, #addCommentArea_title, #new_post_title {color: #7e2d3c;background: none; }
 #new_post_title {padding-top: 40px;}
 .singleComment .header {position:absolute; left: 65px; bottom:-50px;background: none!important;width: 650px!important; }
 #commentsArea .paragraph{background: none!important;}
 #JournalComments #postsArea .postDate {position: absolute; bottom: -35px;}
 #commentsArea .header .postActionLinks {position: absolute; z-index: 10; top: -40px;}
 #JournalCalendar #content {text-align: center; padding: 30px 30px 30px 50px;}
 .header.left {margin-bottom: 50px;}
 {-----------------------------------------------------------------------------------}
 {------------------------------------SIDE-----------------------------------------}
 #side {position: absolute; top: 0px; width: 780px!important;}
 #thisDiaryOwner_title {background-position: 0px 26px; width: 110px; height:70px; line-height: 500px;overflow: hidden; }
 #thisDiaryOwner:hover #thisDiaryOwner_title{background-position: 0px -60px; }
 #myDiaryLinks_title{background-position: -145px 26px; width: 100px; height: 70px; line-height: 500px;overflow: hidden; }
 #myDiaryLinks:hover #myDiaryLinks_title{background-position: -145px -60px; }
 #globalLinks_title{background-position: -465px 26px; width: 110px; height: 70px; line-height: 500px;overflow: hidden; }
 #globalLinks:hover #globalLinks_title{background-position: -465px -60px; }
 #iAmQuit a{background-position: -590px 26px; width: 100px; height: 70px; line-height: 500px;overflow: hidden; display: block;transition:none;}
 #iAmQuit a:hover {background-position: -590px -60px; }
 #thisDiaryOwner {position: absolute; top: 425px; left: 40px;}
 #myDiaryLinks {position: absolute; top: 425px; left: 190px;}
 #globalLinks {position: absolute; top: 425px; left: 470px;}
 #iAmQuit {position: absolute; top: 425px; left: 610px;}
 #side h1 a{font: normal 30px Georgia!important; color: #ffffff!important; text-shadow: 0px 0px 1px red, 1px 1px 2px #8b1a1a;}
 #side h1 a:hover,#authorName:hover {color: #ecc5cc!important; }
 #side h1 {width: 770px; text-align: center!important; position: absolute; left: 0; top: 365px;}
 #authorName {font: normal 30px Georgia!important; color: #ffffff!important; text-shadow: -2px 2px #050c4d, 2px 2px #050c4d, 2px 1px #050c4d, 1px -2px #050c4d;width: 200px!important; text-align: center!important; }
 #thisDiaryInfo {position: absolute; left: 140px; top: 95px!important; }
 #thisDiaryPhoto {margin-top: 40px!important;}
 #side ul li {width: 170px; text-overflow: ellipsis!important;white-space: nowrap; overflow: hidden; line-height: 0.5!important;}
 #side ul a {color: #363533; font: normal 13px Verdana!important;}
 #side ul a:hover {color: #000000; font: normal 13px Verdana!important;}
 #myDiaryLinks ul {margin:-9px 0 0 -60px;}
 #TagsList ul {background: none!important; padding: 15px!important; background-color: #8e9095!important; margin: 0px!important;}
 #TagsList ul li {width: 170px; white-space: pre-line!important;}
 {---------------}
 #YaSearch {position: absolute; top: 0px!important; left: 580px!important; -moz-opacity:.90 !important;opacity:.90 !important;}
 #YaSearch:hover {-moz-opacity:.90 !important;opacity:.90 !important;}
 #YaSearchForm{display:block !important;visibility: visible!important; }
 #YaSearchForm #yaquery { height: 15px;background: #2e0917; width: 140px; border: none!important; border: 1px solid #7e8188!important; font: normal 10px Verdana!important; padding: 0 10px 2px 10px!important;}
 {---------------------------------------------------------------------------------}
 {------------------------------------NONE---------------------------------------}
 .order_button, .prevNextLinks, .Attention, #lastComments, #thisDiaryLinks, #myLinks, #lastComments, #pchs, #headlineList, #sortOrder, #Stats a+a, #epigraph .header, #epigraph .postLinksBackg, .urlLink, #bottomNav, #JournalQuote .quote_post,#JournalFavorite .quote_post, #more_login, #myNotepadLink, #myLinksLink, #myProfileLink, #albumLink, #photolibLink, #rssLink, #upInChart, #allDiaryLink, #favListLink, #pchListLink, #communityCatalogueLink, #diarySpiritLink, #randomDiaryLink, #myCommunitiesLink, #myAccountLink,#myQuotLink, #discussionLink, #myFavLink, #mySFavLink, #login_form, #thisDiaryPhoto {display: none !important;}

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

---

Конкурс

[La mignonne]

Может кто помнит, было такое чудесное сообщество @designsCSS — КОНКУРС ДНЕВНИКОВ
Там проводились в том числе и не тематические конкурсы дизайнов. Суть такая: у Вас в дневнике есть красивый CSS дизайн на любую тему, Вы хотите его представить для участия в конкурсе. Вы подаете заявку, как и еще 9 человек, и потом путем голосования читателей из всех работ выбирается самый красивый, продуманный, лучший дизайн.
То есть - 1) специально рисовать ничего не нужно для конкурса, 2) все прелести дизайна и кода видны, т.к. дизайн стоит в Вашем дневнике в открытом доступе, 3) Вы можете просто показать свой красивый дизайн для сторонней оценки и получить похвалу/критику и плюсик к самооценке, если Ваш дизайн выберут лучшим из всех.

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

запись создана: 22.04.2015 в 11:20