#809. Diary

[Eilianta]

Дизайн простенький, динамичный, в стиле унисекс в теплых тонах))
Кому нравится?)

Скрин:

Настройки

На все вопросы по установке вам ответит наш FAQ.
Если забираете дизайн - не забывайте ставить баннер сообщества.

Что нам нужно?
БЛОК1
img220.imageshack.us/img220/7806/81893385.png
БЛОК2
img3.imageshack.us/img3/4921/38254575.png
БЛОК3
img39.imageshack.us/img39/8100/74206931.png
ВЫХОД
img204.imageshack.us/img204/1984/18001575.png
ЗАГОЛОВОК
img841.imageshack.us/img841/793/26259018.png
МЕНЮ1
img683.imageshack.us/img683/3655/50316730.png
МЕНЮ2
img535.imageshack.us/img535/5378/74260323.png
МЕНЮ3
img199.imageshack.us/img199/5017/57515024.png
МЕНЮ4
img715.imageshack.us/img715/7599/11912141.png
МЕНЮ5
img99.imageshack.us/img99/7057/86718882.png
ПАРАГРАФ
img222.imageshack.us/img222/167/99555796.jpg
ПОИСК
img231.imageshack.us/img231/5240/62931973.png
СТАТ
img228.imageshack.us/img228/2931/98926185.png
ФОН
img3.imageshack.us/img3/9411/36112639.jpg
ФОН ПОСТА
img109.imageshack.us/img109/5558/89260942.jpg
ФОНМЕНЮ
img15.imageshack.us/img15/8290/97432097.jpg
ЭКСТРАТОП
img217.imageshack.us/img217/3158/70367087.jpg

