Стиль Blogger - перекраска

Личный раздел DeaDRoMeO.

Модераторы: Lorem Ipsum, Atlas

Ответить
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Стиль Blogger - перекраска

Сообщение DeaDRoMeO »

В данной статье я расскажу как можно перекрасить стиль Blogger (стиль используется в Дневниках(Блогах)).
Для начала вбиваем в яндекс поиск следущий запрос " таблица цветов html яндекс" и первый же результат будет

Там же вы и будете подбирать цвета для своего блога. Код цвета следует брать из выделенной области и не забывать добавлять перед кодом цвета знак #.
Начнем-с.
Идем в настройки дневника (Дневники - Настройки Дневника) и перед нами открывается сразу нужная нам страница настроек. Некоторые пояснения на скриншоте ниже.

С этой страницей мы и будем колдовать. Вставляем в выделенное поле следущий код
body {
background: #E1D4C0 url(http://адрес_форума.ru/blog/styles/blogger/images/sides_body.png) repeat-y scroll center top;
font-family: "Trebuchet MS", sans-serif;
font-size: small;
font-style: normal;
font-variant: normal;
}
Данный код позволит вам изменить "тело" Дневника. К примеру я поменял фон боковых колонок на следущий
body {
background: #f7f21a url(http://адрес_форума.ru/blog/styles/blogger/images/sides_body.png) repeat-y scroll center top;
font-family: "Trebuchet MS", sans-serif;
font-size: small;
font-style: normal;
font-variant: normal;
}
И у меня получилось так

Если удалить следущий код
url(http://адрес_форума.ru/blog/styles/blogger/images/sides_body.png) repeat-y scroll center top
То все тело Дневника окрасится выбранным цветом. Можно так же изменить фоновую картинку, всего лишь изменив ссылку
url(http://адрес_форума.ru/blog/styles/blogger/images/sides_body.png) repeat-y scroll center top
На ссылку на свою картинку.
Эксперементируя с цветами вы можете подобрать наиболее подходящий для себя. Надеюсь с этим разобрались :-)
Следущий код позволит вам настроить цвета заголовков ваших записей и цвет разделительной полосы.
h1 {
border-bottom: 1px solid #E1D4C0;
color: #333333;
font-weight: normal;
margin-bottom: 3px;
}
Допустим я поменяю цвета так
h1 {
border-bottom: 1px solid #f7f21a; // цвет разделительной линии и ее толщина ( 1px)
color: #f7f21a; // цвет заголовка
font-weight: normal;
margin-bottom: 3px;
}
В итоге получится

Продолжим. Следущий код позволит вам изменить цвет полосы навигации.
.nav {
background-color: #114477;
height: 30px;
padding: 0 5px;
border-bottom: 1px solid #000000;
}
Изменив цвета
.nav {
background-color: #f7f21a;
height: 30px;
padding: 0 5px;
border-bottom: 1px solid #000000;
}
Получим

Впринципе это не все возможности перекраски, но далее обьяснять не стану, дам весь код CSS используемый в данном стиле. Код под спойлером.

Код: Выделить всё

* {
	margin: 0;
	padding: 0;
}

body {
	background: #E1D4C0 url(http://адрес_форума.ru/blog/styles/blogger/images/sides_body.png) repeat-y scroll center top;
	font-family: "Trebuchet MS", sans-serif;
	font-size: small;
	font-style: normal;
	font-variant: normal;
}

/*
* Tag styles --------------------------------------------------------------------------------------
*/
a:link {
	color:#5588AA;
	text-decoration:none;
}

a:visited {
	color:#5588AA;
	text-decoration:none;
}

a:hover {
	color:#CC6600;
	text-decoration:underline;
}

h1 {
	border-bottom: 1px solid #E1D4C0;
	color: #333333;
	font-weight: normal;
	margin-bottom: 3px;
}

h3 {
	font-size: 1.4em;
}

h4 {
	font-size: 0.9em;
}

img, fieldset {
	border: 0;
}

hr {
	margin: 10px 0;
}

/*
* Class styles, starting from the first used to the last used -------------------------------------
*/

/* Header Classes */
.nav {
	background-color: #114477;
	height: 30px;
	padding: 0 5px;
	border-bottom: 1px solid #000000;
}

.nav a {
	color: #9CCEFF;
}

.nav a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

.nav_icon {
	float: left;
	margin-top: 2px;
}

.nav_search {
	float: left;
}

.nav_search_input {
	float: left;
	margin: 6px 0 0 7px;
	height: 13px;
	font-size: 12px;
}

.nav_search_submit {
	float: left;
	height: 17px;
	margin: 6px 0 0 5px;
	background-color: #114477;
	border: 1px solid #4477AA;
	color: #99CCFF;
	font-size: 12px;
}

.nav_search_submit:hover {
	background-color: #4477AA;
}

.nav_links {
	float: left;
	margin: 6px 0 0 10px;
	color: #94A8D4;
}

.nav_links_right {
	float: right;
	margin: 6px 5px 0 10px;
	color: #94A8D4;
}

.feed_icon {
	float: left;
	padding: 1px 3px;
}

.header {
	background-color: #002255;
}

.header_inner {
	width: 810px;
	margin: 0 auto;
	background-image: url(http://адрес_форума.ru/blog/styles/blogger/images/sides_head.png);
}

.header_img {
	background: transparent url(http://адрес_форума.ru/blog/styles/blogger/images/logo.gif) no-repeat 50px center;
	height: 120px;
}

/* Main Classes */
.main {
	width: 720px;
	margin: 10px auto;
}

.content {
	<!-- IF USER_MENU_EXTRA -->
	width: 550px;
	<!-- ELSE -->
	width: 720px;
	<!-- ENDIF -->
}

.blog_description {
	padding: 10px;
	margin-bottom: 10px;
}

/* Pagination */
.pagination {
	float: right;
}

/* Sidebar */
#sidebar {
	float: right;
	width: 150px;
}

#sidebar .post {
	background: transparent url(http://адрес_форума.ru/blog/styles/blogger/images/bg_mod_top.png) no-repeat scroll left top;
	margin-bottom: 15px;
}

#sidebar .inner {
	background: transparent url(http://адрес_форума.ru/blog/styles/blogger/images/bg_mod_bot.png) no-repeat scroll left bottom;
}

#sidebar .left_menu_title {
	text-align: center;
	color: #525252;
	font-size: 130%;
}

#sidebar dl dd {
	padding: 5px;
	border-color: #E1D4C0;
	border-style: none solid;
	border-width: medium 2px;
}

