[HidMockingbirdinc]

01.08.2010 в 02:59

Пишет  Itory:

№692. Steampunk
Давно задумала этот дизайн, все никак не давался он мне... в итоге, вот что получилось)
Посмотреть "в действии" пока что можно у меня в дневнике)
Не претендую на полное соответствие, это всего лишь стилизация под стимпанк)

Название: "Steampunk"

Скрин:

Смотрим?

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

Что нам нужно?
ФОН
static.diary.ru/userdir/1/8/7/1/1871356/5831224...
ФОН ПОСТОВ
static.diary.ru/userdir/1/8/7/1/1871356/5831226...
ФОН ПОСТОВ 2
static.diary.ru/userdir/1/8/7/1/1871356/5831228...
ЭПИГРАФ (внимательнее, там небольшая прозрачная пнг картинка, ее не видно, но она есть)
static.diary.ru/userdir/1/8/7/1/1871356/5831229...
ЭКСТРАТОП
static.diary.ru/userdir/1/8/7/1/1871356/5831234...
ЭКСТРАБОТТОМ
static.diary.ru/userdir/1/8/7/1/1871356/5831235...
РАЗДЕЛИТЕЛЬ
static.diary.ru/userdir/1/8/7/1/1871356/5831238...
ЗАГОЛОВОК
static.diary.ru/userdir/1/8/7/1/1871356/5831239...
АВАТАР
static.diary.ru/userdir/1/4/2/6/1426569/5830857...

(с радикала)
ФОН
s47.radikal.ru/i118/1008/80/41a0c1564013.jpg
ФОН ПОСТОВ
s005.radikal.ru/i209/1008/6a/023c5daa918a.png
ФОН ПОСТОВ 2
s46.radikal.ru/i113/1008/c3/eb4160523ea7.png
ЭПИГРАФ (внимательнее, там небольшая прозрачная пнг картинка, ее не видно, но она есть)
s46.radikal.ru/i112/1008/2e/2315856df985.png
ЭКСТРАТОП
s58.radikal.ru/i161/1008/11/bb78d32d9b41.png
ЭКСТРАБОТТОМ
s56.radikal.ru/i152/1008/90/90822b6f741b.png
РАЗДЕЛИТЕЛЬ
s42.radikal.ru/i096/1008/79/e7988cb50bb8.png
ЗАГОЛОВОК
s04.radikal.ru/i177/1008/4e/1abcc9bc3d5a.png
АВАТАР
s45.radikal.ru/i110/1008/d4/f72cbb4195a4.png

