Красная лента (S2)

14 апреля 2013

Красная лента (S2)

Увеличить

Внимание!
Код - это заготовка для дизайна, в которой вы можете добавить свои картинки и настроить ширину.
Сайдбар есть, его можно включить и выключить.

Вид дизайна по умолчанию:

А вот так можно его настроить:

Разумеется, фон и картинка в шапке могут быть любыми : )

Как ставить и настраивать?

Вы можете установить его из каталога стилей ЖЖ либо следуйте инструкции ниже.

Установите Unstyled 01 или Unstyled 02

Далее: Custom CSS

В поле Custom stylesheet вставляется код:

/* 
Design by Yoksel @http://community.livejournal.com/journals_covers/
*/

@font-face {
  font-family: 'Oranienbaum';
  font-style: normal;
  font-weight: 400;
  src: local('Oranienbaum'), local('Oranienbaum-Regular'), url(http://themes.googleusercontent.com/static/fonts/oranienbaum/v1/WyaFSM_en0pjtlmUWwS7GSfE9Gpc2xZQgtwyMvPhThE.woff) format('woff');
}

BODY {
    background-color: #EEE;
    font: 14px/1.4 Verdana, sans-serif;
    color: #111;
}

A {
    -webkit-transition: all .3s;
       -moz-transition: all .3s;
            transition: all .3s;
    text-decoration: underline;
    color: #000;
    }
.j-e-text A:visited,
.j-w-content A:visited {
    color: #888; 
    }
A:hover,
.j-e-text A:hover,
.j-w-content A:hover {
    text-decoration: none;
    color: #C02431; 
    }

H1 {font-size: 42px; 
    font-family: 'Oranienbaum', Georgia;
    }
H2 {font-size: 38px; 
    font-family: 'Oranienbaum', Georgia;
    }
    .j-user-journal-title {
        font-size: 45px
        }
    .j-p-title-more-than-25 {
        font-size: 42px
        }    
    .j-p-title-more-than-50 {
        font-size: 40px
        }    
H3 {font-size: 33px;
    font-family: 'Oranienbaum', Georgia
    }
H4 {font-size: 28px;
    font-family: 'Oranienbaum', Georgia
    }

/* Common
------------------------------*/
.j-w-calendar-arr {
    border-color: transparent #333;
    }
.disabled .j-w-calendar-arr {
    border-color: transparent #ddd;
    }
.j-l-page {
    margin-bottom: 0;
    background: transparent;
    }
.j-l-header,
.j-l-beta-inner,
.j-l-alpha-content,
.j-l-footer {
    margin-bottom: 30px;
    padding: 20px;
    background: #FFF;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
    .j-p-menu-inheader_top .j-l-header {
        padding: 10px 20px 20px;
        } 
        .j-p-menu-inheader_bottom .j-l-header {
        padding: 20px 20px 10px;
        } 
    .j-p-menu-inheader_top .j-p-header-image-middle,
    .j-p-menu-inheader_top .j-p-header-image-top {
        padding: 20px;
        }  
.j-w-journal-nav {
    width: auto;
    border: 0;
    }
    .j-l-header .j-w-journal-nav {
        margin: 0;
        padding: 0
        }
        .j-header-nav .j-journal-nav-item {
            margin-right: 15px;
            }
/* Header
------------------------------*/
.j-l-header {
    }
.j-l-header .j-w-journal-nav {
    height: 47px;
    overflow: hidden;
    border: 3px solid #C02431;
    border-width: 0 0 3px;
    }    
    .j-l-header .j-p-inheader_bottom-nav,
    .j-p-header-image-middle .j-p-inheader_top-nav {
        border-width: 3px 0 0;
        } 
    .j-p-header-image-middle .j-p-inheader_bottom-nav {
        border-width: 0 0 3px;
        }     
    .j-l-header .j-p-inheader_bottom-nav {
        margin-top: 15px;
        }    
        .j-p-header-image-middle .j-p-inheader_bottom-nav {
            margin-top: 10px;
            }    
.j-journal-nav-item {
    position: relative;
    }
@media only screen and (max-width: 1020px) {
    .j-header-nav-item-website {
        display: none;
        }
        .j-p-no-sidebar .j-header-nav-item-website,
        .j-p-social-networks-text .j-header-nav-item-website {
            display: block;
            }
    }   
@media only screen and (max-width: 1190px) {
    .j-header-nav-item-memories {
        display: none;
        }
        .j-p-no-sidebar .j-header-nav-item-memories,
        .j-p-social-networks-text .j-header-nav-item-memories{
            display: block;
            }
    }      
.j-l-header .j-w-journal-nav A {
    text-decoration: none;
    font: 22px/47px 'Oranienbaum', Georgia;
    }
    .j-l-header .j-journal-nav-item-current:after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        width: 0;
        height: 0;
        margin-top: -8px;
        margin-left: -4px;
        border: 4px solid transparent;
        border-bottom-color: #C02431;
        }
        .j-l-header .j-p-inheader_bottom-nav .j-journal-nav-item-current:after,
        .j-p-header-image-middle .j-p-inheader_top-nav .j-journal-nav-item-current:after {
            top: 0;
            margin-top: 0;
            border-color: transparent;
            border-top-color: #C02431;
            }
            .j-p-header-image-middle .j-p-inheader_bottom-nav .j-journal-nav-item-current:after {
                top: auto;
                bottom: 0;
                border-color: transparent;
                border-bottom-color: #C02431;
                }
    .j-l-header .j-journal-nav-item-current A {
        color: #C02431;
        }
    .j-header-nav A:hover {
        text-decoration: underline;
        }
.j-header-user {
    margin-bottom: 0;
    }
    .j-p-menu-inheader_top .j-header-user {
        margin-top: 20px;
        } 
    .j-user-journal-title {
        text-align: center;
        line-height: 1.2;
        }
        .j-user-journal-title A {
            text-decoration: none;
            }
    .j-user-journal-subtitle {
        margin-top: 10px;
        text-align: center;
        color: #999;
        }    
    .j-header-user-pic {
        display: none;
        }
    .j-header-user-name {
        display: none;
        } 
.j-w-header-image {
    margin: 0;        
    }
.j-w-header-image-inner {
    border-radius: 3px;
    }        
.j-p-header-image-top .j-w-header-image {
    margin: 0 0 10px;
    }      
    .j-p-menu-in_beta .j-p-header-image-top .j-w-header-image {
        margin: 0 0 15px;
        } 
.j-p-header-image-middle .j-w-header-image {
    margin: 20px 0;
    }
    .j-p-menu-in_beta .j-p-header-image-middle .j-w-header-image,
    .j-p-header-image-bottom .j-w-header-image {
        margin: 20px 0 0;
        }
.j-p-menu-inheader_top .j-p-header-image-middle .j-w-header-image,
.j-p-menu-inheader_bottom .j-p-header-image-bottom .j-w-header-image  {
    margin: 0;
    }        
.j-p-menu-inheader_bottom .j-p-header-image-middle .j-w-header-image {
    margin: 20px 0 0;
    }        
/* Socials
------------------------------*/
.j-social-networks-nav-item {
    background-image: url(http://img-fotki.yandex.ru/get/6428/5091629.86/0_742a2_54ca4359_orig);
    }
    .j-social-networks-nav-item:hover {
    background-image: url(http://img-fotki.yandex.ru/get/5627/5091629.86/0_742a3_2bed96c6_orig);
    }
.j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-small, 
.j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-big, 
.j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-small, 
.j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-big {
    right: 20px;
    }
.j-p-menu-in_beta .j-l-header .j-w-social-networks-nav-small, 
.j-p-menu-in_beta .j-l-header .j-w-social-networks-nav-big {
    margin-bottom: 5px;
    }
.j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-big {
     margin-top: 5px;
    } 
.j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-big {
    margin-top: 25px;
    }
.j-p-menu-inheader_top .j-l-header .j-w-social-networks-nav-small {
    margin-top: 16px;
    } 
.j-p-menu-inheader_bottom .j-l-header .j-w-social-networks-nav-small {
    margin-top: 34px;    
    }    
/* Footer
------------------------------*/
.j-l-footer A {
        font-size: 22px;
        font-family: 'Oranienbaum', Georgia;
        }    
/* Beta
------------------------------*/
.j-beta-w {
    border: 0;
    }
    .j-beta-w:last-child {
        margin-bottom: 0;
        }
.j-p-in_beta-nav {
    }
    .j-p-in_beta-nav A {
        display: block;
        padding: 0 15px;
        margin-bottom: 3px;
        border-radius: 3px;
        text-decoration: none;
        font-size: 24px;
        font-family: 'Oranienbaum', Georgia;
        color: #333;
        }
        .j-p-in_beta-nav A:hover {
            background: #f5f5f5;
            color: #000;
            }
        .j-p-in_beta-nav .j-journal-nav-item-current A {
            background: #C02431;
            color: #FFF;
            }
.j-w-title {
    position: relative;
    height: 38px;
    margin: 0 14px 25px -29px;
    padding-left: 24px;
    background: #C02431;
    font-size: 25px;
    line-height: 37px;
    }
    .j-w-title:before {
        position: absolute;
        display: block;
        top: 100%;
        left: 0;
        content: "";
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-color: #83141D #83141D transparent transparent;
        }
    .j-w-title:after {
        position: absolute;
        display: block;
        top: 0;
        right: -22px;
        content: "";
        width: 0;
        height: 0;
        border: 19px solid #C02431;
        border-color: #C02431 transparent #C02431 #C02431;
        }
    .j-w-title,    
    .j-w-title A {
        text-decoration: none;
        text-shadow: 2px 0 2px rgba(85, 0, 0, 0.44);
        color: #FFF;
        }
.j-w-content {
    font-family: Verdana, sans-serif
    }
    .j-w-content A {
        font-family: Georgia, serif
        }
.j-w-tags .j-w-item {
    margin-bottom: 8px;
    line-height: 1.2;
    }   
    .j-p-tagcloud .j-w-item {
        margin-bottom: 0;
        }  
.j-w-profile-name {
    line-height: 1;
    }        
.j-w-profile-text {
    margin-top: 7px;
    }
/* Calendar
------------------------------*/
.j-w-calendar-nav {
    margin-bottom: 15px;
    }
.j-calendar-table {
    border-spacing: 0;
    }
    .j-calendar-weekday {
        padding: 0;
        }
        .j-calendar-weekdays SPAN {
            display: block;
            padding: 3px 0;
            background-color: #EEE;
            font-size: 12px;
            }
        .j-calendar-weekday-1 SPAN {
            border-radius: 7px 0 0 7px;
            }
        .j-calendar-weekday-7 SPAN {
            border-radius: 0 7px 7px 0;
            }        
    .j-calendar-table TD {
        padding: 5px 0;
        }           
        .j-calendar-table TR:last-child TD {
            border: 0;
            }
        .j-calendar-table TD A {
            display: block;
            max-width: 2.1em;
            margin: 0 auto;
            padding: 3px 0;
            background-color: #EEE;
            border-radius: 50%;
            text-decoration: none;
            font-family: Verdana, sans-serif;
            } 
            .j-calendar-table TD A:hover {
                background: #C02431;
                color: #FFF;
                }
/* Entry
------------------------------*/
.j-e {
    position: relative;
    }
    .j-p-userpic-left .j-e {
        padding-top: 43px;
        }
        .j-p-userpic-left .j-e-years,
        .j-p-userpic-left .j-e-month,
        .j-p-userpic-left .j-e-tags-page,
        .j-p-userpic-left .j-e-reply-container {
            padding-top: 0;
            }
    .j-e:last-child {
        margin-bottom: 10px;
        }
.j-e-date {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    height: 28px;
    margin: 0 -23px 15px -29px;
    padding: 0 5px 0 24px;
    background: #C02431;
    font-size: 15px;
    line-height: 27px;
    font-family: 'Oranienbaum', Georgia;
    color: #fff;
    }
    .j-p-userpic-left .j-e-date {
        position: absolute;
        }
    .j-e-date:before {
        position: absolute;
        display: block;
        top: 100%;
        left: 0;
        content: "";
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-color: #83141D #83141D transparent transparent;
        }
    .j-e-date:after {
        position: absolute;
        display: block;
        top: 0;
        right: -28px;
        content: "";
        width: 0;
        height: 0;
        border: 14px solid #C02431;
        border-color: #C02431 transparent #C02431 #C02431;
        }
.j-e-user {
    }
    .j-e-user-pic {
        background: #FFF;
        border: 1px solid #EEE;
        }
    .j-e-user-pic IMG {
        width: 100%;
        max-width: 70px;
        height: auto;
        }
    .j-e-user-name {
        max-width: 120px;
        margin: 5px auto;
        }
    .j-e-user .wrote {
        display: none;
        }
.j-e-title {
    line-height: 1.2;
    clear: top;
    }    
    .j-e-title A {
        text-decoration: none;
        }    
.j-e-reposted-by {
    margin: 7px 0 0;
    }    
.j-e-text {
    margin: 15px 0 25px ;
    }
    .j-e-text BLOCKQUOTE {
        margin: 5px 15px;
        padding: 0 10px;
        border-left: 3px solid #EEE;
        font-style: italic;
        }
.j-e-meta {
    margin: 25px 0;
    }  
    .j-e-meta SPAN {
        font: italic 12px/1.4 Verdana, sans-serif;
        color: #CCC;
        }       
    .j-e-meta A {
        color: #CCC;
        }
.j-e-nav {
    margin: 0;        
    padding: 10px 0 0;
    border-top: 1px dotted #CCC;
    text-align: center;
    }
    .j-e-nav-item {
        float: none;
        display: inline;
        }
        .j-e-nav-item-mem_add,
        .j-e-nav-item-edit_tags,
        .j-e-nav-item-watch_comments,
        .j-e-nav-item-unwatch_comments {
            display: none;
            }
    .j-e-buttons {
        margin: 0;        
        padding: 0;
        }
    .j-e-nav A {
        font-size: 18px;
        font-family: 'Oranienbaum', Georgia;
        color: #333;
        }
        .j-e-nav A:hover {
            color: #555;
            }
    .j-e-nav-item-comments B {
        display: inline-block;
        width: .5em;
        height: 1em;
        overflow: hidden;
        margin-left: -.1em;
        }
        .j-e-nav-item-comments B:before {
            content: "*"
            }
/* Lj-cut
------------------------------*/   
.ljcut-link {
    display: inline-block;
    margin: 3px 0;
    padding: 3px 5px;
    background: #EEE;
    border: 1px solid #DDD;
    border-radius: 5px;
    box-shadow: inset 2px 2px 6px #FFF;
    text-shadow: 0 1px 1px #FFF;
    }          
    .ljcut-brace {
        display: none;
        }  
        .ljcut-link A {
            text-decoration: none;
            }
/* Tags
------------------------------*/   
.j-e-tags-page {
    font-family: Georgia, serif
    }
/* Archive    
------------------------------*/   
.j-years-nav {
    margin-bottom: 20px;
    }
.j-years-nav-item {
    font: 25px/1.4 'Oranienbaum', Georgia;
    }
    .j-years-nav-item-current {
        color: #C02431;
        }
.j-e-years {
    padding: 0;
    }   
    .j-p-calendar-place-page {
        min-height: 16em;
        }
    .j-e-years .j-calendar-month A {
        font: normal 20px/1.4 'Oranienbaum', Georgia;
        }
/* Month
------------------------------*/     
.j-month-nav A,
.j-month-nav SELECT,
.j-month-nav INPUT {
    vertical-align: middle;
    }
    .j-month-nav-item {
        display: inline-block;
        width: 0;
        height: 0;
        overflow: hidden;
        border: 10px solid transparent;
        text-decoration: none;
        }
        .j-month-nav-item-prev {
            border-right-color: #C02431;
            }
            .j-month-nav-item-prev:hover {
                border-right-color: #333;
                }
        .j-month-nav-item-next {
            border-left-color: #C02431;
            }    
            .j-month-nav-item-next:hover {
                border-left-color: #333;
                }              
.j-day-date {
    font: normal 22px/1.5 'Oranienbaum', Georgia;
    }       
/* Comments
------------------------------*/    
.j-l-comments {
    position: relative;
    } 
.j-e-buttons {
    margin-bottom: 15px;
    border-top: 0;
    }         
.j-comments-pages {
    padding: 15px 0;
    border: 1px dotted #CCC;
    border-width: 1px 0;
    font: 18px/33px 'Oranienbaum';
    color: #AAA;
    }   
    .j-comments-pages-bottom {
        margin: 15px 0 35px;
        }
    .j-comments-pages-current {
        display: inline-block;
        min-width: 1em;
        border-radius: 50%;
        font: 22px/33px 'Oranienbaum', Georgia;
        }
    .j-comments-prev-post A:before,
    .j-comments-next-post A:after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        -webkit-transition: border-color .3s;
           -moz-transition: border-color .3s;
                transition: border-color .3s;
        }
        .j-comments-prev-post A:before {
            margin-right: 3px;
            border-right-color: #333;
            }
            .j-comments-prev-post A:hover:before {
                border-right-color: #C02431;
                }
        .j-comments-next-post A:after {
            margin-left: 3px;
            border-left-color: #333;
            }
            .j-comments-next-post A:hover:after {
                border-left-color: #C02431;
                }                
.j-comments-nav-bottom {
    margin: 30px 15px 20px;
    }
.j-c {
    }     
    .j-c-head {
        background: #E2E2E2;
        border-radius: 0 3px 3px 0;
        }
    .j-c-full:nth-of-type(odd) .j-c-head {
        background: #EEE;
        }
    .j-c-user-pic {
        padding: 1px;
        border: 0;
        }   
    .j-c-controls {
        padding: 7px 10px;
        }
    .j-c-text {
        padding: 10px 0;
        font-family: Arial, sans-serif
        }
    .j-c-nav {
        padding: 5px 0;
        border-top: 1px dotted #DDD;
        }    
#qrformdiv {
    position: relative;
    margin: 15px 0;
    padding: 5px 15px;
    background: #F8F8F8;
    border: 3px solid #C02431;
    border-width: 3px 0; 
    }
     #qrformdiv:before {
        content: " ";
        display: block;
        position: absolute;
        left: 50%;
        margin: -5px 0 0 -5px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: #C02431;
        }
