Зелёный хамелеон (S2)

3 декабря 2012

Зелёный хамелеон (S2)

Увеличить

Как ставить

Нажмите на ссылку Unstyled 01 и примените найденный дизайн

Далее на странице Custom CSS

1. ВАЖНО! Use base.css → NO
2. В поле Custom stylesheet вставляется код:

/* 
Design by Yoksel @http://community.livejournal.com/journals_covers/
*/
BODY {
background-color: #E0ED97;
background-image: url(http://img-fotki.yandex.ru/get/6514/5091629.7d/0_6fd66_c20511c1_orig);
font: 14px/1.4 "Trebuchet MS", Arial, sans-serif;
color: #333;
}

H1 { font-size: 30px; margin-bottom: 20px;}
H2 { font-size: 26px; margin-bottom: 20px; }
H3 { font-size: 22px; margin-bottom: 20px; }
H4 { font-size: 18px; margin-bottom: 10px}

.j-page-title { font-size: 22px; }

A, A:visited {
text-decoration: underline;
color: #333;
}
A:hover {
text-decoration: none;
color: #555;
}
H2 A, H3 A, H4 A,
H2 A:visited, H3 A:visited, H4 A:visited {
text-decoration: none;
}

.j-user-pic {
padding: 5px;
border: 1px dotted #DDD;
}

.j-l-header,
.j-e{
margin-bottom: 40px;
}

.j-l-page-inner {
margin: 25px 15px 50px;
padding: 20px 20px 20px;  
background: #FFF;  
}

/* Header and nav
------------------------------------------*/

.j-l-header {
padding-bottom: 20px;
border-bottom: 1px dotted #DDD;
}

.j-header-user-pic { display: none; }
.j-header-user-name { display: none;}
.j-user-journal-title { margin-bottom: 5px; }
.j-user-journal-subtitle { font-size: 14px; }

.j-user-hgroup {
clear: none;
}

.j-journal-nav {
width: 100%;
margin-bottom: 15px;
}

.j-journal-nav-item A {
display: block;
text-decoration: none;
color: #333;
transition: all .2s ease;
}

.j-header-nav .j-journal-nav-item A {
border-right: 1px dotted #DDD;
padding: 10px 25px;
}

.j-journal-nav-item:last-child A {
border-right: 0 dotted #DDD;
}

.j-beta-nav .j-journal-nav-item A {
padding: 10px 15px 10px;
border-bottom: 1px dotted #DDD;
}

.j-journal-nav-item A:hover {
background: #E0ED9E;
text-decoration: none;
}

.j-journal-nav-item-current A,
.j-journal-nav-item-current A:hover {
background: #D1E861;
font-weight: bold;
color: #333;
}

.j-p-header-image-top .j-w-header-image,
.j-p-header-image-middle .j-w-header-image {
margin-bottom: 20px;
}

/* Beta
------------------------------------------*/

.j-beta-w {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dotted #DDD;
}

.j-p-in_beta-nav {
margin-bottom: 10px;
padding-bottom: 0;
border-bottom: 0px dotted;
}

.j-beta-w A {
text-decoration: none;
}

.j-beta-w A:hover {
text-decoration: underline;
}
.j-p-in_beta-nav A:hover {
text-decoration: none;
}

.j-w-title {
float: left;
clear: both;
margin-bottom: 15px;
padding: 5px 15px;
background: #D1E861;
font: italic 12px/1.4 Trebuchet MS;
}

.j-w-content {
clear: both;
}

.j-w-item {
margin-bottom: 5px;
font: italic 12px/1.4em Trebuchet MS;
}

.j-w-item:before {
content: "+ ";
font-size: 16px;
color: #D1E861;
}
.j-p-tagcloud .j-w-item:before {
content: "";
}

.j-w-calendar-arr {
border-color: transparent #333;
}
.disabled .j-w-calendar-arr {
border-color: transparent #ddd;
}
.j-w-calendar-nav {
margin: 10px 0;
font: italic 11px/1.4 Trebuchet MS;
}

.j-calendar-table {
border-collapse: separate;
border-spacing: 1px;
}
.j-calendar-weekday {
background: #EEE;
font-weight: normal;
font: italic 11px/1.4 Trebuchet MS;
color: #333;
}
.j-calendar-weekday-7 {
border-right: 0 solid;
}
.j-calendar-table TD {
font: italic 11px/1.4 Trebuchet MS;
line-height: 20px;
}
.j-calendar-table TD A {
display: block;
background: #D1E861;
}

.j-w-profile-image {
margin-bottom: 15px;
}
.j-w-profile-image IMG {
//width: 100%;
}

/* Entry
------------------------------------------*/  
.j-e {
position: relative;
}
.j-e-user {
margin-bottom: 10px;
}
.j-e-date {
display: inline-block;
margin-bottom: 15px;
padding: 5px 15px;
background: #D1E861;
font: italic 12px/1.4 Trebuchet MS;
}

.j-e-title  {
margin-bottom: 10px;
}
.j-e-text {
margin-top: 10px;
}

.j-e-meta {
margin: 20px 0 0 20px;
font: italic 12px/1.4 Trebuchet MS;
color: #999;
}

.j-e-meta A {
color: #999;
}

.j-e-nav {
margin-top: 20px;
padding-top: 10px;
border-top: 1px dotted #DDD;
}
.j-e-nav-item A {
display: inline-block;
padding: 5px 7px;
}

.j-e-nav-item-comments A {
padding: 5px 15px;
background: #D1E861;
}

/* Archive
------------------------------------------*/  
.j-years-nav {
margin-bottom: 30px;
}   
.j-years-nav-item-current {
font-size: 22px;
font-weight: bold;
}
.j-calendar-month {
padding-bottom: 10px;
}    
.j-calendar-table TD {
padding: 3px 0;
border-bottom: 1px dotted #DDD;
}

.j-calendar-table TR:last-child TD {
border-bottom: 0 none;
}

.j-calendar-table TD A {
text-decoration: none;
font-weight: bold;
}
/* Month
------------------------------------------*/  
.j-month-nav {
margin-bottom: 20px;
}
.j-month-nav A {
text-decoration: none;
font-size: 20px;
}   
.j-day {
margin-bottom: 20px;
}
.j-day-date {
margin-bottom: 7px;
}
.j-day-date A {
padding: 5px;
background: #D1E861;
text-decoration: none;
font: italic 12px/1.4 Trebuchet MS;
}
.j-day-date A:hover {
text-decoration: underline;
}
.j-day-subjects {
margin-left: 10px;
}   
.j-day-subjects-item{
margin-bottom: 5px;
}
/* Comments
------------------------------------------*/     
.j-e-buttons {
margin: 0 0 20px;
padding: 0;
border: 0;
}     
.j-comments-nav-top {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px dotted #DDD;
}
.j-comments-nav-bottom {
margin-top: 20px;
padding-top: 15px;
border-top: 1px dotted #DDD;
}

.j-readcomments-nav {
margin: 20px 0;
padding: 15px 0;
border: 1px dotted #DDD;
border-width: 1px 0;
}

.j-comments-pages-top {
margin-bottom: 35px;
padding-bottom: 20px;
border-bottom: 1px dotted #DDD;
}   
.j-comments-pages-bottom {
margin: 20px 0;
padding-top: 20px;
border-top: 1px dotted #DDD;
}

.j-w-multyform {
margin-top: 20px;  
padding-top: 20px; 
border-top: 1px dotted #DDD;
}     
.j-c {
margin-bottom: 7px;
}      
.j-c-full {
margin-top: 15px;
}
.j-c-head {
margin-bottom: 10px;
}
.j-c-subject {
font-weight: bold;
}  
.j-c-date {
margin: 5px 0 0;
font: italic 12px/1.4 Trebuchet MS;
color: #999;
} 
.j-c-user-ip {
font: 12px/1.4 Arial;
color: #AAA;
}       
.j-c-multyform-check {
padding-left: 15px;
}    
.j-c-user-pic IMG {
height: auto;
max-width: 70px;
}
.j-c-nav {
padding: 5px 0;
border-top: 1px dotted #DDD;
}   
.j-p-c-screened {
padding: 5px;
border: 1px solid #DDD;
}   
.j-p-c-frozen {
padding: 5px;
border: 1px solid lightblue;
}   
.j-p-c-screened,
.j-p-c-screened .j-c-nav A,
.j-p-c-screened .i-ljuser-username,
.j-p-c-frozen,
.j-p-c-frozen .j-c-nav A,
.j-p-c-frozen .i-ljuser-username  {
font-style: italic;
color: #999;
}    
/* Reply Form
------------------------------------------*/            
#qrform TABLE {
margin: 20px 0;
border: 0 solid !important;
}  
.textbox,
#prop_picture_keyword {
margin: 0 0 7px;
border: 1px solid #DDD;
font: 14px/1.4 Trebuchet MS;
}
#qrform .de,
#postform .de {
font: 12px/1.4 Arial;
color: #AAA;
}

