Дизайн #2 "Шерлок. Джон. Смайлик"

[Yuki MD]

В честь премьеры, так сказать, вот такой подарок общественности с платными дневниками))
Надеюсь, что кому-то пригодится.
Предупреждение: автор новичок в области css, набирается опыта путем производства дизайнов. Так же я делаю дизы для бесплатников. Так что обращайтесь, заказывайте. Это можно сделать тут или написать мне на у-мыл.

Собственно, дизайн.

Кликабельно

Настройки

Настройки
Текст: обычный 14пт Arial
Цвет заголовка: #080808
Цвет ссылки: #0b0b0b
Цвет записи: #050505
Оффтопик:#999
Цвет фона, границ и фоновую картинку оставляем пустыми.

ФОН_ДНЕВНИКА

ЭКСТРАБОТТОМ

ЭКСТРАТОП


код:

body { background-attachment: fixed; background-image: url('ФОН_ДНЕВНИКА'); background-repeat: repeat; }
 #extratop { background-image: url('ЭКСТРАТОП'); background-repeat: no-repeat; height: 454px; width: 970px; margin-left:10px !important;}
 #page-t { background-color: #e9e4dc; width: 950px; margin-left: 10px !important; padding: 10px !important; }
 .postDate {color:#2f0202; font-size: 17px; font-weight: bold;}
 .header span {color:#2f0202; font-size: 17px; font-weight: bold;}
 .header h2 {color:#2f0202; font-size: 17px; font-weight: bold;}
 #authorName {font-size:25px !important; text-align: center;}
 #side h1 { font-size:25px !important; font-color: #ffffff !important; border-radius: 5px; background: #efe7e2; text-align: center; top: 370px; right: -600px; position: absolute;}
 #side {position: absolute; top: 50px; left: 30px; width: 200px; text-align: center; background: #efe7e2; border-radius: 20px; font-size: 16px;}
 #side { filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
 #globalLinks, #upInChart, #myProfileLink, #myLinks, #photolibLink, #myLinksLink, #Stats, #rssLink, #authorRSS, #authorAlbum {display: none;}
 #extrabottom {background: url('ЭКСТРАБОТТОМ') no-repeat; width:980px; height:69px; }

Если кто держит список ПЧ открытым - закрывайте, он не влезет. Так же придется убрать аватар около имени.

Берем - отписываемся Вопросы задаем! Если есть ошибки, говорим, я ж еще учусь)

Так же, если кто-то хочет поменять эту картинку на любую другую - готов поменять при наличии исходника, у которого будет место для меню слева

УПД!!!

Теперь у этого диза есть его динамический брат-близнец. Если у вас другое разрешение экрана и вы печалитесь внезапными полосками фона справа, то это для вас!

Обращаю ваше внимание на то, что из прошлых настроек остаются все, кроме Экстратопа и Экстработтома.

Настройки

ЭКСТРАТОП2
static.diary.ru/userdir/1/3/6/9/1369578/7299202...
ЭКСТРАБОТТОМ2
static.diary.ru/userdir/1/3/6/9/1369578/7299205...

код:

body { background-attachment: fixed; background-image: url('ФОН_ДНЕВНИКА'); background-repeat: repeat; }
 #wrapper{position:relative !important;margin: 0 auto 10 !important; display:block; overflow:visible;}
 #extratop { background-image: url('ЭКСТРАТОП2'); background-repeat: repeat; height: 454px; width: 97%; margin-left:10px !important; position:relative; display:block; overflow:visible; margin-right:10px !important;}
 #page-t { background-color: #e9e4dc; width:95%; margin-left: 10px !important; padding: 10px !important; position:relative; margin-right:10px !important; }
 .postDate {color:#2f0202; font-size: 17px; font-weight: bold; }
 .header span {color:#2f0202; font-size: 17px; font-weight: bold;}
 .header h2 {color:#2f0202; font-size: 17px; font-weight: bold;}
 #authorName {font-size:25px !important; text-align: center;}
 #side h1 { font-size:25px !important; font-color: #ffffff !important; border-radius: 5px; background: #efe7e2; text-align: center; top: 370px; right: -600px; position: absolute;}
 #side {position: absolute; top: 25px; left: 30px; width: 200px; text-align: center; background: #efe7e2; border-radius: 20px; font-size: 16px;}
 #side { filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
 #globalLinks, #upInChart, #myProfileLink, #myLinks, #photolibLink, #myLinksLink, #Stats, #rssLink, #authorRSS, #authorAlbum {display: none;}
 #extrabottom {background: url('ЭКСТРАБОТТОМ2') repeat; width:97%; height:69px; margin-left: 10px !important; margin-right:10px !important; position:relative !important;}

@темы: Sherlock, Внезапно!, Дизайн

Comments

[sKarEd]

*пачка сердечек*

[Yuki MD]

sKarEd, ура)) *радуется*

[sKarEd]

Yuki MD, А можно динамический, нэ?

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

[Yuki MD]

sKarEd,

А можно динамический, нэ?

Ни разу их не делал, пойду погуглю...

скажи народу, чтобы удаляли фото и скрывали список пч, не то дизайн уедет

ок)

[sKarEd]

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

[Yuki MD]

sKarEd,
Да, он тоже у меня так выглядит, если чуть-чуть масштаб сделать поменьше в браузере.
Я вот честно пытаюсь, но эстратоп не хочет быть динамическим пока...

[sKarEd]

Yuki MD, посмотри по кодам вот тут dizain-by-shokolad.diary.ru/?tag=31711
Я вообще дуб, но насколько поняла, надо в экстратопе кусок с обоями сделать повторяющийся, чтобы было куда растягиваться..
типа как фон или заливка, прописанные в коде..
ничо я тут?

[Yuki MD]

адо в экстратопе кусок с обоями сделать повторяющийся

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

посмотри по кодам вот тут

Я там ночую уже была Х)Х)