.j-w-multyform {
    margin: 20px 15px;
    }           
/* Reply
------------------------------*/ 
.j-c-reply-form-container {
    padding: 15px;
    }
    #commenttext {
        width: 95%;
        }

Меняем фон

Настройки дизайна, вкладка Page
Поле Background image URL
Картинка фона: http://img-fotki.yandex.ru/get/5644/5091629.86/0_7429d_515e18f_-1-XXL.jpg.jpg
Источник: http://webtreatsetc.deviantart.com/art/8-Tileable-Dark-Wood-Textures-157039499

Вставляем заглавную картинку

Вкладка Header
Поле URL to the image used in the header
Картинка в шапке: http://img-fotki.yandex.ru/get/6442/5091629.86/0_742a1_4a368ae9_XXXL.jpg.jpg
Источник: http://newevolutiondesigns.com/35-hd-black-white-widescreen-backgrounds

Больше про настройку Хамелеона можно найти тут

Пользуйтесь : )

Если берёте дизайн, обязательно установите
в профиль в поле «О себе» ссылку на сообщество

Код ссылки:

Как установить ссылку?
Выбрать кнопку или баннер

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

Похожие посты

Вступите в сообщество, чтобы увидеть все дизайны

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

← назад

вперёд →

(без темы) - (Анонимно)

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