#sidebar dl .panel dd {
	border: 0;
}

#sidebar .topiclist {
	list-style: none;
}

/* Blog Classes */
.blog {
}

.blog_rating {
	float: right;
}

.blog_title a {
	color: #CC6600;
	font-weight: normal;
	text-decoration: none;
}

.blog_title a:hover {
	color: #333333;
}

.blog_date {
}

.blog_text {
	padding: 10px 0;
}

.edited_message {
}

.deleted_message {
}

.signature {
	border-top: 1px dotted #7C756A;
}

.blog_bottom_right {
}

.blog_bottom_left {
	margin-bottom: 4px;
}

/* Reply Classes */
#replies {
	margin-top: 15px;
}

.reply {
	padding: 5px;
	margin-bottom: 15px;
}

.reply_title {
	font-size: 1.1em;
}

.reply_date {
}

.reply_text {
	min-height: 30px;
}

.reply_bottom_right {
}

.reply_bottom_left {
	margin-bottom: 4px;
}

/* Footer Classes */
.bottom_links {
}

.copyright {
	margin-top: 15px;
	padding: 5px;
	text-align: center;
	color: #555555;
}

/* Extra Classes */
.deleted {
	padding: 5px;
	background-color: #A19CA6;
}

.reported {
	background-color: #FFF36F;
	padding: 5px;
}

/*
* Poll/BBCode/Attachment/Other board styles ------------------------------------------------------------
*/

/* Poll Styles */
.poll_info {
}

fieldset.polls {
	margin: 5px 5px 10px 5px;
}

fieldset.polls dl {
	margin-top: 5px;
	border-top: 1px solid #DCDEE2;
	padding: 5px 0 0 0;
	height: 18px;
	color: #666666;
}

fieldset.polls dl.voted {
	font-weight: bold;
	color: #000000;
}

fieldset.polls dt {
	text-align: left;
	float: left;
	display: block;
	width: 30%;
	border-right: none;
	padding: 0;
	margin: 0;
	font-size: 1.1em;
}

fieldset.polls dd {
	float: left;
	width: 10%;
	border-left: none;
	padding: 0 5px;
	margin-left: 0;
	font-size: 1.1em;
}

fieldset.polls dd.resultbar {
	width: 50%;
}

fieldset.polls dd input {
	margin: 2px 0;
}