Код:

 body {background: url('ФОН');}
 #extratop {background:url('ЭКСТРАТОП') repeat; height: 200px; width: 100%; position: relative; z-index: 7; top: -34px;}
 #page-c {background: url('ФОН ПОСТА') repeat; width:80% !important; min-width: 900px !important; position: absolute; right: 50px; top: 160px; border: 1px solid #000700; z-index: 3;}
 #postsArea { position: relative; top: 4px; }
 .paragraph div {border: 1px dashed #c6bba4; background: url('ПАРАГРАФ') repeat; margin-left: 5px; margin-right: 5px; padding: 4px;}
 #epigraph .paragraph div {border-top: 0px dashed #c6bba4 !important; border-bottom: 0px dashed #c6bba4 !important; background: none !important; margin-top: 5px; font-size: 12px !important; text-transform: lowercase !important; }
 #wrapper{ min-width:1000px!important; width:100%; margin: 0 auto !important; padding:0px !important; position: absolute !important; right: 0px;}
 #add_block1 {background: url('БЛОК1'); width: 976px; height: 166px; position: absolute; top: 0px; left: 43px; z-index: 8;}
 #add_block2 {background: url('БЛОК2'); width: 3px; height: 100%; position: fixed; top: 0px; bottom: 0px; right: 86%; z-index: 2;}
 #add_block3 {background: url('БЛОК2'); width: 3px; height: 100%; position: fixed; top: 0px; bottom: 0px; right: 40px; z-index: 2;}
 #add_block4 {background: url('БЛОК3'); width: 139px; height: 100%; position: fixed; top: 0px; bottom: 0px; left: -7%; z-index: 3;}
 #side {width: 920px; position: absolute; top: 60px; left: 300px; margin-left: 10px; text-align: center; background: #; border: none; z-index: 66; height: 160px;}
 #Journal .header {background: url('ЗАГОЛОВОК') 0px -2px no-repeat; height: 50px;}
 .postDate span:before{content:'date: ' !important; color:#91826a;}
 #Journal .header {padding-left: 89px !important; position: relative; left: -30px; font-size: 150%; padding-top: 8px !important; z-index: 7; text-transform: uppercase; magin-top: 20px; }
 .postDate { text-transform: lowercase; color:#91826a !important; font-size: 12px !important;}
 .postTitle span { text-transform: lowercase; color:#91826a !important; font-size: 12px !important; position: absolute; top: 14px; left: 2%; }
 .postLinksBackg {border-bottom: 1px dashed #4a1914; margin-bottom: 5px; text-transform: uppercase; font-size: 10px !important; }
 #epigraph .header {background:none !important; margin-bottom: -60px; }
 .singlePost {position: relative; }
 .order_button {background:none !important; margin-top: -50px; top: -20px; border-bottom: 1px dashed #4a1914; position: relative; right: -20px; margin-right: -40px !important;}
 #YaSearch {padding:0!important; margin:0!important;border:none!important; position: absolute; top: 50px; margin-top: 30px; margin-left: 5px; left: -225px; color: #e7debf; text-transform: uppercase; background: # !important; width: 150px !important;}
 #YaSearch_title b {color: #e7debf; text-transform: uppercase; background: # !important;}
 #YaSearchForm {border-bottom: 1px dashed #e7debf;}
 #yaquery {border: none !important; }
 #YaSearch A {display:none;}
 #YaSearchForm .submit {background: url('ПОИСК') no-repeat; width:45px; height:9px; border:none !important; position:relative; right: 1px; line-height:0px; font-size:0px; color:transparent; top: 3px;}
 #yaquery { border:none!important; background: # !important;}
 #Stats a {background: url('СТАТ') no-repeat; width:147px; height:12px; position: absolute; left: 80px; line-height:0px; font-size:0px; color:transparent; top: 15px; z-index: 55; }
 #iAmQuit a {background: url('ВЫХОД') no-repeat; width:147px; height:12px; position: absolute; left: -215px; line-height:0px; font-size:0px; color:transparent; top: 12px; z-index: 55; }
 #more_login {display: none !important;}
 #login_change {position: relative; left: -300px;}
 #thisDiaryPhoto {display: none !important;}
 #authorName {position: absolute; left: -200px; top: 35px; font-size: 22px !important; text-shadow: 1px 2px 0px #8f836c, 1px 2px 0px #f4e9cc;}
 #side h1 {position:absolute; top:44px; right:-270px; margin-top:10px !important;}
 #side h1 a { font-size: 18px !important; text-transform: uppercase; text-shadow: 1px 2px 0px #8f836c, 1px 2px 0px #f4e9cc;}
 {------------------}
 #thisDiaryOwner {position:absolute; top:-72px; left:100px;}
 #myDiaryLinks {position:absolute; top:-72px; left:220px; }
 #globalLinks {position:absolute; top:-75px; left:370px;}
 #thisCommunity, #myCommunity, #thisCommunityMember {position:absolute; top:-72px; left:-10px; }
 #thisDiaryLinks {position:absolute; top:-72px; left:-10px; }
 #thisDiaryOwner_title {background-image:url('МЕНЮ1'); width:104px; height:45px; }
 #thisDiaryOwner_title b {display:none !important}
 #myDiaryLinks_title {background-image:url('МЕНЮ2'); width:140px; height:44px; }
 #myDiaryLinks_title b {display:none !important}
 #globalLinks_title {background-image:url('МЕНЮ3'); width:117px; height:48px; }
 #globalLinks_title b {display:none !important}
 #thisDiaryLinks_title {background-image:url('МЕНЮ4'); width:99px; height:44px;}
 #thisDiaryLinks_title b {display:none !important}
 #thisCommunity_title {background-image:url('МЕНЮ4'); width:99px; height:44px;}
 #thisCommunity_title b {display:none !important}
 #myCommunity_title {background-image:url('МЕНЮ4'); width:99px; height:44px;}
 #myCommunity_title b {display:none !important}
 #thisCommunityMember_title {background-image:url('МЕНЮ4'); width:99px; height:44px;}
 #thisCommunityMember_title b {display:none !important}
 #thisDiaryOwner ul {background-image: url('ФОНМЕНЮ'); background-repeat: no-repeat; position:absolute; top:42px; left: -40px; width:450px; height:150px !important; text-align:center !important; text-transform: lowercase;}
 #thisDiaryLinks ul {background-image: url('ФОНМЕНЮ'); background-repeat: no-repeat; position:absolute; top:42px; left: 60px; width:450px; height:150px !important; text-align:center !important; text-transform: lowercase;}
 #thisCommunity ul {background-image: url('ФОНМЕНЮ'); background-repeat: no-repeat; position:absolute; top:42px; left: -160px; width:450px; height:150px !important; text-align:center !important; text-transform: lowercase;}
 #myCommunity ul {background-image: url('ФОНМЕНЮ'); background-repeat: no-repeat; position:absolute; top:42px; left: -160px; width:450px; height:150px !important; text-align:center !important; text-transform: lowercase;}
 #thisCommunityMember ul {background-image: url('ФОНМЕНЮ'); background-repeat: no-repeat; position:absolute; top:40px; left: -160px; width:450px; height:150px !important; text-align:center !important; text-transform: lowercase;}
 #myDiaryLinks ul li {width:510px; }
 #myCommunity ul li {width:510px; }
 #myDiaryLinks ul {background-image: url('ФОНМЕНЮ'); background-repeat: no-repeat; position:absolute; top:41px; left: -160px; width:450px; height:150px !important; text-align:center !important; text-transform: lowercase;}
 #globalLinks ul {background-image: url('ФОНМЕНЮ'); background-repeat: no-repeat; position:absolute; top:43px; left: -310px; width:450px; height:150px !important; text-align:center !important; text-transform: lowercase;}
 #myLinks ul {background-image: url('ФОНМЕНЮ'); background-repeat: no-repeat; position:absolute; top:43px; left: -440px; width:450px; height:150px !important; text-align:center !important; text-transform: lowercase;; text-transform: lowercase;}
 #myLinks_title {display:block; width:104px; height:43px; line-height:500px; overflow:hidden; background: url('МЕНЮ5') 2px 4px no-repeat;}
 #myLinks {position:absolute; top: -75px;left: 500px;}
 #myDiaryLink, #writeThisDiary, #myDraftLink, #umailLink {position:relative; top:9px; left:-60px;}
 #myQuotLink, #discussionLink, #optionsLink, #myFavLink {position:relative; top:-65px; left:40px;}
 #photolibLink,#myNotepadLink, #myLinksLink, #myProfileLink, #albumLink {display:none !important;}
 #allDiaryLink, #mainpageLink, #favListLink, #pchListLink {position:relative; top:5px; left:-70px;}
 #randomDiaryLink, #myCommunitiesLink, #diarySpiritLink, #diarySupportLink {position:relative; top:-65px; left:70px;}
 #faqLink, #myCommunityLink, #communityCatalogueLink {display:none !important;}
 .atTag em {text-decoration: none !important; text-transform: lowercase !important; font-style: normal !important;font-size: 12px !important;}
 .atMusic em {text-decoration: none !important; text-transform: lowercase !important; font-style: normal !important;font-size: 12px !important;}
 .atMood em {text-decoration: none !important; text-transform: lowercase !important; font-style: normal !important;font-size: 12px !important;}
 A:HOVER{ color:#801500 !important; text-decoration: none; text-shadow: 1px 2px 0px #f4e9cc, 1px 2px 0px #f4e9cc;}
 a {text-decoration: none !important; }
 span.quote_text {border-top: 1px dashed #816a3a; border-bottom: 1px dashed #816a3a; display: inline-block; font-style:italic; margin-top: 12px; padding: 5px; margin-bottom: 10px; color: #816a3a; text-shadow: 1px 2px 0px #f4e9cc, 1px 2px 0px #f4e9cc;}
 #login_form_title b { color:#afa288 !important; text-transform: uppercase; font-size: 11px !important;}
 #login_form {position: absolute; left: -180px;}
 #cc {border: 1px dashed #2e1808; padding: 4px; background: #f4e9cc!important; color: #2e1808 !important;}
 #cc {margin-top: -170px !important; margin-left: -40px !important;}
 #postsArea .avatar img { max-width: 100px !important; border: 1px dashed #2e1808; padding: 4px;}
 #postsArea .avatar img {-moz-opacity:.30 !important;opacity:.30 !important; filter:alpha(opacity=60);}
 #postsArea .avatar img:hover {-moz-opacity:1.0 !important; opacity:1.0 !important; filter:alpha(opacity=100);}
 #commentsArea .avatar img { max-width: 100px !important; border: 1px dashed #2e1808; padding: 4px;}
 #commentsArea .avatar img {-moz-opacity:.30 !important;opacity:.30 !important; filter:alpha(opacity=60);}
 #commentsArea .avatar img:hover {-moz-opacity:1.0 !important; opacity:1.0 !important; filter:alpha(opacity=100);} 

Дизайн блочный, навигационная панель вверху.
Настройки шрифта: Arial, заголовка жирный 16, текста обычный 15;
Настройки цвета текста: заголовка #4a1914, ссылки #2e1808, текста #000700, оффтоп #8c7f68;
Остальное не трогаем, все прописано кодом.
Дизайн проверен на Mozilla Firefox, Opera, Chrome, Safari. минимальное разрешение экрана 1024х768.

Comments

спасибо

[Shiori-team]

спасибо))

если разберусь в настройках установлю)

[Eilianta]

не за что)))

summerfanfiction
Вопросы в умылко можно задавать)))))