немного поправила код, чтобы увеличить белое поле шапки над заглавной картинкой, можете ещё раз взять код из поста

спасибо)

Замечательно :)

(без темы) -

yoksel Развернуть

celesto Развернуть

Спасибо! Взял поносить, как обычно. Но с фоном, который мне подарил

Эдуард Гавайлер

Edited at 2013-04-15 03:52 (UTC)

симпатично : )

имеет смысл увеличить ширину сайдбара, чтобы не торчал виджет инстаграма и в настройках Css включить использование base.css

а у меня чтот нифига, цсс похоже не подхватывается

если бы будете вставлять в комменты вот это вот, они регулярно будут попадать в спам.

проверьте, что вы вставили код один раз

А можно такой шрифт использовать в Хамелеоне? И если да, то где он «прячется»?

Можно, это Хамелеон

код шрифта вот:

@font-face {
font-family: 'Oranienbaum';
font-style: normal;
font-weight: 400;
src: local('Oranienbaum'), local('Oranienbaum-Regular'), url(http://themes.googleusercontent.com/static/fonts/oranienbaum/v1/WyaFSM_en0pjtlmUWwS7GSfE9Gpc2xZQgtwyMvPhThE.woff) format('woff');
}

Про кастомные шрифты в дизайне ЖЖ есть вот тут

dimovoi Развернуть

.j-e-text {
text-align: justify;
}

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

уроки по кодам дизайнов http://journals-covers.livejournal.com/78018.html - если хотите писать коды сами
генератор стилей: http://lj.yoksel.ru/ - выдает готовый код по вашим параметрам

вижу, что с генератором вы уже познакомились. И картинки и шрифты меняются прямо в настройках генератора

Edited at 2013-04-19 19:23 (UTC)

zazerkalie_box Развернуть

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

Спасибо!
Примерил, буду переделывать под себя.

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

только надо одну настройку поправить: зайдите в Custom Css и рядом с Use base.css выберите Yes, а то блоки слиплись кое-где

ognnik Развернуть

спасибо за дизайн! встал как нельзя лучше, радуюсь))

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