fieldset.polls dd div {
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	padding: 0 2px;
	overflow: visible;
	min-width: 2%;
}

.pollbar1 {
	background-color: #AA2346;
	border-bottom-color: #74162C;
	border-right-color: #74162C;
}

.pollbar2 {
	background-color: #BE1E4A;
	border-bottom-color: #8C1C38;
	border-right-color: #8C1C38;
}

.pollbar3 {
	background-color: #D11A4E;
	border-bottom-color: #AA2346;
	border-right-color: #AA2346;
}

.pollbar4 {
	background-color: #E41653;
	border-bottom-color: #BE1E4A;
	border-right-color: #BE1E4A;
}

.pollbar5 {
	background-color: #F81157;
	border-bottom-color: #D11A4E;
	border-right-color: #D11A4E;
}

/* Quote block */
blockquote {
	background: #EBEADD url("http://адрес_форума.ru/blog/styles/blogger/images/quote.gif") 6px 8px no-repeat;
	border: 1px solid #DBDBCE;
	font-size: 0.95em;
	margin: 0.5em 1px 0 25px;
	overflow: hidden;
	padding: 5px;
}

blockquote blockquote {
	/* Nested quotes */
	background-color: #EFEED9;
	font-size: 1em;
	margin: 0.5em 1px 0 15px;	
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #EBEADD;
}

blockquote cite {
	/* Username/source of quoter */
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	display: block;
	font-size: 0.9em;
}

blockquote cite cite {
	font-size: 1em;
}

blockquote.uncited {
	padding-top: 25px;
}

/* Code block */
dl.codebox {
	padding: 3px;
	background-color: #FFFFFF;
	border: 1px solid #C9D2D8;
	font-size: 1em;
}

dl.codebox dt {
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	font-size: 0.8em;
	font-weight: bold;
	display: block;
}

blockquote dl.codebox {
	margin-left: 0;
}

dl.codebox code {
	/* Also see tweaks.css */
	overflow: auto;
	display: block;
	height: auto;
	max-height: 200px;
	white-space: normal;
	padding-top: 5px;
	font: 0.9em Monaco, "Andale Mono","Courier New", Courier, mono;
	line-height: 1.3em;
	color: #2E8B57;
	margin: 2px 0;
}

.syntaxbg		{ color: #FFFFFF; }
.syntaxcomment	{ color: #FF8000; }
.syntaxdefault	{ color: #0000BB; }
.syntaxhtml		{ color: #000000; }
.syntaxkeyword	{ color: #007700; }
.syntaxstring	{ color: #DD0000; }

/* Attachments */
.attachbox {
	width: auto; 
	margin: 5px 5px 5px 0;
	padding: 6px;
	background-color: #FFFFFF;
	border: 1px dashed #C9D2D8;
}

.attachbox dt {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

.attachbox dd {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid #C9D2D8;
}

.attachbox dd dd {
	border: none;
}

.attachbox p {
	line-height: 110%;
	color: #666666;
	font-weight: normal;
}

.attachbox p.stats
{
	line-height: 110%;
	color: #666666;
	font-weight: normal;
}

.attach-image {
	margin: 3px 0;
	width: 100%;
	max-height: 350px;
	overflow: auto;
}

.attach-image img {
	border: 1px solid #999999;
/*	cursor: move; */
	cursor: default;
}

/* Inline image thumbnails */
div.inline-attachment dl.thumbnail, div.inline-attachment dl.file {
	margin-bottom: 4px;
}

div.inline-attachment p {
	font-size: 100%;
}

dl.file {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

dl.file dt {
	text-transform: none;
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

dl.file dd {
	color: #666666;
	margin: 0;
	padding: 0;	
}

dl.thumbnail img {
	padding: 3px;
	border: 1px solid #666666;
	background-color: #FFFFFF;
}

dl.thumbnail dd {
	color: #666666;
	font-style: italic;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.attachbox dl.thumbnail dd {
	font-size: 100%;
}

dl.thumbnail dt a:hover {
	background-color: #EEEEEE;
}

dl.thumbnail dt a:hover img {
	border: 1px solid #368AD2;
}
Скопировав который в поле CSS в настройках дневника, вы можете спокойно экспериментировать с цветами вашего Дневника. Отмечу лишь то, что в коде в адресах картинок, нужно заменить
адрес_форума.ru
На адрес нашего форума
hello-vitebsk.ru
либо на адрес форума, в котором находится ваш дневник(если вы не являетесь пользователем нашего форума.).
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#1
Ответить