Код:

  body {background: #040302 url('/userdir/1/4/2/6/1426569/58282805.jpg'); background-attachment: fixed; background-repeat: no-repeat; }
 #page-c {background: url('ФОН ПОСТОВ'); padding-bottom:3px !important; position:relative; z-index:1; margin-top:456}
 #postsArea { position:relative; left:20 width:710px !important; margin-top:35 overflow:hidden !important; }
 .singlePost {margin: 0 10px 30px 0 !important; background: url('ФОН ПОСТОВ 2'); width:730px !important; border:3px solid #260707 !important;}
 #commentsArea, #addCommentArea {margin: 0 10px 30px 0 !important; background: url('ФОН ПОСТОВ 2'); width:710px !important; border:3px solid #260707 !important; position:relative; left:29px !important; }
 .paragraph {position: relative; left: 15 width:690px !important; }
 #post0 {position: relative; left: 0 !important; width:730px !important; background: url('ФОН ПОСТОВ 2') !important; }
 .postContent {position: relative; left: 5 }
 #epigraph { background: url('ЭПИГРАФ') !important; border: none !important;}
  #JournalComments .paragraph {position: relative; left: 5 width: 570px !important; }
#JournalDraft .paragraph {position: relative; left: 5 width: 570px !important; }
#JournalFavorite .paragraph {position: relative; left: 5 width: 570px !important; }
#JournalAlbum .paragraph {position: relative; left: 5 width: 570px !important; }
#JournalCalendar .paragraph {position: relative; left: 5 width: 570px !important; }
#JournalLinks .paragraph {position: relative; left: 5 width: 570px !important; }
 #extratop { background: url('ЭКСТРАТОП'); height:532 position:absolute; left:0; margin-left:0 top:0 width:800 z-index:3; }
 #extrabottom { background:url('ЭКСТРАБОТТОМ') no-repeat; height: 126 width: 800 position:relative; left:0 bottom:0 margin-top:0 }
 .postLinksBackg {background:url('РАЗДЕЛИТЕЛЬ') no-repeat; height:29 background-position: center !important; position:relative; left:0; margin-left:-20 top:20px }
 .postLinks {margin-right:0 line-height:0pt;}
 .postLinks a {color:#35100b;}
 .header {background-image:url('ЗАГОЛОВОК'); background-repeat:no-repeat; background-position:top !important; height: 60 width: 720 text-align: center;}
 .postDate {background-image:#; text-align: right !important;}
  #authorName {position:absolute; text-align: right !important; font: 25px Arial Black !important; margin-left: -43px !important; margin-top: -10px !important; width:320}
 #side h1 {position:absolute; text-align: left !important; font: 21px Arial Black !important; margin-left: -38px !important; margin-top: 100px !important; width:320}
 #thisDiaryPhoto {position:absolute; margin-left: -43px !important; margin-top: -22px !important; width:100}
 #side {position: relative; top: 300px !important; width: 720 height:150 text-transform: uppercase; padding-bottom: 0px !important; margin-left: -528px !important; font: 12px Arial Black !important; z-index:10; background: # !important; }
 #side a {color: #260707 !important;}
 #thisDiaryInfo { margin-left: -20px !important; width:100 text-align: left;}
 .menuSection { margin-left: -15px !important; width:125 background: # !important; }
 #favListLink, #pchListLink, #myNotepadLink, #upInChart, #usrlog, #usrpass, #YaSearch, #albumLink, .order_button, #authorQuot, #tagslistlink, #postsCalendar {display: none !important; }
 #thisDiaryLinks {display: none !important; }
 #myDiaryLinks { margin-left: 338px !important; margin-top: -25px !important; width:125 background: # !important; position:absolute;}
 #globalLinks { margin-left: 480px !important; margin-top: -27px !important; width:175 background: # !important; text-align: right !important; position:absolute;}
 #Stats { margin-left: 480px !important; margin-top: 30px !important; width:175 background: # !important; text-align: right !important; position:absolute;}
 #thisDiaryOwner { margin-left: 480px !important; margin-top: 65px !important; width:175 background: # !important; text-align: right !important; position:absolute;}
 #myCommunitiesLink {display: none !important; }
 #myProfileLink {display: none !important; }
 #photolibLink {display: none !important; }
 #YaSearch {display: none !important; }
 #myLinks {display: none !important; }
 #pchs {display: none !important; }
 #lastComments {display: none !important; }
 #iAmQuit {display: none !important; }
 #login_form { margin-left: 338px !important; margin-top: -25px !important; width:125 background: # !important; position:absolute;}
 #wrapper{min-width:800px!important;width:800margin: 0 auto !important;padding:0 !important;overflow:hidden !important; position:absolute; top:-10 left:0}
 .prevnext {background:none !important;}
 #page-c{width:800px !important; padding:0 !important;padding:0 !important; position:relative; }
 #page-t {margin:0 !important; width:800}
 #albumLink, #rssLink, .urlLink, #postsCalendar, #myLinksLink, #upInChart, #communityCatalogueLink {display:none;}
 #lastComments {display:none !important;}
 #ChebraCounter, .menuSection_title {display:none !important;}
 #randomDiaryLink, #paySupportLink, #tagslistlink, #faqLink, #diarySpiritLink, #myNotepadLink, #diarySupportLink {display:none;}
 #favGroups, #subscribeEmail, #delFromFav, #topNav, #YaSearch, #draftrestore_link, #draft_title {display:none;}
 .postTitle h2{letter-spacing:1pt;}
 .postDate, .uline {font-size:11px !important; color:#611b00 !important; }
 #commentsArea .paragraph div {text-indent: 0px !important;}
 #postsArea .avatar img { height: 110 width: 110}
 #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);}
 #postsArea {position:relative; left:21 width:732px !important; margin-top:35 overflow:hidden !important}

Дизайн блочный, навигационная панель справа.
Настройки шрифта: Book Antiqua, заголовка жирный 18, текста обычный 17;
Настройки цвета текста: заголовка и ссылки #461900, текста #260707, оффтоп #5f3c29;
Остальное не трогаем, все прописано кодом.
Дизайн проверен на FF версии 3.6.6, Опере в 9 и выше версиях, ГуглХроме. В ИЕ может глючить.

Все исходники взяты из набора тематического клипарта Steampunk. Найден в сети)