О дизайне

среда, 18 марта 2009

03:01

Gregory Holmes

Я варвар, вы же сами сказали. © (Статус: Рыцарь Непотребного Корыта. Девиз: Рабабуська! ©)

Как выцепить код CSS из стандартного оформления из каталога?

Зачем: изучить новые фишки; сотворить на основе стандарта - своё.

Как: Установив себе на дневник стандартный дизайн, вы увидите, что редактирование заблокировано. Причём вы не можете ни подредактировать код, ни поменять банальные настройки шрифта.
Но мы с вами сейчас поиграем в хакеров. :-D

На деле всё просто. Ставить выбранный готовый дизайн, открываем исходный код страницы в браузере, видим сверху строку:

<link rel="stylesheet" href="http://static.diary.ru/style/design/9/design_style.css" id="link_parent_css" />

Копируем ссылку, переходим по ней, вуаля!

Для примераКод Террафирмы:

.header,h1{color:#656551; font-size:12px; font-style: normal; font-weight: bold; background-color:transparent;}
.header h2{ font-style: normal; font-weight: bold;};
.singlePost .header, .linkssection .header{background-color:transparent;}
.menuSection,#epigraph,.formcontainer,.pageBar, .postContent, .postLinksBackg, .postTitle, .authorName, .communityName, .order_button, .section, .list_box{background-color:transparent;}
#side h1 a, .header a{color:#656551;}
.countSecond .postContent, .countSecond .postLinksBackg, .countSecond .postTitle, .countSecond .authorName, .countSecond .communityName, .singlePost.countSecond .header, .linkssection.countSecond .header{background-color:transparent;}
.cbegun {color:#6F999C; }
.offtop, .sign{color:#AFAFA4;}
#GroupOp {background-color:transparent; color:#656551;}
.calnd th {  background-color:transparent;  color:#6F999C; font-style: normal; font-weight: bold; }
.calnd tr.cal-head{border-bottom: 1px solid #839f47;}
.calnd td.cal-mnth {  [$journal_headstyle] color:#6F999C;  }
.advertising {  background-color:transparent;  }
.in-list .postTitle{color: #6F999C;}
#content {background-color:transparent;}
.pollLine { background-color:#6F999C;}
.TagL {color:#8C8C73;}
#my_tags{border-color:#839f47; background-color:transparent;}
#info_wind .flwin {color: #8C8C73; border-color: #839f47;}
#vkl .z_top{background-color:transparent;}
#vkl .current a, #vkl .current .z_n{background-color:transparent;}
#vkl li a, #vkl .z_n{background-color:transparent;}
#vkl .z_v{background-color: #839f47;}
#vkl .z_n, #vkl li a{border-color: #839f47;}
.mceToolbarTop{background:transparent !important;}
.mce{border-color:#839f47!important;}
.mceToolbarTop{border-bottom:1px solid  #839f47 !important;}
.htmlbox{border-color:  #839f47}
#javabut {background-color:transparent !important;border-bottom:1px solid  #839f47 !important;}
#codebuttons a img, a.mceButtonNormal img, a.mceButtonSelected img, a.mceButtonDisabled img{
border-color: #839f47 !important;}
*html a.mceButtonNormal, *html a.mceButtonSelected, *html a.mceButtonDisabled{
border-color: #839f47 !important;}
span.mceMenuButton img, span.mceMenuButtonSelected img{border-color: #839f47;}
#shsmile{background-color:transparent; border-color: #839f47;}
.SmilePanelElement small { background: transparent; border-color: #839f47; color:#8C8C73;}
.htmlbox textarea, input.text, #trspisok textarea, #close_text{background-color: transparent;  font-family:"trebuchet ms"; 	font-style: normal; font-weight: normal; color:#8C8C73;}
input.text, select, #trspisok textarea, #description, #close_text{border-color: #839f47; }
input.submit, .submit{border-color: #839f47;}
#suggestform{border-color: #FF7800;}

a{
	color: #FF7800;
}

#side a{
	text-decoration: underline;
}

#side a:hover{
	text-decoration: none;
}

body{
	background: #F9F9F7 url(bg.gif) repeat-x  0 -65px;
	color: #8C8C73;
	font-family: "trebuchet ms",helvetica,sans-serif;
	font-size: 11px;
	line-height: 18px;
	padding: 0;
}

#wrapper{
	width: 747px;
	background: #ffffff url(bg_area.gif) repeat-y left;
	min-width: 747px;
	max-width: 747px;
	position: relative;
}

#extratop{
	position: absolute;
	left: 0;
	top: 0;
	height: 200px;
	width: 747px;
	background: url(bg_area_top.gif) no-repeat 0 -64px;
}

#page-c, #side{
	margin-top: 200px;
}

.right #side{
	width: 190px;
	margin-right: 30px;
	_position:static;		
}

.right #page-c{
	margin-right: -220px;
}

.right #page-t{
	margin-right: 240px;
	margin-left: 30px;
}

.left #side{
	width: 190px;
	margin-left: 30px;
}

.left #page-c{
	margin-left: -220px;
}

.left #page-t{
	margin-right: 30px;
	margin-left: 240px;
}

#side h1{
	position: absolute;
	left: 30px; 
	top: 13px;
	width: 687px;
	background: url(head.jpg) no-repeat right;
	height: 92px;
	padding: 0;
	text-align: left;
	font-size: 23px;
	vertical-align: middle;
	line-height: 1.2em;
	letter-spacing:-1px;
}
#side h1 a{
	position: absolute;
	width: 182px;
	background: url(title_bg.gif) repeat-x top;
	height: 52px;
	display: block;
	color: #ffffff;
	font-weight: normal;
	padding: 20px;
	text-decoration: none;
}
#side h1 a:hover{
	text-decoration: none;
}

#topNav{
	position:absolute;
	top: 112px;
	width: 667px;	
	background: url(topmenu.gif) repeat-x top;
	height: 67px;
	left: 30px;
	text-align: left;
	line-height: 52px;
	font-size: 12px;
	font-weight: bold;
	padding: 0 10px 0 10px;
}

#topNav a{
	color: #ffffff;
	text-decoration: underline;
	padding: 8px;
}
#topNav a:hover{
	background: url(topmenu_hover.gif) repeat-x top;
	color: #4A4A24;
	text-decoration: none;
}

