Зелёный хамелеон (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
Надеюсь, эти настройки окажутся вам полезны
Спрашивайте, если что-то непонятно