Начать новую тему Ответить на тему
АвторСообщение

 Сообщение Стиль Blogger - перекраска 
#1 

Аватар пользователя

В данной статье я расскажу как можно перекрасить стиль 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 используемый в данном стиле. Код под спойлером.
[spoiler]
* {
   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;
}
 
[/spoiler]
Скопировав который в поле CSS в настройках дневника, вы можете спокойно экспериментировать с цветами вашего Дневника. Отмечу лишь то, что в коде в адресах картинок, нужно заменить
Цитата:
адрес_форума.ru

На адрес нашего форума
Цитата:
hello-vitebsk.ru

либо на адрес форума, в котором находится ваш дневник(если вы не являетесь пользователем нашего форума.).


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 
 
Начать новую тему Ответить на тему


Дополнительные возможности

  Похожие темы  Автор  Ответов  Просмотров  Последнее сообщение 
Аватар пользователя какой стиль музыки??

DeaDRoMeO

24

1135

Аватар пользователя

22 авг 2011, 01:34

DeaDRoMeO

Аватар пользователя новый стиль для форума Тема закрыта
Аватар пользователя Новый стиль форума Тема закрыта
Аватар пользователя Переделываю стиль. Куча вопросов.

bublik89

47

1228

Аватар пользователя

22 июл 2014, 15:16

masik

Аватар пользователя заменила стиль, а используется другой?

Чародейка

3

393

Аватар пользователя

06 янв 2016, 05:19

DeaDRoMeO

Оставить свой комментарий

Поделиться темой с помощью

Ссылки на тему

Прямая ссылка:
BB-код для форумов, сайтов, блогов:
HTML ссылка:
 


cron

Самая неформальная поддержка phpBB :P