ничо я тут?

Очень даже хорошо!

[sKarEd]

Yuki MD, ну смотри, вариантов в принципе немного
1. отцентровать и оставить как есть - остальное займет фон, стандартно как у тебя на бложике
2. то же самое, только края размыть - сделать переход в фон мягким и плавным..
а я пошел искать диз с тем самым "порванным топом"

[sKarEd]

Yuki MD, во, нашел dizain-by-shokolad.diary.ru/p116033645.htm
правда тут менюха слева вся...
просто я фоточки кладу, мне хочется чтоб дизайн не сжимал рамки((

[Золотая Хатор]

Yuki MD, потрясающе!
спасибо

[Yuki MD]

sKarEd,
Да, я видела его. У него картинка дублируется чтоль?

Золотая Хатор, Носите на здоровье))

[sKarEd]

Yuki MD, у него два куска от картинки "правый край" и "левый край" отдельно и между ними экстратоп - так в настройках написано, по крайней мере
вообще, насколько я поняла, все обычно стаскивают картинку в один угол и потихоньку уводят ее в одноцветный повторяющийся фон.
Но вы не заморачивайтесь, если напряжно)*это я на вашу аватару посмотрел*

[Yuki MD]

Но вы не заморачивайтесь, если напряжно)*это я на вашу аватару посмотрел*

Я их не ставлю, они сами

Ща еще кое-что попробую, если не получится, то уже завтра буду думать))

[sKarEd]

Yuki MD, вот прям щас у меня на вашем дневе этот дизайн аняня, только топа и боттома справа не хва сантиметра-двух)

[Yuki MD]

АААААА!!! Я кажется это сделал

[sKarEd]

Yuki MD, аееееее!
код можно?)

[Yuki MD]

sKarEd, Точно все четко? Покрутите там в районе Масштаба в Опере. Картинка дублируется?

[sKarEd]

Yuki MD, ага)) помойму симпатишно) Только плашку меню повыше чутка отпозиционировать можно, а то съехало((
или шрифт поменьше, я хз..

[Yuki MD]

Так? Или еще выше?

[sKarEd]

Yuki MD, щас вот так думаю, можно еще чутка выше.

[Yuki MD]

sKarEd,
у вас в дневнике оно будет не по центру совсем. за счет левых ссылок в чужом дневнике оно длиннее. поднимать?)

[Yuki MD]

[sKarEd]

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

[Yuki MD]

sKarEd,
да не вопрос))

[Yuki MD]

ну что, так и оставляем? Если да, то выкладываю код

[sKarEd]

Yuki MD, Ееееее! Да!

[Yuki MD]

sKarEd,
выложил))

[sKarEd]

Yuki MD, спасиибо! *теперь надо потереть все наши коммы)*

[Yuki MD]

спасиибо!

Носите на здоровье))

*теперь надо потереть все наши коммы)*

А смысл? их вряд ли кто-то читать будет пусть висят)