НАСТРОЙКИ
При желании вы можете дополнительно настроить дизайн либо оставить всё как есть : )

1. Меняем фон страницы

Это можно сделать в двумя способами:
а) Прямо в коде. В блоке BODY найдите строчку background-image и в скобках замените адрес картинки
б) Вообще удалите строчку background-image и задайте фон страницы в настройках во вкладке Page → Background image URL

* * *

2. Меняем ширину

Вкладка Page в настройках.

Если хотите фиксированную ширину журнала:
Type of page width → Fixed
И введите желаемую ширину в поле Fixed page width

Если полурезиновую ширину:
Выберите Type of page width → Flexible
Минимальную ширину введите в Min page width, а максимальную - в Max page width

Там же можно настроить ширину сайдбара.

* * *

3. Задаем картинку в шапке

Вкладка Header → URL to the image used in the header

Ниже можно задать высоту картинки и её расположение относительно других элементов.

* * *

4. Выбираем положение меню

Вкладка Header → Position of the menu

* * *

5. Добавить фото в сайдбар (у меня это фото кошки :)
Вкладка Sidebar → Url of the image for the sidebar Profile block

* * *

6. Поменять зеленый на свой цвет

Только автозаменой по коду дизайна. Код цвета: #D1E861

Надеюсь, эти настройки окажутся вам полезны