#topNavLinks li{
	margin: 0 5px 0 0;
}

.menuSection{
	font-size: 100%;
	padding: 0;
	margin-bottom: 20px;
}

#side ul, #sign, #YaSearchForm{
	padding: 0 10px 0 10px;
}

#side ul li{
	border-bottom:1px solid #EEEEEE;
	margin: 0 0 5px 0;
	padding-bottom:5px;
}

#side ul li b{
	font-weight: normal;
}

#thisDiaryInfo{
	padding-top: 48px;
}

#authorName{
	position: absolute;
	top: 200px;
	width: 180px;
	text-align: left;
	color: #656551;
	text-decoration: none!important;
	padding: 0 0 10px 10px;
	background: url(menu_title.gif) repeat-x bottom;
	font-size: 16px;
	font-weight: bold;
	line-height: 25px;	
}

.right #authorName{
	right: 30px;	
}

.left #authorName{
	left: 30px;	
}

#authorName:hover{
	color: #FF7800;
}

#thisDiaryPhoto img, .avatar img{
	background: url(bg_img.gif) no-repeat center;
	padding: 7px;
	width: 76px;
	height: 74px;
}

.menuSection_title{
	display: block;
	color: #656551;
	padding: 0 0 10px 10px;
	background: url(menu_title.gif) repeat-x bottom;
	font-size: 16px;
	margin-bottom: 20px;
	font-weight: bold;	
	line-height: 25px;	
}

.postDate, .countSecond .postDate{
	background-color: transparent;
	color: #afafa4;
	font-size: 11px;
	float: right;
}

.postTitle, .countSecond .postTitle{
	display: block;
	color: #656551;
	padding: 0 0 10px 15px;
	background: url(menu_title.gif) repeat-x bottom;
	font-size: 18px;
	margin-bottom: 20px;
	font-weight: bold;
	letter-spacing:-1px;
	line-height: 25px;
	padding-right: 175px;
	text-transform: capitalize;
}

.postTitle span, .countSecond .postTitle span{
	display: none;
}

.singleComment .postTitle span, .singleComment .countSecond .postTitle span{
	display: inline;
}

.postTitle h2, .countSecond .postTitle h2{
	margin-left: -5px;
}

.order_button{
	position: relative;
	margin-top: -18px;
	padding: 0;
	margin-bottom: 0;
}

.singlePost, .singleComment{
	background: url(post_bottom.gif) repeat-x bottom;
	padding-bottom: 15px;
	margin-bottom: 30px;
}

.postLinksBackg{
	padding: 0;
	margin:25px 15px 0 15px;
	font-size: 100%;
}

.postLinksBackg a{
	text-decoration: underline;
}

.postLinksBackg a:hover{
	text-decoration: none;
}

.postLinks .comments{
	background: url(comm_bg.gif) no-repeat left;
	padding-left: 17px;
}

#YaSearchForm_title{
	display: none;
}

#YaSearchForm{
	visibility: visible!important;
	display: block!important;
}

.section, .formcontainer, .paragraph{
 	overflow:auto; 
	overflow-y: hidden; 
	_width:447px;
}

.commentAuthor{
	width: 90px;
}

.commentAuthor div{
	width: 90px;
}

.postInner{
	margin-left: -100px;
}

.paragraph{
	padding: 0 15px;
	margin-left: 100px;
}

 #tags, #atMusic, #atMood{
 	width: 300px!important;
}

#lastComments ul, #lastComments ul li{
	width: auto;
}

#usrlog, #usrpass, #login_form input.submit{
	width: 65px;
}

#open_uri{
	width: 146px;
}

.right .postActionLinks{
	position: absolute;
	right: 220px;
	width: 20px;
}

.left .postActionLinks{
	position: absolute;
	right: 15px;
	width: 20px;
}

@темы: Мануал, @дневники, Дизайн