Новогоднее настроение

[Minuoki]

Эти "Хранители" заставили меня с головой окунуться в зимнее настроение и заставить жалеть о том, что у нас в городе плюсовая температура и снега, естественно, тоже нет. Кажется, Джек Фрост совсем забыл дорогу в наши края. Наверное, именно оттого эльф на меню и он же в эпиграфе такой суровый.

Тем не менее у себя в дневнике, я навела зиму. Хотя не с первого раза. В итоге спустя все выходные я нашла квинтэссенцию дизайна, который был бы и красивым и не слишком тяжелым. На этот диз меня вдохновило 2 вещи:

1. Хранители! Слава-слава Джеку Фросту и его друзьяшкам!


2. Вот этот прекрасный шаблончик:

И в итоге я получила вот это:

Не знаю, как вы, а я считаю, это прекрасно!

Исходники

Настройки дизайна

Дизайн:

— Табличный

Навигационная панель:

— Вверху

Шрифт:

— Заголовка: жирный 16
— Текста: обычный 14
— Гарнитура: Book Antiqua

Цвет текста

— Заголовка: #fff
— Ссылки: #5e96bc
— Записи: #0e0f10
— Оффтопика #dceffc

Цвет фона и границ

— Фон дневника: #dceffc
— Фон записи: #dceffc
— Фон заголовка: #5e96bc
— Границы: #C9C9C9

Изображения:

ЭЛЬФ
ФОН_ЗАПИСИ
КРУЖЕВО
ОСНОВНОЙ_ФОН
СНЕЖИНКА

CSS код

body { 
	background: url('ОСНОВНОЙ_ФОН') repeat-x fixed; 
	padding: 0px !important; 
	}

#side { 
	height: 300px !important; 
	background: #fff !important; 
	position: adsolute !important; 
	top:-5px; z-index: 100 !important; 
	}

#extratop { 
	background: url('КРУЖЕВО') repeat-x right; 
	padding: 0px !important; 
	position: absolute !important; 
	padding: 0 !important; 
	top:295px !important; 
	height: 88px !important; 
	width:100% !important; 
	z-index: 100 !important; 
	}

.menuSection div, 
#epigraph .postTitle, 
#page-c, 
#page-t, 
#wrapper, 
#postsArea, 
.singlePost, 
.singleComment, 
.postContent, 
.postInner, 
.postLinksBackg, 
#epigraph div, 
.menuSection div ul, 
.top .bordered, 
#side h1, 
#addCommentArea, 
#Journal form#msg_form { 
	background-color: transparent !important; 
	}

.order_button, 
#Stats{  
	display:none !important; 
	}

.menuSection div ul { 
	display: block !important; 
	border: none !important; 
	position: relative !important; 
	left: -8px !important; 
	}

.menuSection div ul a { 
	color: #86b3d2 !important; 
	}

.top #thisDiaryInfo { 
	background-color:transparent !important; 
	z-index: 101 !important; 
	position: relative !important; 
	left: 0px !important; 
	top: 0px !important; 
	width: 150px !important; 
	padding: 0 !important; 
	margin: 0 !important; 
	text-align: left !important; 
	margin-right: -150px !important; 
	margin-bottom: 100px !important; 
	}

#thisDiaryPhoto { 
	position: relative !important; 
	left: 0px !important; 
	width: 120px;  
	height:120 px !important;  
	display: inline !important;  
	float: left !important;  
	text-align: center !important;  
	border: 3px #70bcdf dotted !important;  
	background-color: #dceffc !important;  
	margin-left: 5px !important;  
	margin-top: 10px !important;  
	} 
	
#authorName {  
	position: relative !important;  
	left: 78px !important;  
	top: -150px !important;  
	color: #70bcdf !important;  
	} 
	
#thisDiaryOwner, 
	#thisDiaryLinks {  
	position: relative !important;  
	left: 150px !important;  
	top: 40px !important;  
	width: 150px !important;  
	} 
	
#myDiaryLinks,
#globalLinks,
#myLinks {  
	position: relative !important;  
	left: 150px !important;  
	top: 0px !important;  
	width: 150px !important;  
	} 
	
#YaSearch {  
	position: absolute !important;  
	left: 4px !important;  
	top: 175px !important;  
	border: 3px #70bcdf dotted !important;  
	background-color: #dceffc !important;  
	width: 275px !important;  
	float:right !important;  
	} 
	