Спасибо! Отлично выглядит!

*шёпотом* так и не допетрил, как можно поменять цвет тегов, которые отображаются под записью...

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

найдите и отредактируйте в кодах:

.j-e-meta SPAN {
font: italic 12px/1.4 Verdana, sans-serif;
color: #CCC;
}
.j-e-meta A {
color: #CCC;
}

little_bigfoot Развернуть

http://www.livejournal.com/customize/options.bml?group=sidebars
в первой выпадушке Yes

(без темы) - (Анонимно) Развернуть

Спасибо за дизайн)

Edited at 2013-05-29 18:36 (UTC)

: )

Взяла! Большое спасибо!

Пожалуйста : )

Большое спасибо!
Скажите, пожалуйста, есть ли возможность заглавную картинку растянуть на всю шапку? как бы под текст названия журнала. Либо как отрегулировать размер своего изображения, который хочу вставить в шапку?

растянуть картинку - не стоит, потому что растянутые картинки плохо выглядят. Вы можете заранее подготовить изображение нужного размера, а также задать фиксированную ширину журнала, подходящую для вашей картинки

predatelniza Развернуть

Обложки для журналов
от Yoksel

Дизайны для ЖЖ

Красная лента (S2)

Как ставить и настраивать?

Меняем фон

Вставляем заглавную картинку

Похожие посты

Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Красная лента (S2)

Как ставить и настраивать?

Меняем фон

Вставляем заглавную картинку

Похожие посты

Log in