Зимний остров

Dec 11, 2012 19:06

Два дизайна: первый - с вертикальным сайдбаром (боковой колонкой) - левым или правым, второй - с горизонтальным сайдбаром.


   





Ширина журнала - 1000px, ширина записей первого дизайна - 770, второго - 950.
Комменты в стиле журнала.
Для полосы навигации выбрать светло-серый градиент


Как ставить:
1. В профиле найти  вкладку «журнал», в выпадающем меню выбрать «стиль журнала».
2. Выбор дизайна - в окошке поиска вбить Unstyled, нажать кнопку «поиск», из полученных дизайнов выбрать Expressive.
3. Выбор макета - «2 колонки (боковая панель слева или справа)», нажать "Применить макет".
4. Вверху страницы в блоке "Действующее оформление пользователя" нажать «Настройте свой стиль».
5. В разделе "Настройте своё оформление нажать "Custom CSS", откроется поле для ввода кода  "Ваш Css" , туда и надо вставить код, скопированный из окошка (опция Use layout's "Base Weblog" stylesheet (использовать стили темы) /чуть выше окна для ввода кода/ должна быть  Yes).
6. Сохранить.

Код для «вертикального»:

/*--- winter island-1 ---*/
/*--- design and foto by irina_chisa from http://community.livejournal.com/irina_diza/ ---*/

/* --- STRUCTURE --- */

body{
background-color:#bbb;
background-image: url(http://img-fotki.yandex.ru/get/4614/28080324.3f/0_5af62_c073f557_orig);
background-repeat: repeat;
background-attachment: fixed;
font-family: Arial;
font-size:16px;
color:#333333;
}

a:link, a:visited, a font, a b{
color:#708090;
font-weight:bold;
text-decoration:underline;
}

a:hover, a:hover b{
color:#4f7942;
font-weight:bold;
text-decoration:none;
}

#container{
width: 1000px !important;
margin:auto;
position:relative;
top:20px;
}

#container-inner{
width: 1000px !important;
background-color:#ddd;
}

div#alpha{
width: 810px !important;
}

div#alpha-inner{
width: 790px !important;
padding-left:0px;
margin-left:10px;!important;
background-color:#ffffff;
}

div#beta{
width: 190px !important;
}
div#beta-inner{
width: 180px !important;
background-color:#ffffff;
width: 180px !important;
padding-bottom:0px;
}

.layout-tw div#beta-inner {
margin-left:10px;
}

.layout-wt div#beta-inner {
margin-right:10px;
}

/* --- HEADER --- */

#header {
background-image:url(http://img-fotki.yandex.ru/get/6611/28080324.58/0_6e029_ddbcdaf6_orig);
background-repeat: no-repeat;
background-position: center;
width:1000px;
height:400px;
}

#header-inner{
margin:0px;
padding:0px;
width:1000px;
height:400px;
text-align:center;
}

ul.nav{
font-family: Segoe UI,Georgia;
font-size:20px;
position:absolute;
top:355px;
left:0px;
height: 38px;
text-align:center;
width: 100%;
}

.nav .item{
padding: 0px 0px 0px 0px;
left: 0px;
width: 18%;
margin: 0px 1%;
height: 36px;
border:none;
}

.nav .current a{
color: #fff;
}

.nav a{
color: #ccc;
font-weight:bold;
text-decoration:none;
}

.nav a:hover {
color: #acb78e;
font-weight:bold;
text-decoration:none;
}

#header-name {
font-family: Segoe UI,Georgia;
font-size:30px;
font-weight:bold;
font-style:italic;
text-align:center;
position:absolute;
right:10x;
left:10px;
top:5px;
width:980px;
}

#header-name a{
color: #fff;
text-decoration:none;
font-weight: bold;
}

#header-description{
font-size:18px;
color: #fff;
font-family: Segoe UI,Georgia;
font-style:italic;
position:absolute;
right:15x;
left:580px;
top:285px;
width:405px;
text-align:right;
}

/*--- ENTRIES ---*/

p.prevnext, .skiplinks {
text-align:right;
margin-right:10px;
}

.asset-inner {
width: 770px;
margin-left:10px;
margin-bottom:20px;
padding-bottom:10px;
border-bottom:#ddd solid 5px;
}

h2.page-header2 {
font-weight: bold;
font-family: Segoe UI,Georgia;
font-style:italic;
font-size:22px;
color:#4682b4;
}

h2.page-header2 a{
font-weight:bold;
color:#4682b4;
text-decoration:none;
}

h2.page-header2 a:hover{
font-weight:bold;
color:#4682b4;
text-decoration:none;
}

.user-icon {
float:right;
position:relative;
margin-right:-5px;
margin-left:5px;
margin-top:-100px;
text-align:center;
background-color:transparent !important;
}

.user-icon span {
background-color:transparent !important;
}

.user-icon img {
padding: 1px;
border:#ccc solid 5px;
}

div.asset-header li.item span {
font-size:14px;
font-style: italic;
font-weight:bold !important;
color: #7b917b;
}