Спрашивайте, если что-то непонятно

Метки: система стилей: S2, стиль: chameleon, тип: резиновый, цвет: белый, цвет: зелёный

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

первая ссылка какая-то странная. искала стиль через поиск

ооо... Вот я молодец, исправила

(без темы) -

yoksel Развернуть

junaja_ledi Развернуть

Хороший такой! Сочный=)

рада что нравится : )

Скажите, пожалуйста, возможно ли поставить счётчик посещений в облачный дизайн стиля «хамелеон»? Я не нашла, куда вставлять код.

в облачном нет блока для текста в сайдбаре, так что привычным путём - увы, нет

Но можно повесить его в верхний пост либо попробовать задать фоном сайдбару. Будет выглядеть как будто его вставили в самый низ сайдбара. Так тоже должен считать, по идее.

эххх, жалко кот в комплекте не идет, а то б поменяла))))

Да пожалуйста : )

Это моя кошка, тут можно ещё посмотреть: http://yoksel.livejournal.com/1078126.html : )

В журнал вставила для примера, чтобы было понято как будет выглядеть картинка в виджете профиля

am_ba Развернуть

такой совсем весенний )))

Да, совсем не по сезону : )) хотя, может, наоборот - это как раз хороший способ компенсировать сезонную скудость цветов : )

spring625 Развернуть

Ёксель, а не могли бы вы подсказать какие блоки управляют кнопками RSS и Добавить в друзья, и еще можно ли сделать кнопку с количеством комментариев, а не с надписью "столько-то комментариев"? Заранее спасибо!

вас интересуют только эти кнопки или весь блок социконок?

По второму - вы можете управлять надписью, которая ведёт на комменты. Зайдите в настройки в блок Entry и в настройке Link text to read comments задайте # // #.
Получится то что вы хотите

супер..но я тупая и не смогу походу поставить

Доброго дня, спасибо вам за подсказки.
Подскажите как убрать заголовок в журнале? А ещё, если в сайдбар не писать заголовком, то остаются серые полоски, подскажите где цвет поменять!?

hgroup,
.j-w-title {
display: none;
}

notol1 Развернуть

Здравствуйте, Ексель. У меня к вам вот какой вопрос: мне понравился этот стиль по своему строению, но я решила его перекрасить. Фон установила фиолетовый и заменила везде зеленый на фиолетовый. Но, так как зеленый светлее фиолетового, то мне понадобилось поменять и цвет текста. Я нашла, как поменять почти все, но вот слова " метки " и "календарь" упрямо не меняются. Можете подсказать как эти элементы " позвать" ?