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

Увеличить

Как ставить

Нажмите на ссылку 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

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

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

promo

journals_covers august 1, 2013 11:15 62

Buy for 200 tokens

Новое в ЖЖ: перевод настроек

У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…

Log in

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

Error

Log in

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

Community Info

Error