#YaSearch input {  
	border: 1px #70bcdf solid !important;  
	background-color: #fff !important;  
	height: 18px !important;  
	padding: 0 2px !important;  
	} 
	
#YaSearch input.submit {  
	color: #70bcdf !important;  
	font: bold 110% serif !important;  
	height: 20px !important;  
	opacity: 100 !important;  
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important;  
	} 
	
#iAmQuit {  
	position: absolute !important;  
	left: 10px !important;  
	top: 225px !important;  
	} 
	
#iAmQuit a {  
	color: #86b3d2 !important;  
	} 
	
#login_change {  
	position: relative !important;  
	left: -15px !important;  
	top: 0px !important;  
	border: 3px #70bcdf dotted !important;  
	background-color: #dceffc !important;  
	width: 275px !important;  
	z-index: 101 !important;  
	color: #70bcdf !important;  
	} 
	
#login_change a {  
	color: #70bcdf !important;  
	} 
	
#login_change input.text {  
	border: 1px #70bcdf solid !important;  
	background-color: #fff !important;  
	height: 18px !important;  
	padding: 0 2px !important;  
	}
#login_change input.std_submit {  
	color: #70bcdf !important;  
	font: bold 120% serif !important;  
	height: 20px !important;  
	width: 60px !important;  
	border: 1px #70bcdf solid !important;  
	background: #fff !important;  
	} 
	
.menuSection_title {  
	background-color: transparent !important;  
	border: none;  
	border-bottom: solid 1px #70bcdf !important;  
	border-top: solid 1px #70bcdf !important;  
	width: 150px !important;  
	color: #70bcdf !important;  
	} 
	
#side h1 a {  
	position: absolute !important;  
	left: 155px !important;  
	top: 15px !important;  
	color: #70bcdf !important;  
	left: 155px !important;  
	} 
	
#add_block1{  
	background: url('ЭЛЬФ') no-repeat;  
	padding: 0px !important;  
	position: absolute !important;  
	right: 5px !important;  
	top: 100px !important;  
	z-index: 105 !important;  
	width: 150px !important;  
	height: 170px !important;  
	} 
	
#wrapper, 
#page-c, 
#page-t {  
	width: 100% !important;  
	padding: 0 !important;  
	margin: 0 !important;  
	}

#page-c {  
	margin-top: 100px !important;  
	}

.singlePost {  
	margin-left: 50px !important;  
	width: 85% !important;  
	padding: 0px !important;  
	background: transparent !important;  
	margin-bottom: 20px !important;  
	} 
	
.countSecond .postTitle, 
.postTitle {  
	background-color: #5e96bc !important;  
	color: #fff !important;  
	margin: 0px !important;  
	} 
	
.postDate {  
	background-color: #5e96bc !important;  
	width: 250px !important;  
	border-radius: 7px 7px 0px 0px;  
	-moz-border-radius: 7px 7px 0px 0px;  
	-khtml-border-radius: 7px 7px 0px 0px;  
	margin:0px !important;  
	text-align:left !important;  
	color: #fff !important;  
	position:relative !important;  
	left: 0px !important;  
	} 
	
.postContent {  
	margin: 0px !important;  
	width: 100% !important;  
	padding: 0px !important;  
	background: url('ФОН_ЗАПИСИ') !important;  
	} 
	
.paragraph {  
	margin: 0px !important;  
	width: 100% !important;  
	padding: 0px !important;  
	} 
	
.paragraph p.atTag, 
.communityName, 
.authorName {  
	background-color: #86b3d2 !important;  
	width: 100% !important;  
	margin: 0 !important;  
	padding: 2px 0 !important;  
	} 
	
.paragraph div {  
	padding: 10px !important;  
	} 
	
.postLinksBackg{  
	position:relative !important;  
	left: 0px !important;  
	width:100% !important;  
	margin:0px !important;  
	padding:0px !important;  
	}
.urlLink, 
.postLinks li, 
.Attention a {  
	background-color: #5e96bc !important;  
	border-radius: 0px 0px 7px 7px;  
	-moz-border-radius: 0px 0px 7px 7px;  
	-khtml-border-radius: 0px 0px 7px 7px;  
	text-align:center!important;  
	padding: 7px !important;  
	padding-bottom: 3px !important;  
	visibility: visible;  
	} 
	
.postLinks, 
.Attention a {  
	margin: 0px !important;  
	position:relative !important;  
	top: 7px !important;  
	} 
	