[Shiori-team]

Itory, ок)

Itory очень понравился, стащил)

[Eilianta]

.Thomas. замените "статистику" текстовой ссылкой)

Itory эээ... я не знаю как

[Eilianta]

.Thomas. в настройках есть строчка "Счетчик статистики, баннеры"
Там нужно поставить галочку на "текстовая ссылка"

готово)

[Lilymoor]

Взяла себе,спасибо

[Таэрин]

Дизвйн красивый, вопрос дурацкий. Почему при попытке вставить картинку строка заменяется автоматом на:

 body {background: #;}

Если у всех получилось, то где у меня ошибка в синтаксисе....

[Jerwinel]

Замечательный дизайн! Взяла себе, спасибо!

[Eilianta]

Таэрин
Вероятно, вы неправильно вставили ссылку на картинку. Покажите мне, как вы вставляете.

[Таэрин]

Itory Да вот не хочу показаться идиоткой, так как еще год назад сайты на цсс клепала. А тут чего-то...

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

 body {background: url('http://img220.imageshack.us/img220/7806/81893385.png');}
и так
 body {background: url('//img220.imageshack.us/img220/7806/81893385.png');}
и так =)
 body {background: url('img220.imageshack.us/img220/7806/81893385.png');}

Туплю не могу ((( Или они все долнжны лежать в библиотеке изображений на дайри?

[Eilianta]

Таэрин
Во-первых, да, изображения должны лежать в вашей БИ.
Во-вторых, изображение нужно вставлять вот так:

 body {background: url('/userdir/1/4/2/6/1426569/thumb/63648989.png');}

[Таэрин]

Itory так я уже тоже попробовала... не выходит. Какой-то глюк.

[Eilianta]

Таэрин будьте внимательнее, такие проблемы обычно бывают по невнимательности пользователя.
Код точно работает)
Вы изображения вставляете из БИ?
Именно в таком виде, в котором я показала? Проверьте, чтобы каждый значок был таким же (разумеется, ссылка будет на другие файлы =)

[Таэрин]

Itory Нет, у мена каждый "значек" такой же. ))) Потмоу, что до этого все другие дизайны работали прекрасно. И чужие и те которые я сама делала.
В общем извините, мне уже просто влом искать причину так что фиг с ним.

