Рождественская открытка
Немножко предыстории.
Есть у меня старые открытки из моего детства, в том числе и новогодне-рождественские. Вот по одной из них мне и хотелось сделать дизайн. Все картинки, заготовки «листов бумаги» и прочее были сделаны ещё год назад, но просто старой открытки и бумаги мне было мало, какой-то изюминки не хватало, и код я не написала. А вот сейчас всё придумалось ;)
В этом дизайне есть возможность «подписать открытку» - поздравить своих читателей с Новым годом прямо сразу, как только они откроют страничку. Вот то стихотворение, что написано в шапке журнала - это подзаголовок журнала. На время праздников его можно изменить на поздравление. Но не забывайте о том, что в подзаголовке только 99 символов ;)
Ширина журнала 1020 px, ширина поста 800 px;
полоса навигации и комментарии - в стиле журнала.
Кроме того, код подойдёт и для левого и для правого сайдбара
Как ставить:
1. В профиле найти вкладку «журнал», в выпадающем меню выбрать «стиль журнала».
2. Выбор дизайна - в окошке поиска вбить Unstyled, «поиск», из полученных дизайнов выбрать Expressive.
3. Выбор макета - «2 колонки (боковая панель слева или справа - по желанию)», дальше кнопка «настроить выбранное оформление».
4. Custom CSS, откроется поле для ввода кода Custom stylesheet , туда и надо вставить код, скопированный из окошка (опция Use layout's "Base Weblog" stylesheet /чуть выше окна для ввода кода/ должна быть Yes).
5. Сохранить.
Код:
/*--- Christmas card---*/
/*--- design by irina_chisa from http://community.livejournal.com/irina_diza/ ---*/
/* --- STRUCTURE --- */
body{
background-color: #38534A;
background-image: url(http://img-fotki.yandex.ru/get/4525/28080324.40/0_5c8b7_3177e93a_orig);
background-repeat: repeat;
font-size:17px;
color:#333333;
}
a:link, a font, a b{
color:#666600;
font-weight:bold;
text-decoration:underline;
}
a:visited {
color:#666600;
font-weight:bold;
text-decoration:underline;
}
a:hover, a:hover b{
color:#999933;
font-weight:bold;
text-decoration:none;
}
#container{
width: 1020px !important;
margin:auto;
position:relative;
top:20px;
}
#container-inner{
width: 1020px !important;
}
.layout-tw div#alpha {
margin-right: 0px;
}
.layout-tw div#beta {
margin-left:0px;
text-align: left;
float: left;
}
.layout-wt div#alpha {
margin-left:0px;
}
.layout-wt div#beta {
margin-left: 20px;
text-align: right;
float: right;
}
div#alpha{
width: 820px !important;
}
div#alpha-inner{
width: 820px !important;
padding-left:0px;
margin-left:0px;
}
div#beta{
width: 180px !important;
margin-top:50px;
background-image: url(http://img-fotki.yandex.ru/get/5413/28080324.40/0_5c8b6_a19b74f4_orig);
background-repeat: repeat;
border-bottom:#999966 solid 20px;
}
/* --- HEADER --- */
#header {
background-image:url(http://img-fotki.yandex.ru/get/5314/28080324.40/0_5c8b2_b7ed4ee5_orig);
width:1020px;
height:400px;
background-color:transparent;
}
#header-inner{
margin:0px;
padding:0px;
width:1020px;
text-align:left;
}
.nav {
font-family:Georgia;
font-size:20px;
font-style:italic;
position:absolute;
top:370px;
width:1020px;
}
ul.nav li.item{
border:none;
display:inline;
float:none;
padding:0px 20px;
text-align:center;
}
.nav a{
color: #999966;
font-weight:bold;
text-decoration:none;
}
.nav a:hover {
color: #999966;
font-weight:bold;
text-decoration:underline;
}
#header-name {
font-family:Georgia;
font-size:30px;
font-style:italic;
font-weight:bold;
position:absolute;
top:250px;
left:10px;
width:600px;
text-align:center;
}
#header-name a{
color: #C44C4B;
text-decoration:none;
font-weight: bold;
}
#header-name a:hover{
font-weight:bold;
color:#C44C4B;
text-decoration:none;
}
#header-description{
font-family: Monotype Corsiva;
font-size:30px;
color: #666;
position:absolute;
top:75px;
left:210px;
right:420px;
text-align:center;
}
/* --- ENTRIES --- */
.layout-tw p.prevnext, .skiplinks {
text-align:right;
margin-right:10px;
}
.layout-wt p.prevnext, .skiplinks {
text-align:left;
margin-left:10px;
}
p.prevnext, .skiplinks {
font-family:Georgia;
font-style:italic;
}
p.prevnext a, .skiplinks a {
color:#FFFFCC ;
font-weight:bold;
text-decoration:none;
}
p.prevnext a:hover, .skiplinks a:hover{
color:#CCCC00;
font-weight:bold;
text-decoration:none;
}
.post-asset{
margin-bottom:20px;
margin-top:20px;
width: 820px;
background-image: url(http://img-fotki.yandex.ru/get/5822/28080324.40/0_5c8b3_a5bdd959_orig);
background-repeat: repeat;
}
.asset-inner {
margin-bottom:0px;
margin-top:0px;
width: 820px;
background-image: url(http://img-fotki.yandex.ru/get/5413/28080324.40/0_5c8b4_ea03eb8b_orig);
background-repeat: no-repeat;
background-position: top;
}
div.asset-footer{
background-image: url(http://img-fotki.yandex.ru/get/4714/28080324.40/0_5c8b5_4b332334_orig);
background-repeat: no repeat;
width:820px;
height:25px;
}
div.asset-content{
margin-left:10px;
width: 800px ;
}
h2.page-header2 {
font-weight: bold;
font-family:Georgia;
font-size:20px;
font-style:italic;
color: #C44C4B;
text-align:left;
padding-left:15px;
padding-right:10px;
padding-top:25px;
}
h2.page-header2 a{
font-weight:bold;
color: #C44C4B;
text-decoration:none;
}
h2.page-header2 a:hover{
font-weight:bold;
color:#C44C4B;
text-decoration:none;
}
.user-icon {
float:right;
position:relative;
margin-right:-5px;
margin-bottom:10px;
text-align:center;
background-color:transparent !important;
}
.user-icon span {
background-color:transparent !important;
}
.user-icon img {
padding:1px 1px 1px 1px;
border:#999966 solid 5px;
}
div.asset-header li.item span {
font-size:14px;
font-weight:bold;
color:#996633;
}
div.asset-tags h4{
font-weight:bold;
color: #996633;
}
.asset-tags-list {
font-size:12px;
}
.asset-tags-list li.item a:hover {
text-decoration:none;
background-color:transparent;
color:#999933;
}
div.lj-currents {
font-size:14px;
color:#333333;
}
span.entryMetadata-label{
font-size:14px;
color: #996633;
}
ul.asset-meta-list{
margin-left:10px;
}
/* --- SIDEBAR --- */
.widget {
font-size:15px;
color:#663300;
}
h3.widget-header {
font-weight: bold;
font-family:Georgia;
font-size:18px;
font-style:italic;
color: #FFFFCC;
background-color: #999966;
padding-bottom: 2px;
}
h3.widget-header a{
font-weight:bold;
color: #FFFFCC;
text-decoration:none;
}
h3.widget-header a:hover {
font-weight:bold;
text-decoration:none;
color: #FFFFCC;
}
div.about-me-widget div.user-pic{
width:100%;
}
div.about-me-widget div.user-pic img{
padding:1px 1px 1px 1px;
border:#999966 solid 5px;
background-color: #F3E7B4;
}
ul.widget-list a{
font-weight:bold;
font-size:15px;
text-decoration:none;
}
div.calendar-widget{
font-size:14px;
}
.powered-widget{
display: none;
}
/* --- COMMENT --- */
div#comments{
width: 820px;
background-image: url(http://img-fotki.yandex.ru/get/5822/28080324.40/0_5c8b3_a5bdd959_orig);
background-repeat: repeat;
}
.comments-inner {
width: 820px;
margin-top:0px;
background-image: url(http://img-fotki.yandex.ru/get/5413/28080324.40/0_5c8b4_ea03eb8b_orig);
background-repeat: no-repeat;
background-position: top;
}
.comment-odd{
border:#B89201 solid 0px;
border-bottom: #666 2px dashed;
}
.comment-even {
border:#B89201 solid 0px;
border-bottom: #666 2px dashed;
}
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;
}
div.comment-links {
margin-right:5px;
margin-bottom:5px;
padding-bottom:5px;
}
/* --- CONTROLSTRIP --- */
.w-cs {
background-color: #38534A;
}
.w-cs A:link,
.w-cs A:visited,
.w-cs A:active {
color: #fffddf !important;
}
.w-cs A:hover{
color: #CCCC00 !important;
}
.w-cs a b{
color: #999933 !important;
}
.w-cs a:hover b{
color: #CCCC00 !important;
}
.w-cs-status p {
color: #fffddf !important;
}
.w-cs .w-cs-userinfo {
background: transparent !important;
border-right: solid #f5f5dc 0px;
}
.w-cs-summary {
background: #999966 !important;
}
.w-cs .w-cs-summary LI.w-cs-i-tokens {
border-right: 1px solid #E3E1BA;
}
.w-cs input.text {
background: #999966;
}
.w-cs FORM.w-cs-search label.placeholder-label {
color: #fffddf !important;
}
Если берёте дизайн, в профиле, в разделе «о себе» должен стоять кредит (авторство дизайна)
Дизайн журнала
Или код кнопки
http://community.livejournal.com/irina_diza/">
P.S. Я всегда делаю дизайны с комментами в стиле журнала. Кто не менял диз в последнее время, у того комменты остались в стиле. А в последнее время при установке нового диза, наверное из-за работ в ЖЖ, эта настройка слетает. Зайдите на страничку настройки стиля
http://www.livejournal.com/customize/options.bml
и поставьте напротив Disable customized comment pages for your journal "No"
комменты опять станут в стиле журнала.