#commentsArea {  
	position:relative !important;  
	padding-left: 50px !important;  
	width: 85% !important;  
	} 
	
.singleComment {  
	margin-left: 50px !important;  
	width: 100% !important;  
	padding: 0px !important;  
	background: transparent !important;  
	margin-bottom: 20px !important;  
	} 
	
#commentsArea_title {  
	margin: 0 !important;  
	border-radius: 0px 7px 0px 7px;  
	-moz-border-radius: 0px 7px 0px 7px;  
	-khtml-border-radius: 0px 7px 0px 7px;  
	}

#JournalComments .postInner, 
#JournalFavorite .postInner, 
#JournalPostPreview .postInner {  
	margin: 0 !important;  
	padding-left: 0px !important;  
	padding-right: 0px !important;  
	float: inherit !important;  
	position: relative !important;  
	width: initial !important;  
	z-index: 70 !important;  
	}

.commentAuthor {  
	width:150px !important;  
	height: 100% !important;  
	background: transparent !important;  
	margin: 0 !important;  
	text-align: center !important;  
	z-index: 85 !important;   
	padding-top: 20px !important; 
	}

.commentAuthor .avatar img {  
	border: 3px #70bcdf dotted !important;  
	background-color: #dceffc !important;  
	width: 100px !important;  
	padding: 12px !important;  
	}

.commentAuthor .sign {  
	font-style: italic !important;  
	}

#JournalComments .paragraph p, 
#JournalFavorite .paragraph p, 
#JournalPostPreview .paragraph p {  
	margin: 0px !important;  
	}

#JournalComments .paragraph, 
#JournalFavorite .paragraph, 
#JournalPostPreview .paragraph {  
	width: 100% !important;  
	} 
	
#epigraph {  
	width: 100% !important;  
	margin: 0 !important;  
	padding: 0 !important;  
	}

li.comments {  
	float:right !important;  
	}

.blockquote{  
	padding: 10px !important;  
	margin: 0px !important;  
	}

.postLinksBackg a, 
.atTag a, 
.communityName a, 
.authorName a,#pageBar a {  
	color: #fff !important;  
	}

#pageBar {  
	background-color: #86b3d2 !important;  
	width: 85% !important;  
	border-radius: 7px 7px 0px 0px;  
	-moz-border-radius: 7px 7px 0px 0px;  
	-khtml-border-radius: 7px 7px 0px 0px;  
	margin:0px !important;  
	text-align:center !important;
	color: #fff !important;  
	position:relative !important;  
	left: 50px !important;  
	}

#bottomNav {  
	background-color: #86b3d2 !important;  
	width: 85% !important;  
	margin:0px !important;  
	text-align:center !important;  
	color: #fff !important;  
	position:relative !important;  
	left: 50px !important;  
	}

.Attention a:hover {  
	background-color: red !important;  
	}

.prevnext {  
	background-color: #86b3d2 !important;  
	border-radius: 7px 7px 7px 7px;  
	-moz-border-radius: 7px 7px 7px 7px;  
	-khtml-border-radius: 7px 7px 7px 7px;  
	margin:10px 0 !important;  
	padding: 7px 0 !important;  
	}

.prevnext li {  
	padding: 0px 7px !important;  
	}

#addCommentArea, 
#Journal form#msg_form,  
#new_post_title {  
	margin-left: 50px !important;  
	width: 85% !important;  
	padding: 0px !important;  
	margin-bottom: 0px !important;  
	}

#addCommentArea_title,
#new_post_title{  
	border-radius: 7px 7px 0px 0px;  
	-moz-border-radius: 7px 7px 0px 0px;  
	-khtml-border-radius: 7px 7px 0px 0px;  
	}

#new_post_title {  
	padding: 7px 0 !important;  
	}

#new_post_title:before {  
	content: url('СНЕЖИНКА') !important;  
	}

#JournalComments .paragraph div:first-child, 
#JournalFavorite .paragraph div:first-child, 
#JournalPostPreview .paragraph div:first-child {  
	margin-left: 150px !important;  
	}
 

P.S.Естественно, тут есть свои косяки, я их буду исправлять по мере нахождения.

@темы: оформление, мое

Comments

[YumeJapanes]

css? какая няшнтааа**

[Minuoki]

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

[YumeJapanes]

ну цсс вроде платный, по-другому я не знаю как делать

[Minuoki]

Ага, платный) Но я подключила) Люблю красоту) Надо будет к весне тоже сделать)