[Eilianta]

Таэрин
Ну смотрите)

[Kahel]

Прекрасный фон! С удовольствием поставила, но есть две проблемы:
1. в шапке Поиска нет, хотя картинку дважды проверила, и список ПЧ веси посередине:


Часть кода с поиском, если я правильно поняла, выглядит так

#YaSearch {padding:0!important; margin:0!important;border:none!important; position: absolute; top: 50px; margin-top: 30px; margin-left: 5px; left: -225px; color: #e7debf; text-transform: uppercase; background: # !important; width: 150px !important;}
 #YaSearch_title b {color: #e7debf; text-transform: uppercase; background: # !important;}
 #YaSearchForm {border-bottom: 1px dashed #e7debf;}
 #yaquery {border: none !important; }
 #YaSearch A {display:none;}
 #YaSearchForm .submit {background: url('/userdir/4/0/4/0/404032/64532636.png') no-repeat; width:45px; height:9px; border:none !important; position:relative; right: 1px; line-height:0px; font-size:0px; color:transparent; top: 3px;}

2. В Избранном время находит на заголовок поста, хотя в своем дневнике такого нет:
и

Где что поправить?

[Eilianta]

Kahel оу, у меня было все в норме.
Какое у вас разрешение экрана,ж может с этим косяк?

[Таэрин]

У меня то же самое было. Только без картинок, которые не вставились. )

[Kahel]

1280х800 вроде))
поиска, возможно нет, потому что он у меня везде где можно отключен, а вот все остальное непонятно

[Таэрин]

У меня 1440 х 900... если это пригодится.

[Eilianta]

Таэрин Kahel
На больших разрешениях тестилось, отображалось не так, как на скрине немного за счет динамичности боковых дополнительных блоков, но вполне нормально.
Но картинки должны отображаться независимо от разрешения, как и поиск, максимум, что-то сдвинется из-за неточности процентов =)
Вот честно, я этот дизайн протестировала максимально((

Вот, еще. Какие у вас браузеры? В ИЕ вполне может все косить, я в него даже не заходила при тесте. В опере часто дизайны глючат и хроме иногда) Но это хотя бы исправить недолго)

[Kahel]

оперой проверила и хромом, и на экране 1280х1024 - результат один. У ПЧ моей в хроме вообще шапка поехала, но тут главное, что не у меня

А вот куда девается картинка времени в избранном, мне до сих пор не понятно

[Eilianta]

Kahel вероятно, я забыла указать где-то в коде это О__о"
Найдем все не переживайте)))

[Leda Rius]

проблема с отсутствием Поиска (аналогично Kahel ) + некликабелен счетчик комментариев в дневнике и невозможно изменить эпиграф (приходится менять его через замену дизайна. (

У меня Mozilla Firefox.

[SCatherine]

БЕРУ!

[Falkyr]

И я беру)))
Спасибо)