Зелёный хамелеон (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

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

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

Post a new comment
Error

Anonymous comments are disabled in this journal
ramblerID

We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

Anonymously

switch

ramblerID

LiveJournal

Facebook

Twitter

OpenId

Google

MailRu

VKontakte

Anonymously

default userpic

Your reply will be screened

Your IP address will be recorded

Preview comment

Help
47 comments

Post a new comment
47 comments

Log in

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

Новые плюшки в генераторе дизайнов

И ещё одна новость из генератора

Новые макеты

Error

Новые плюшки в генераторе дизайнов

И ещё одна новость из генератора

Новые макеты