Для начала вбиваем в яндекс поиск следущий запрос " таблица цветов 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;
}
На адрес нашего форумаадрес_форума.ru
либо на адрес форума, в котором находится ваш дневник(если вы не являетесь пользователем нашего форума.).hello-vitebsk.ru