div.asset-header-content-inner{
width: 655px ;
}

span.entryMetadata-label,
div.asset-tags h4{
font-size:14px !important;
color: #7b917b;
font-style: italic;
font-weight: bold;
}

div.lj-currents {
font-size:14px;
color:#333333;
}
div.lj-currents a {
text-decoration:none;
}

.asset-tags-list {
font-size:14px;
}

.asset-tags-list li.item a {
text-decoration:none;
}

.asset-tags-list li.item a:hover {
text-decoration:none;
color:#669966;
background-color:transparent;
}

/*--- SIDEBAR ---*/

.widget {
font-size:14px;
color:#333333;
text-align:center;
margin-bottom:10px;
}

h3.widget-header {
font-weight: bold;
font-family: Segoe UI,Georgia;
font-size:18px;
color: #4682b4;
margin-top:10px;
}

h3.widget-header a{
font-weight:bold;
color: #4682b4;
text-decoration:none;
}

h3.widget-header a:hover {
font-weight:bold;
text-decoration:none;
color: #4682b4;
}

div.about-me-widget div.user-pic{
background-color:transparent;
width:100%;
}

div.about-me-widget div.user-pic img{
padding: 1px;
border:#ccc solid 5px;
}

ul.widget-list a{
font-weight:bold;
text-decoration:none;
}

div.calendar-widget table {
width: 100%;
}

div.calendar-widget th{
text-align:center;
color: #ccc;
}

div.calendar-widget td {
border:#990000 solid 0px;
background-color:#ddd;
text-align:center;
color: #333;
margin:0px;
}

div.calendar-widget td a{
color: #4682b4;
font-weight:bold;
text-decoration:none;
display: block;
width: 100%;
}

div.calendar-widget td a:hover {
color:#ffffff;
background-color:#7b917b;
display: block;
width: 100%;
}

/* --- COMMENT --- */

h2.comments-header.page-header2 {
margin-left:15px;
}

.comment {
padding-bottom:5px;
padding-top:5px;
}

.comment-odd{
border:#fff solid 0px;
background-color:#efefef;
}

.comment-even {
border:#fff solid 0px;
}

div.comment-body {
font-size:15px;
margin-top:10px;
margin-left:5px;
margin-right:5px;
margin-bottom:10px;
}

div.comment-inner div.user-icon {
float:left;
margin-right:5px;
margin-top:0px;
}

div.comment-links {
margin-right:5px;
}

/* --- ARCHIVE --- */

td.yearmonth {
color:#4682b4;
}

li.active{
color:#4682b4;
}

td.yeardate a {
color:# 708090;
}
td.yeardate a:hover {
color:#ffffff;
background-color:#7b917b;
}

Код для «горизонтального»:

/*--- winter island-2 ---*/
/*--- design and foto by irina_chisa from http://community.livejournal.com/irina_diza/ ---*/

/* --- STRUCTURE --- */

body{
background-color:#bbb;
background-image: url(http://img-fotki.yandex.ru/get/4614/28080324.3f/0_5af62_c073f557_orig);
background-repeat: repeat;
background-attachment: fixed;
font-family: Arial;
font-size:16px;
color:#333333;
}

a:link, a:visited, a font, a b{
color:#708090;
font-weight:bold;
text-decoration:underline;
}

a:hover, a:hover b{
color:#4f7942;
font-weight:bold;
text-decoration:none;
}

#container{
width: 1000px !important;
margin:auto;
position:relative;
top:20px;
}

#container-inner{
width: 1000px !important;
background-color:#ddd;
}

#beta {
background-color: #ddd;
width: 1000px;
height: 260px;
left:0px;
display: block;
margin: 0px 0px 0px 0px;
float: none;
position: absolute;
}

div#beta-inner{
background-color: #ddd;
height: 250px;
margin: 0px 0px 0px 0px;
padding:0px;
overflow: hidden;
border-left:10px solid #ddd;
width: 990px;
}

.layout-wt #beta {
margin:0px 0px 0px 0px;
}

#alpha {
width: 1000px;
margin: 260px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float:left !important;
}

#alpha-inner {
position:relative;
background-color: #fff;
width: 980px !important;
margin: 0px 10px 0px 10px;
}

/* --- HEADER --- */

#header {
background-image:url(http://img-fotki.yandex.ru/get/6611/28080324.58/0_6e029_ddbcdaf6_orig);
background-repeat: no-repeat;
background-position: center;
width:1000px;
height:400px;
}

#header-inner{
margin:0px;
padding:0px;
width:1000px;
height:400px;
text-align:center;
}

ul.nav{
font-family: Segoe UI,Georgia;
font-size:20px;
position:absolute;
top:355px;
left:0px;
height: 38px;
text-align:center;
width: 100%;
}

.nav .item{
padding: 0px 0px 0px 0px;
left: 0px;
width: 18%;
margin: 0px 1%;
height: 36px;
border:none;
}

.nav .current a{
color: #fff;
}

.nav a{
color: #ccc;
font-weight:bold;
text-decoration:none;
}

