#707 Кровь с молоком

[polishastik]

Да-да, это я *пропажа*
ЦСС для всех))) Надеюсь понравится.

комментс а

Скрин


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

Примерить

-------------------------------------------------------------------------------------------------------------------------
Дизайн доступен в Каталоге оформлений с АВТОМАТИЧЕСКОЙ УСТАНОВКОЙ - тут
-------------------------------------------------------------------------------------------------------------------------

Настройки

Изображения
экстратоп static.diary.ru/userdir/1/4/7/5/1475866/5849869...
экстработ static.diary.ru/userdir/1/4/7/5/1475866/5849872...
меню static.diary.ru/userdir/1/4/7/5/1475866/5849870...
картинка 1 static.diary.ru/userdir/1/4/7/5/1475866/5849871...
картинка 2 static.diary.ru/userdir/1/4/7/5/1475866/5849871...

Код

body {background: #eeeeee; padding: 0px !important;font-family:Georgia,Helvetica,sans-serif; font-size:14px !important; width:100%; height:100%;}
 #wrapper{width:900px;min-width:0; margin: 0 auto 10 !important;padding:0px !important; position:relative !important;}
 #extratop {background: url('ЭКСТРАТОП') no-repeat !important; height:478px; width:900px;}
 #extrabottom {background: url('ЭКСТРАБОТ') 0 0 no-repeat; height:40px;width:900px;}
 #page-c {width:900px !important; padding:0 !important;padding:0 !important; padding:0px !important; padding-bottom:20px !important;}
 #page-t { margin:0 !important;}
 #side {position:absolute; top:20px; width:880px !important;}
 #postsArea, #commentsArea {width:900px; padding:0;}
 #postsArea .singlePost{background:#fff; border:1px solid #cdcdcd !important; margin-top:30px !important; padding:10px !important; }
 .singleComment{background:#fff; border:1px solid #cdcdcd !important; margin-bottom:30px !important; padding:10px !important; }
 #addCommentArea {background:#fff; border:1px solid #cdcdcd !important; margin-top:35px !important; padding:10px !important; }
 #Journal #postsArea .paragraph {width:730px; background:#fff; padding-right:10px; padding-top:40px; padding-bottom:30px; min-height:92px !important;}
 #Journal #postsArea .postContent {background: #eeeeee; }
 #Journal #postsArea .countFirst .postInner {background: url('КАРТИНКА1') 749px 9px no-repeat;}
 #Journal #postsArea .countSecond .postInner {background: url('КАРТИНКА2') 749px 9px no-repeat; }
 #Journal #postsArea .postTitle, #Journal #postsArea .postDate {position:absolute;}
 #Journal #postsArea .postDate {right:207px; text-transform: lowercase; font-size:12px;}
 #Journal #postsArea .postTitle span{font-size:12px; position:absolute; margin-left:685px;}
 #postsArea .postTitle span:before{content:'@' !important;}
 #Journal #postsArea .header h2{position:absolute; font-size:18px; text-transform:uppercase; color:#cc3d37; display:block; width:730px; text-align:right;}
 #Journal #postsArea .postLinksBackg {text-align:left !important; text-transform:lowercase; position:absolute; margin-top:-20px;}
 #Journal #postsArea .postLinksBackg a{color:#d8dbe0;}
 #Journal .comments {position:absolute; background:#cc3d37; display:block; width:145px; height:18px; padding-top:3px !important;padding-right:5px !important; text-align:right; color:#fff; margin-left:735px !important; margin-top:-10px !important;}
 #Journal .comments a{color:#fff !important;}
 p.atMood em span {display:none !important; color: #fff; }
 p.atMusic em span {display:none !important; color: #fff; }
 p.atTag em span{display:none !important; color: #fff; }
 .atTag em:before {content: "темы:"; font-size: 12px; color:#ed8588; text-transform:uppercase; }
 .atMusic em:before {content: "музыка:"; font-size: 12px; color:#ed8588; text-transform:uppercase; }
 .atMood em:before {content: "настроение:"; font-size: 12px; color:#ed8588; text-transform:uppercase; }
 .atMood em, .atMusic em{font-style:normal; font-size: 12px;}
 .atTag a, .atTag em {font-style:normal; font-size: 12px; color:#363636;}
 #epigraph #post0 {border:none !important;}
 #postsArea #epigraph .paragraph {width:850px !important; padding-right:10px; padding-top:0px !important; min-height:10px !important;}
 .menuSection_title, #iAmQuit {background: url('МЕНЮ') no-repeat; width: 200px; height:52px;}
 .menuSection_title b, #iAmQuit a {color:#fff !important; text-transform:lowercase; font-size:24px; font-weight:normal !important; text-align:right !important; display:block; padding-right:5px;}
 #iAmQuit a {padding-right:10px !important;}
 #thisDiaryOwner {position:absolute; margin-top:50px; margin-left:-15px;}
 #myDiaryLinks{position:absolute; margin-top:120px; margin-left:-15px;}
 #globalLinks {position:absolute; margin-top:190px; margin-left:-15px;}
 #iAmQuit {position:absolute; margin-top:260px; margin-left:-10px;}
 .menuSection ul{width:186px; text-align:right; text-transform:lowercase; background:#cc3d37 !important; margin-top:-20px !important;}
 .menuSection a{color:#fff;}
 .menuSection a:hover{text-decoration:none; color:#960000;}
 #authorName {color:#d8dbe0 !important; font-size:24px !important; text-transform:lowercase; display:block !important; width:850px; text-align:right;}
 #thisDiaryInfo {margin-top:-35px !important; height:24px !important;}
 #side h1 a{display:block; text-align:right; text-transform:lowercase; font-size:34px; margin-top:-15px; color:#cc3d37 !important;}
 #side h1 a:hover{text-decoration:none;}
 #JournalComments #postsArea .paragraph {width:730px; background:#fff; padding-right:10px; padding-top:40px; padding-bottom:30px; margin-left:0px; min-height:150px !important;}
 #JournalComments #postsArea .postContent {background: #eeeeee; }
 #JournalComments #postsArea .postTitle, #JournalComments #postsArea .postDate {position:absolute;}
 #JournalComments #postsArea .postDate {right:207px; text-transform: lowercase; font-size:12px;}
 #JournalComments #postsArea .postTitle span{font-size:12px; position:absolute; margin-left:685px;}
 #JournalComments #postsArea .header h2{position:absolute; font-size:18px; text-transform:uppercase; color:#cc3d37; display:block; width:730px; text-align:right;}
 #JournalComments #postsArea .commentAuthor{position:absolute; right:6px;}
 #JournalComments #postsArea .authorName {position:absolute; width:878px; text-align:right; margin-top:-20px; text-transform:lowercase;}
 #JournalComments #postsArea .singlePost{padding-top:30px !important;}
 #JournalComments #postsArea .avatar{background:#fff; width:110px; height:110px; border:1px solid #cdcdcd !important; margin-top:15px;}
 #JournalComments #postsArea .avatar img{margin:5px; width:100px; height:100px;}
 #JournalComments #postsArea .sign{text-align:right; width:110px;}
 #JournalComments #postsArea .postLinksBackg {text-align:left !important; text-transform:lowercase; }
 #JournalComments #postsArea .postLinksBackg a{color:#d8dbe0;}
 #commentsArea_title{text-transform:uppercase; color:#999999; }
 #addCommentArea_title{text-transform:uppercase; color:#999999; position:absolute; margin-top:-37px; margin-left:-10px !important;}
 #JournalComments #commentsArea .avatar{background:#fff; width:110px; height:110px; border:1px solid #cdcdcd !important; }
 #JournalComments #commentsArea .avatar img{margin:5px; width:100px; height:100px;}
 #JournalComments #commentsArea .postLinksBackg {text-transform:lowercase; padding:0px !important; }
 #JournalComments #commentsArea .postLinksBackg a{color:#d8dbe0;}
 #JournalFavorite #postsArea .paragraph {width:730px; background:#fff; padding-right:10px; padding-top:40px; padding-bottom:30px; margin-left:0px; min-height:200px;}
 #JournalFavorite #postsArea .postContent {background: #eeeeee; }
 #JournalFavorite #postsArea .postTitle, #JournalComments #postsArea .postDate {position:absolute;}
 #JournalFavorite #postsArea .postDate {right:207px; text-transform: lowercase; font-size:12px; position:absolute;}
 #JournalFavorite #postsArea .postTitle span{font-size:12px; position:absolute; margin-left:685px;}
 #JournalFavorite #postsArea .header h2{position:absolute; font-size:18px; text-transform:uppercase; color:#cc3d37; display:block; width:730px; text-align:right;}
 #JournalFavorite #postsArea .commentAuthor{position:absolute; right:6px;}
 #JournalFavorite #postsArea .authorName {position:absolute; width:878px; text-align:right; margin-top:-20px; text-transform:lowercase;}
 #JournalFavorite #postsArea .communityName {position:absolute; width:878px; text-align:right; margin-top:-38px; text-transform:lowercase;}
 .communityName a{color:#dadbdf;}
 #JournalFavorite #postsArea .singlePost{padding-top:40px !important; }
 #JournalFavorite #postsArea .avatar{background:#fff; width:110px; height:110px; border:1px solid #cdcdcd !important; margin-top:15px;}
 #JournalFavorite #postsArea .avatar img{margin:5px; width:100px; height:100px;}
 #JournalFavorite #postsArea .sign{text-align:right; width:110px;}
 #JournalFavorite #postsArea .postLinksBackg {text-align:left !important; text-transform:lowercase; color:#d8dbe0; }
 #JournalFavorite #postsArea .postLinksBackg a{color:#d8dbe0;}
 .sign {font-size:10px;}
 #favGroups {margin-top:-25px; text-transform:lowercase;}
 #pageBar{margin-top:20px; line-height:18px !important}
 #pageBar a, #pageBar strong{background:#fff !important; height: 20px !important; display:inline-block; border:1px solid #cdcdcd !important; }
 #pageBar table {border-collapse:separate;}
 #pageBar a:hover{text-decoration:none; color:#999;}
 .section{background:#fff; border:1px solid #cdcdcd !important; padding:10px !important;}
 #new_post_title{text-transform:uppercase; color:#999999; margin-top:10px;}
 #message, input.text, .text, input.submit{background: #eeeeee !important;}
 #JournalCalendar #postsArea {background:#fff; border:1px solid #cdcdcd !important; width:878px !important; padding:10px; margin-top:30px;}
 .calHeader {text-transform:uppercase; color:#999999; position:absolute; margin-top:-35px !important; margin-left:-10px !important;}
 #JournalCalendar #content{padding-left:170px;}
 .cal-mnth a{color:#ed8588; text-transform:uppercase;}
 .tags_ul_all{background:#fff; border:1px solid #cdcdcd !important; padding:20px; margin-left:0px; width:858px !important;}
 #TagsList ul{margin-top:0px !important; margin-left:-17px; width:186px !important; text-align:left;}
 #bottomNav{background:#fff; border:1px solid #cdcdcd !important; text-transform:lowercase;}
#Stats {margin-top:7px !important; text-transform:uppercase !important; }
#Stats a{color:#ed8588 !important;}
 .header.order_button, #pchs, #lastComments, #myLinks, #more_login, #thisDiaryLinks, #thisDiaryPhoto, #side h1 .opac6, .prevnext {display:none !important;}
 

Настройки
Шрифты ариал
заголовок 12 обычный
текст 12 обычный

Цвета:
заголовок #dadada
ссылки #535353
записи #999999
оффтопик #e45b5d
фон и границы #

Примечание.
Дизайн блочный. Навигация вверху.

Как устанавливать дизайны

Исходник(и): тыц
Все исходники принадлежат их авторам.

Comments

[polishastik]

Just_Kattie, шаблон?О_о

[Just_Kattie]

polishastik ну просто я с нуля коды css писать еще не могу) вот и подстраиваю потом)

[polishastik]

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

[Just_Kattie]

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

[.Vozduh]

Just_Kattie, если вы действительно хотите учиться, то нарисуйте диз, а потом думайте, как его собирать. Дайри сами по себе ужасно ограничивают возможности, а готовый код просто руки скуёт.
А ещё я знаю как polishastik пишет коды и какое количество селекторов использует. Тут просмотр, если вы не знаете языка и большинства местных селекторов, вам ничем не поможет. Лучше попробуйте повторить. Дольше - зато толк будет.

[Just_Kattie]

mahini вот именно что все элементы (экстратоп и прочее) я собираю сама. Просто еще до конца в кодах не разобралась. но постепенно и это осваиваю... Рим не сразу же строился...

[Олень-Призрак]

Очень красиво сделано

[polishastik]

VaiFari, спасибо

[.Vozduh]

Just_Kattie, вы, чую, меня не поняли. Или я вас.))
Шаблон - это такая стационарная структура. В нём меняют цвета, ну картинки какие-то и всё. Вот вы знаете основные селекторы, изменили в них настройки, поменяли картинки, а остальное?
Если вы хотите научиться писать цсс, то не стоит брать готовые, кем-то прописанные коды, и воротить на них своё. Чтобы понять принципы работы надо писать самому. Спрашивать, ошибаться, но самому. Это из моего опыта.
Да, Рим не сразу, но точно не по чужому генплану.

[Foltery]

какая прелесть)

[polishastik]

Foltery пасиб

[mysteryofobscurity]

polishastik вышло немного не то, что я хотела, но... mysteryofobscurity.diary.ru/

[polishastik]

mysteryofobscurity, очень неплохо получилось

[-tdutybz-]

Какой гармоничный дизайн. Пошла примерять. Спасибо.

[fancy Kallen]

обычно не комменчу тут, хотя конечно зря, но это просто потрясающе так аккуратно *-* добавила в цитатник что б периодически рассматривать +_+

[-tdutybz-]

polishastik у меня, как обычно, просьба по размеру шрифта. Можно я сделаю меньше заголовки постов?

[polishastik]

-tdutybz-, fancy Kallen, спасибо!!!

[polishastik]

-tdutybz-, делайте)

[кеюшк]

очень здоровский дизайн

[polishastik]

кейкей, пасиб))

[dead_mockingbird]

аааааа!! как же я люблю серый! я сероголик!
love! ♥♥♥

[polishastik]

dead_mockingbird, я тоже

[dead_mockingbird]

mahini, ох, не хочу подливать масла в огонь, потому что в некоторых аспектах согласна, но я например училась именно так:

Если вы хотите научиться писать цсс, то не стоит брать готовые, кем-то прописанные коды, и воротить на них своё.

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

Ооо, замечательный просто

[Алонсо Кехана]

Очень

[Сестра Гарри]

Лаконично.
ксс только, ребятушки.

[n.e.i.]

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

[polishastik]

Nolin River, Alonzo Silvery, Taisa., спасибо)))

ксс только, ребятушки.

Сестра Гарри, не поняла..

[.Vozduh]

dead_mockingbird, я, видимо, старомодна. Но не буду брать полноценный оригинальный диз, не мной придуманный и прописанный, и издеваться над ним. Посмотреть, как он устроен - да, а именно изменять под себя, что обычно и делают с шаблонами, - нет.
И уроки по ф-шопу, думаю, не очень хорошее сравнение. Вот колоризация например. Можно взять урок и сделать его от и до, а можно скачать psd. и тупо перетащить слои на нужную картинку. И чтобы вырабатывалась техника, надо именно самому сделать эту колоризацию, а не просто перетащить слои.

[S.Shinsei]

спасибо, очень нравится)) возьму))