Два дизайна: первый - с тремя разными фонами и любым вертикальным сайдбаром (боковой колонкой), второй - с горизонтальным сайдбаром.
Ширина журнала - 1000px, ширина записей первого дизайна - 770, второго - 950.
Комменты в стиле журнала, подзаголовка нет.
Фоны -
lenagold Как ставить:
1. В профиле найти вкладку «журнал», в выпадающем меню выбрать «стиль журнала».
2. Выбор дизайна - в окошке поиска вбить Unstyled, «поиск», из полученных дизайнов выбрать Expressive.
3. Выбор макета - «2 колонки (боковая панель слева или справа - по желанию)», дальше кнопка «настроить выбранное оформление».
4. Custom CSS, откроется поле для ввода кода Custom stylesheet , туда и надо вставить код, скопированный из окошка (опция Use layout's "Base Weblog" stylesheet /чуть выше окна для ввода кода/ должна быть Yes).
5. Сохранить.
Код для «вертикального»:
/*--- women's stuff-1 ---*/
/*--- design and foto by irina_chisa from
http://community.livejournal.com/irina_diza/ ---*/
/*--- background
http://www.lenagold.ru/ ---*/
/* --- STRUCTURE --- */
body{
background-color:#666;
background-image: url(
http://img-fotki.yandex.ru/get/2710/28080324.43/0_5f109_3a3f6cc7_orig); background-image: url(
http://img-fotki.yandex.ru/get/9309/28080324.75/0_82631_7bdea16c_orig); background-image: url(
http://img-fotki.yandex.ru/get/9762/28080324.75/0_82632_e0392ca5_orig); background-repeat: repeat;
background-attachment: fixed;
font-family: Arial;
font-size:16px;
color:#333333;
}
a:link, a:visited, a font, a b{
color:#999;
font-weight:bold;
text-decoration:underline;
}
a:hover, a:hover b{
color:#990033;
font-weight:bold;
text-decoration:none;
}
#container{
width: 1000px !important;
border:#666 solid 0px;
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-color:#666;
background-image:url(
http://img-fotki.yandex.ru/get/4611/28080324.43/0_5f074_911d5727_orig);background-repeat: no-repeat;
background-position: center;
width:1000px;
height:300px;
border-bottom:#ddd solid 10px;
}
#header-inner{
margin:0px;
padding:0px;
width:1000px;
text-align:center;
}
ul.nav{
font-family: Segoe UI;
font-size:20px;
position:absolute;
top:255px;
left:0px;
height: 38px;
text-align:center;
width: 100%;
border:0px solid red;
}
.nav .item{
padding: 0px 0px 0px 0px;
left: 0px;
border: 0px solid red;
width: 18%;
margin: 0px 1%;
height: 36px;
}
.nav .current a{
color: #fff;
}
.nav a{
color: #ccc;
font-weight:bold;
text-decoration:none;
}
.nav a:hover {
color: #CC9999;
font-weight:bold;
text-decoration:none;
}
#header-name {
font-family: Segoe UI;
font-size:30px;
font-weight:bold;
font-style:italic;
text-align:center;
position:absolute;
right:5x;
left:5px;
top:5px;
width:990px;
}
#header-name a{
color: #CC9999;
text-decoration:none;
font-weight: bold;
}
#header-description{
display: none;
}
/*--- 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;
font-style:italic;
font-size:22px;
color:#CC0000;
}
h2.page-header2 a{
font-weight:bold;
color:#CC0000;
text-decoration:none;
}
h2.page-header2 a:hover{
font-weight:bold;
color:#CC0000;
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-head li.item span {
font-size:14px;
font-style: italic;
font-weight:bold !important;
color: #CC9999;
}
div.asset-header-content-inner{
width: 655px ;
}
span.entryMetadata-label,
div.asset-tags h4{
font-size:14px !important;
color: #CC9999;
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:#990033;
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: #CC0000;
margin-top:10px;
}
h3.widget-header a{
font-weight:bold;
color: #CC0000;
text-decoration:none;
}
h3.widget-header a:hover {
font-weight:bold;
text-decoration:none;
color: #CC0000;
}
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: #CC9999;
font-weight:bold;
text-decoration:none;
display: block;
width: 100%;
}
div.calendar-widget td a:hover {
color:#ffffff;
background-color:#CC9999;
display: block;
width: 100%;
}
/* --- COMMENT --- */
.comment {
padding-bottom:5px;
padding-top:5px;
}
.comment-odd{
border:#fff solid 0px;
background-color:#eee;}
.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;
}
Все три фона сразу вставлены в код - в самом начале кода, в блоке body находятся три кодовых строчки со ссылками на картинку фона. Вам нужно стереть две ненужные. Если оставить три, выполняться будет последняя, но при загрузке странички всё равно будет две лишних (хоть и невидимых) скачки картинки, а оно вам нужно?
body{
…
background-image: url(адрес фона - антрацитовый занавес);
background-image: url(адрес фона - красный занавес);
background-image: url(адрес фона - антрацитовые обои);
…
}
Код для «горизонтального»:
/*--- women's stuff-2 ---*/
/*--- design and foto by irina_chisa from
http://community.livejournal.com/irina_diza/ ---*/
/*--- background
http://www.lenagold.ru/ ---*/
/* --- STRUCTURE --- */
body{
background-color:#ccc;
background-image: url(
http://img-fotki.yandex.ru/get/9299/28080324.75/0_82633_33b5a3e6_orig);background-repeat: repeat;
background-attachment: fixed;
font-family: Arial;
font-size:16px;
color:#333333;
}
a:link, a:visited, a font, a b{
color:#999;
font-weight:bold;
text-decoration:underline;
}
a:hover, a:hover b{
color:#990033;
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: 250px;
left:0px;
display: block;
margin: 0px 0px 0px 0px;
float: none;
position: absolute;
}
div#beta-inner{
background-color: #ddd;
height: 240px;
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: 250px 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-color:#ddd;
background-image:url(
http://img-fotki.yandex.ru/get/2708/28080324.43/0_5f0cb_6faef955_orig);background-repeat: no-repeat;
background-position: center;
width:1000px;
height:290px;
}
#header-inner{
margin:0px;
padding:0px;
width:1000px;
text-align:center;
}
ul.nav{
font-family: Segoe UI;
font-size:20px;
position:absolute;
top:245px;
left:0px;
text-align:center;
width: 100%;
}
.nav .item{
padding: 0px 0px 0px 0px;
left: 0px;
border: 0px solid red;
width: 18%;
margin: 0px 1%;
height: 30px;
}
.nav .current a{
color: #fff;
}
.nav a{
color: #999;
font-weight:bold;
text-decoration:none;
}
.nav a:hover {
color: #CC9999;
font-weight:bold;
text-decoration:none;
}
#header-name {
font-family: Segoe UI;
font-size:30px;
font-weight:bold;
font-style:italic;
text-align:center;
position:absolute;
width:990px;
right:5x;
left:5px;
top:5px;
}
#header-name a{
color: #CC9999;
text-decoration:none;
font-weight: bold;
}
#header-description{
display: none;
}
/*--- ENTRIES ---*/
p.prevnext, .skiplinks {
text-align:right;
margin-right:15px;
}
.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;
font-style:italic;
font-size:22px;
color:#CC0000;
}
h2.page-header2 a{
font-weight:bold;
color:#CC0000;
text-decoration:none;
}
h2.page-header2 a:hover{
font-weight:bold;
color:#CC0000;
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: #CC9999;
}
div.asset-header-content-inner{
border:0px solid orange;
width: 800px ;
}
span.entryMetadata-label,
div.asset-tags h4{
font-size:14px !important;
color: #CC9999;
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:#990033;
background-color:transparent;
}
/*----SIDEBAR----*/
div.widget {
background-color: #fff;
width: 188px;
margin: 0px 0px 0px 0px;
height: 240px;
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: #CC0000;
margin-top:10px;
}
h3.widget-header a{
font-weight:bold;
color: #CC0000;
text-decoration:none;
}
h3.widget-header a:hover {
font-weight:bold;
text-decoration:none;
color: #CC0000;
}
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 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: #CC9999;
font-weight:bold;
text-decoration:none;
display: block;
width: 100%;
}
div.calendar-widget td a:hover {
color:#ffffff;
background-color:#CC9999;
display: block;
width: 100%;
}
/* --- COMMENT --- */
.comment {
padding-bottom:5px;
padding-top:5px;
}
.comment-odd{
border:#fff solid 0px;
background-color:#eee;}
.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;
}
Если берёте дизайн, в профиле, в разделе «о себе» должен стоять кредит (авторство дизайна)
Дизайн журнала
Или код кнопки
http://community.livejournal.com/irina_diza/">http://img-fotki.yandex.ru/get/5601/irina-chisa.27/0_43cca_fafd5082_orig">
Бонус - 5 юзер-пикчей в стиль :)