.nav a:hover {
color: #acb78e;
font-weight:bold;
text-decoration:none;
}

#header-name {
font-family: Segoe UI,Georgia;
font-size:30px;
font-weight:bold;
font-style:italic;
text-align:center;
position:absolute;
right:10x;
left:10px;
top:5px;
width:980px;
}

#header-name a{
color: #fff;
text-decoration:none;
font-weight: bold;
}

#header-description{
font-size:18px;
color: #fff;
font-family: Segoe UI,Georgia;
font-style:italic;
position:absolute;
right:15x;
left:580px;
top:285px;
width:405px;
text-align:right;
}

/*--- ENTRIES ---*/

p.prevnext, .skiplinks {
text-align:right;
margin-right:10px;
}

.asset-inner {
width: 950px;
margin-left:15px;
margin-bottom:20px;
padding-bottom:10px;
border-bottom:#ddd solid 5px;
}

h2.page-header2 {
font-weight: bold;
font-family: Segoe UI,Georgia;
font-style:italic;
font-size:22px;
color:#4682b4;
}

div.asset-header-content-inner{
width: 800px ;
}

h2.page-header2 a{
font-weight:bold;
color:#4682b4;
text-decoration:none;
}

h2.page-header2 a:hover{
font-weight:bold;
color:#4682b4;
text-decoration:none;
}

.user-icon {
float:right;
position:relative;
margin-right:-5px;
margin-left:5px;
margin-top:-100px;
text-align:center;
background-color:transparent !important;
}

.user-icon span {
background-color:transparent !important;
}

.user-icon img {
padding: 1px;
border:#ccc solid 5px;
}

div.asset-header li.item span {
font-size:14px;
font-style: italic;
font-weight:bold !important;
color: #7b917b;
}

span.entryMetadata-label,
div.asset-tags h4{
font-size:14px !important;
color: #7b917b;
font-style: italic;
font-weight: bold;
}

div.lj-currents {
font-size:14px;
color:#333333;
}
div.lj-currents a {
text-decoration:none;
}

.asset-tags-list {
font-size:14px;
}

.asset-tags-list li.item a {
text-decoration:none;
}

.asset-tags-list li.item a:hover {
text-decoration:none;
color:#669966;
background-color:transparent;
}

/*----SIDEBAR----*/

div.widget {
background-color: #fff;
width: 188px;
margin: 0px 0px 0px 0px;
height: 250px;
float: left;
font-size:14px;
color:#333333;
text-align:center;
overflow-y: auto;
border-right:10px solid #ddd;
}

div.widget-inner {
width: 100%;
margin: 0px auto;
padding: 10px 0px 0px 0px;
}

.widget .first{
border-left:10px solid #ddd;
}

h3.widget-header {
font-weight: bold;
font-family: Segoe UI,Georgia;
font-size:18px;
color: #4682b4;
margin-top:10px;
}

h3.widget-header a{
font-weight:bold;
color: #4682b4;
text-decoration:none;
}

h3.widget-header a:hover {
font-weight:bold;
text-decoration:none;
color: #4682b4;
}

div.about-me-widget div.user-pic{
background-color:transparent;
width:100%;
}

div.about-me-widget div.user-pic img{
padding: 1px;
border:#ccc solid 5px;
}

ul.widget-list a{
font-weight:bold;
text-decoration:none;
}

div.calendar-widget table {
width: 100%;
}

div.calendar-widget th{
text-align:center;
color: #ccc;
}

div.calendar-widget td {
background-color:#ddd;
text-align:center;
color: #333;
margin:0px;
}

div.calendar-widget td a{
color: #708090;
font-weight:bold;
text-decoration:none;
display: block;
width: 100%;
}

div.calendar-widget td a:hover {
color:#ffffff;
background-color:# 7b917b;
display: block;
width: 100%;
}

/* --- COMMENT --- */

h2.comments-header.page-header2 {
margin-left:15px;
}

.comment {
padding-bottom:5px;
padding-top:5px;
}

.comment-odd{
border:#fff solid 0px;
background-color:#efefef;
}

.comment-even {
border:#fff solid 0px;
}

div.comment-body {
font-size:15px;
margin-top:10px;
margin-left:5px;
margin-right:5px;
margin-bottom:10px
}

div.comment-inner div.user-icon {
float:left;
margin-right:5px;
margin-top:0px;
}

div.comment-links {
margin-right:5px;
}

/* --- ARCHIVE --- */

td.yearmonth {
color:#4682b4;
}

li.active{
color:#4682b4;
}

td.yeardate a {
color:# 708090;
}
td.yeardate a:hover {
color:#ffffff;
background-color:#7b917b;
}

Если берёте дизайн, в профиле, в разделе «о себе» должен стоять кредит (авторство дизайна)

Дизайн журнала

Или код кнопки


http://community.livejournal.com/irina_diza/">http://img-fotki.yandex.ru/get/5601/irina-chisa.27/0_43cca_fafd5082_orig">

дизайн, зима

Previous post Next post
Up