№692. Steampunk

[Eilianta]

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

Название: "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:456px;}
 #postsArea { position:relative; left:20px; width:710px !important; margin-top:35px; 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: 15px; width:690px !important; }
 #post0 {position: relative; left: 0px; !important; width:730px !important; background: url('ФОН ПОСТОВ 2') !important; }
 .postContent {position: relative; left: 5px; }
 #epigraph { background: url('ЭПИГРАФ') !important; border: none !important;}
  #JournalComments .paragraph {position: relative; left: 5px; width: 570px !important; }
#JournalDraft .paragraph {position: relative; left: 5px; width: 570px !important; }
#JournalFavorite .paragraph {position: relative; left: 5px; width: 570px !important; }
#JournalAlbum .paragraph {position: relative; left: 5px; width: 570px !important; }
#JournalCalendar .paragraph {position: relative; left: 5px; width: 570px !important; }
#JournalLinks .paragraph {position: relative; left: 5px; width: 570px !important; }
 #extratop { background: url('ЭКСТРАТОП'); height:532px; position:absolute; left:0; margin-left:0px; top:0px; width:800px; z-index:3; }
 #extrabottom { background:url('ЭКСТРАБОТТОМ') no-repeat; height: 126px; width: 800px; position:relative; left:0px; bottom:0px; margin-top:0px; }
 .postLinksBackg {background:url('РАЗДЕЛИТЕЛЬ') no-repeat; height:29px; background-position: center !important; position:relative; left:0; margin-left:-20px; top:20px }
 .postLinks {margin-right:0px; line-height:0pt;}
 .postLinks a {color:#35100b;}
 .header {background-image:url('ЗАГОЛОВОК'); background-repeat:no-repeat; background-position:top !important; height: 60px; width: 720px; 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:320px;}
 #side h1 {position:absolute; text-align: left !important; font: 21px Arial Black !important; margin-left: -38px !important; margin-top: 100px !important; width:320px;}
 #thisDiaryPhoto {position:absolute; margin-left: -43px !important; margin-top: -22px !important; width:100px;}
 #side {position: relative; top: 300px !important; width: 720px; height:150px; 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:100px; text-align: left;}
 .menuSection { margin-left: -15px !important; width:125px; 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:125px; background: # !important; position:absolute;}
 #globalLinks { margin-left: 480px !important; margin-top: -27px !important; width:175px; background: # !important; text-align: right !important; position:absolute;}
 #Stats { margin-left: 480px !important; margin-top: 30px !important; width:175px; background: # !important; text-align: right !important; position:absolute;}
 #thisDiaryOwner { margin-left: 480px !important; margin-top: 65px !important; width:175px; 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:125px; background: # !important; position:absolute;}
 #wrapper{min-width:800px!important;width:800px;margin: 0 auto !important;padding:0 !important;overflow:hidden !important; position:absolute; top:-10px; left:0px;}
 .prevnext {background:none !important;}
 #page-c{width:800px !important; padding:0 !important;padding:0 !important; position:relative; }
 #page-t {margin:0 !important; width:800px;}
 #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: 110px; width: 110px;}
 #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:21px; width:732px !important; margin-top:35px; overflow:hidden !important}

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

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

Comments

[dead_mockingbird]

ГуглХроме

у меня в нем меню едет. грустный смайл.
и это скорее всего из-за #side {position:absolute; }

[Eilianta]

Исправлено.

[Deimos Hino+Kou]

Диз интересный, только на моем 23" справа появляется очень некрасивая белая полоса там, где заканчиваются обои)

[Scarlet]

Красота, жалко у меня бесплатный((

Здорово Взяла поносить )

[Una Sheffield]

какооооой стиииильный*_*

[-tdutybz-]

Жесть (в хорошем смысле этого слова), утянула к себе. Спасибо!
А можно сделать шрифт чуть меньше? У меня просто огромный монитор, некрасиво смотрится.

[Eilianta]

Deimos Hino+Kou
Спасибо

права появляется очень некрасивая белая полоса

Подправила код, там не сработала заливка цветом, простите.

|Dark horse cornelia~heil Jarmila Krishtof -tdutybz-
Спасибо)
Я забыла аватар загрузить, кто взял дизайн - учтите)

А можно сделать шрифт чуть меньше? У меня просто огромный монитор, некрасиво смотрится.

Шрифт текста или шрифт в меню-нике-названии?
Если можете сами - меняйте, как вам удобно.

|Dark horse

жалко у меня бесплатный((

Я могу сделать вариант для бесплатного, если хотите)

[Scarlet]

Я могу сделать вариант для бесплатного, если хотите)

ой, буду очень благодарна если сделаете)

[Eilianta]

|Dark horse Хорошо, будет в ближайшее время))

[Eilianta]

cornelia~heil Вы не ту картинку вставили в этом месте .postLinksBackg, вместо экстаботтома нужно разделитель.

[-tdutybz-]

Шрифт текста или шрифт в меню-нике-названии? Если можете сами - меняйте, как вам удобно.

Шрифт текста. Уже поменяла, спасибо)))

[Eilianta]

-tdutybz- Не за что, носите с удовольствием)

Itory, спасибо сейчас исправим ). Вопрос по поводу комментариев, я просто что-то в коде не доставила или у них фон не как у сообщений Видно просто очень плохо...

[Eilianta]

cornelia~heil Вы не прописали фон комментов)
Вот строчка
#commentsArea, #addCommentArea {margin: 0 10px 30px 0 !important; background: #; width:710px !important; border:3px solid #260707 !important; position:relative; left:29px !important; }

Фон нужно поставить тот же, что и у .singlePost
то есть
background: url('/userdir/1/3/4/9/1349025/58411907.png');

Itory, спасибо, теперь вроде всё )

[Eilianta]

cornelia~heil Ну вот и замечательно) Что еще заметите, - пишите)

[*Toria*]

Красивый дизайн!

[Eilianta]

*Toria* спасибо))))

[Annie Kahn]

Прекрасный дизайн! И даже коричневый меня не раздражает!

[-Королева Марго-]

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

[Eilianta]

-Королева Марго- Можно конечно. Сами сможете, ваш днев закрыт, поэтому я не могу посмотреть?

Annie Kahn Спасибо)

Спасибо огромное)))
Единственное, что не нравится ( но тут возможно мой браузер барахлит, так что заранее извиняюсь) это фон под записью( когда цитировала у себя в днев что-то - она голубая() скажите, как исправить?
В остальном - снимаю шляпу)))

[Eilianta]

.AnJey оййй, это мой косяк, переписывала заново код, забыла убрать((

вот эту строку уберите
.blockquote {font-family:Trebuchet MS; font-size:13px; font-style:normal;background:#a9e3e8; padding-right:15px; padding-top:10px; }

Itory

Спасибо)))))))))))))))

[adrasteya]

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

[Eilianta]

.AnJey
Не за что)))

adrasteya
Я лично только за, сама влюблена в этот дизайн)

[-Королева Марго-]

Itory У меня вот так, скажите где поправить.

[Eilianta]

-Королева Марго- В следующий раз делайте скрин в jpg, прошу вас))

Вот эту строчку надо изменить
#authorName {position:absolute; text-align: right !important; font: 25px Arial Black !important; margin-left: -43px !important; margin-top: -10px !important; width:320px;}

font: 25px - уменьшите число, пока не встанет нормально)

[Maugin.]

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