Вот и последний из друзей Оушена цветных парней (несколько нетрадиционный:)).
Here goes the last one of Ocean's friends colour fellows (a bit not straight:)).
Стиль: S2 Smooth Sailing
Тип аккаунта: любой
Разрешение экрана: 1024+ (лучше 1280+)
Посты: резиновые, ширина min. 470px
Браузеры: Mozilla, Chrome, Safari, Opera (в IE7 есть проблемы)
Комментарии в стиле журнала: да
Контрольная панель: включена
Сайдбар: полный
Заголовок и подзаголовок: только заголовок
Style: S2 Smooth Sailing
Account type: all types
Screen Resolution: 1024+ (better 1280+)
Entries: stretch, min. 470px wide
Browsers: Mozilla, Chrome, Safari, Opera (IE7 has some issues)
Comments in journal's style: yes
Controlstrip: enabled
Sidebar: enabled, full
Title & Subtitle: title only
Live preview // вживую:
recent //
friends //
comments 1. В
настройках журнала выбираете тему Smooth Sailing (положение сайдбара - слева!) и жмете кнопку внизу "Customise selected theme ->".
2. В левом меню выбираете пункт
"Custom CSS". В разделе "Page" ставите:
- Use layout's stylesheet(s): Yes
- Use layout's stylesheet(s) when including custom external stylesheet: No
3. В окошко Custom stylesheet вставляете текст:
1. In
Customize section choose Smooth Sailing style (sidebar on the left!) and click "Customise selected theme ->" below.
2. In left menu choose
"Custom CSS". In "Page" section choose:
- Use layout's stylesheet(s): Yes
- Use layout's stylesheet(s) when including custom external stylesheet: No
3. In Custom stylesheet block, insert the following code:
/* Layout #21c: Pink Fellow */
/* Date: February 05, 2010 */
/* S2 Style: Smooth Sailing */
/*--------CREDITS---------*/
/* Design & Codes: Ruthenia Alba (ruthenia_alba.livejournal.com) */
/*-------- BASICS ---------*/
body {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-bg.gif) repeat;
margin:0;
font: normal 13px Lucida Sans Unicode, Arial;
letter-spacing: 0;
}
.body-title,
.body-midtitle {
display: none;
}
.pageblock {
margin: 0;
}
/*-------- a links ---------*/
a, a:visited {
color: #b83050;
text-decoration: none;
}
a:hover {
color: #32312F;
text-decoration: none;
}
/* ----------- CONTENT ----------- */
/* ----------- header ----------- */
.pageheaderblock {
margin-top: 0px;
}
/* ----------- title & subtitle ----------- */
.header-title {
margin: 0 55px 0 0;
padding: 50px 0 0 50px;
background: transparent;
font: normal 20px Lucida Sans Unicode, Arial;
text-transform: uppercase;
letter-spacing: 0;
color: #b83050 !important;
text-align: right;
}
.header-subtitle {
display: none;
}
.header-icon {
display:none;
}
/* ----------- header navigation ----------- */
.header-menu {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header1.png) no-repeat left bottom;
height: 120px;
padding: 0;
margin: -60px 50px 0 100px;
border: 0;
}
.header-menu ul {
align: bottom;
background: transparent;
width: 100%;
padding: 92px 0 0 0;
margin: 0;
text-align: right;
font: normal 14px Lucida Sans Unicode, Arial;
text-transform: uppercase;
}
.header-menu li {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
margin: 0 0 0 10px !important;
padding: 10px 3px;
min-height: 30px !important;
border: 2px #000000 solid;
}
.header-menu li a,
.header-menu li a:visited {
background: transparent;
padding: 7px 15px;
border: #67182b 1px dashed;
color: #32312F;
}
.header-menu li a:hover {
background: transparent;
color: #67182b;
}
/* --------- CONTENT --------------- */
.bodyheaderblock {
margin: 0;
padding: 0;
height: 3px;
background: #000000;
border: 0;
}
.bodyblock {
margin: 0;
padding: 20px 50px;
}
/* --------- SIDEBAR ----------------- */
.sidebar {
width: 220px;
margin: auto 50px auto auto;
}
.sidebox {
font: normal 12px Lucida Sans Unicode, Arial;
color: #32312F;
}
.sidebox a, .sidebox a:visited {
color: #b83050;
text-decoration: none;
}
.sidebox a:hover {
color: #32312F;
text-decoration: none;
}
/* --------- sidebox (calendar, tags): general --------------------------- */
.sideboxTitle {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x;
min-height: 10px !important;
margin: 0;
padding: 10px;
border: 2px solid #000000;
border-bottom: #67182b 1px dashed;
font: normal 14px Lucida Sans Unicode, Arial;
text-transform: uppercase;
color: #32312F;
text-align: center;
}
.sideboxContent {
background: #fff url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-entry-bg.gif) repeat;
padding: 10px 10px 20px 10px;
margin: 0 0 20px 0;
border: 2px solid #000000;
border-top: 0;
font: normal 12px Lucida Sans Unicode, Arial;
}
.profile-userpic {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-bg.gif) repeat;
padding: 5px;
border: solid 1px #DAB49D;
margin-bottom: 10px;
}
/*-----------------------sidebar: tags--------------------------------*/
.sidebox #tags_sidebox {
text-align: left;
}
/* --------- sidebox summary & links ------------ */
.summaryList,
.listitem {
text-align: left;
padding: 5px 0 5px 2px;
border-bottom: 1px solid #67182b !important;
color: #fff;
}
.summaryList b {
font: normal 1px Lucida Sans Unicode, Arial;
}
.summaryList .ljuser b {
font: normal 12px Lucida Sans Unicode, Arial;
}
/* --------- sidebox calendar ------------ */
#latestmonth a {
font: normal 12px Lucida Sans Unicode, Arial;
text-decoration: none;
text-transform: uppercase;
}
.latestmonth-inactive {
margin: 1px;
padding: 5px 2px;
}
.latestmonth-active {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
border: 1px solid #b83050;
padding: 3px;
}
.latestmonth-active a,
.latestmonth-active a:visited {
color: #67182b;
}
.latestmonth-active a:hover {
color: #32312F;
}
/* --------- sidebox search ------------ */
#search form, #search select, #search input {
text-align: left;
font: normal 12px Lucida Sans Unicode, Arial;
margin-bottom: 10px;
}
/* --------- ENTRY --------------------------- */
.entryHolder {
background: #fff url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-entry-bg.gif) repeat;
border: 2px solid #000;
margin-bottom: 20px;
}
.entryUserinfo {
background: #fff;
padding: 2px;
border: #b83050 1px solid;
margin: 15px 5px 10px 15px;
}
.entryUserinfo .ljuser a b {
font: normal 11px Lucida Sans Unicode, Arial;
}
/* --------- entry header: date & subject --------------------------- */
.entryHeader {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x;
min-height: 20px;
padding: 3px 10px;
border: 0;
border-bottom: #67182b 1px dashed;
font: normal 12px Lucida Sans Unicode, Arial;
text-transform: uppercase;
}
.entryHeaderDate {
display:block;
background: transparent;
font: normal 11px Lucida Sans Unicode, Arial;
text-transform: uppercase;
letter-spacing: -1px;
color: #67182b;
margin: 0 0 0 10px;
}
.entryHeaderSubject {
background: transparent;
font: normal 12px Lucida Sans Unicode, Arial;
text-transform: uppercase;
letter-spacing: 0;
color: transparent;
//color: #E14C6E;
}
.entryHeader a,
.entryHeader a:visited,
.entryHeaderSubject a,
.entryHeaderSubject a:visited {
color: #32312F;
}
.entryHeader a:hover,
.entryHeaderSubject a:hover {
color: #67182b;
}
/* --------- entry text --------------------------- */
.entryText, .commentText {
padding: 10px 20px 10px 10px;
color: #32312F;
text-align: justify;
min-height: 120px;
}
blockquote {
background: #fff;
border: 1px solid #b83050;
margin: 0 100px;
padding: 5px 10px;
font: normal 11px Lucida Sans Unicode, Arial;
text-align: justify;
}
/* --------- entry metadata: tags etc. ------------------ */
.entryMetadata {
margin: 0 15px 0 10px;
padding: 0;
font: normal 10px Lucida Sans Unicode, Arial;
color: #32312F;
}
.entryMetadata ul {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
margin: 0;
padding: 5px 5px 7px 5px;
font: normal 10px Lucida Sans Unicode, Arial;
border: 1px solid #b83050;
}
.entryMetadata a,
.entryMetadata a:visited {
color: #67182b;
}
.entryMetadata a:hover {
color: #32312F;
}
/* --------- entry links (comments, memories etc.) ------------------ */
.entryLinkbar, .commentLinkbar {
margin: 0px 15px 15px 135px;
padding: 15px 0 5px 0;
border: 0;
}
.entryLinkbar li,
.commentLinkbar li {
}
.entryLinkbar li a,
.commentLinkbar li a {
padding: 0 0 0 12px;
}
/* Link */
.entryLinkbar a,
.commentLinkbar a[href*="thread"] {
background:url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-linkbar-link.gif) no-repeat left center !important;
padding:18px 0px 18px 18px;
}
/* Read comments */
.entryLinkbar a[href*="html"] {
background:url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-linkbar-comments.gif) no-repeat left center !important;
padding:16px 0px 16px 18px;
}
/* Add a comment */
.entryLinkbar a[href*="reply"],
.commentLinkbar a[href*="reply"]{
background:url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-linkbar-addcomment.gif) no-repeat left center !important;
padding:14px 0px 16px 18px;
}
/* Remember */
.entryLinkbar a[href*="memadd"] {
background:url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-linkbar-remember.gif) no-repeat left center !important;
padding:16px 0px 16px 18px;
}
/* Tell a friend */
.entryLinkbar a[href*="tell"] {
background:url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-linkbar-tellafriend.gif) no-repeat left center !important;
padding:16px 2px 16px 18px;
}
/* Track comments */
.entryLinkbar a[href*="subscrip"],
.commentLinkbar a[href*="subscrip"] {
background:url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-linkbar-track.gif) no-repeat left center !important;
padding:18px 2px 16px 18px;
}
/* Flag */
.entryLinkbar a[href*="flag"] {
background:url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-linkbar-link.gif) no-repeat left center !important;
padding:14px 2px 16px 18px;
}
/* Edit */
.entryLinkbar a[href*="edit"],
.commentLinkbar a[href*="edit"] {
background:url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-linkbar-edit.gif) no-repeat left center !important;
padding:14px 2px 16px 18px;
}
/* Delete */
.entryLinkbar a[href*="del"],
.commentLinkbar a[href*="del"] {
background:url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-linkbar-delete.gif) no-repeat left center !important;
padding:16px 2px 16px 18px;
}
/* --------- FOOTER ------------------ */
#footer-menu,
.bodynavblock {
margin: 30px auto;
background: transparent;
border: 0;
font: normal 14px Lucida Sans Unicode, Arial;
color: #3B150A;
text-transform: uppercase;
text-align: center;
}
.bodynavblock li,
.bodynavblock b {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
margin: 0 5px !important;
padding: 10px 3px;
min-height: 30px !important;
border: 2px #000000 solid;
}
.bodynavblock li a,
.bodynavblock li a:visited,
.bodynavblock b a,
.bodynavblock b a:visited {
background: transparent;
padding: 7px 15px;
border: #67182b 1px dashed;
color: #32312F !important;
}
.bodynavblock li a:hover,
.bodynavblock b a:hover {
background: transparent;
color: #67182b !important;
}
.pagefooterblock {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
border-top: 2px #000000 solid;
padding: 0;
margin: 0;
height: 30px;
color: transparent;
//color: #E14C6E;
}
/* ---------------- COMMENTS PAGE ------------------------ */
.bodyblock .bodyheaderblock {
display: none;
}
.commentHolder {
background: #fff url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-entry-bg.gif) repeat;
border: 2px solid #000;
margin: 20px 0;
}
.commentHeader {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x;
min-height: 15px;
padding: 5px 10px;
border: 0;
border-bottom: #67182b 1px dashed;
}
.commentHeader span {
font: normal 10px Lucida Sans Unicode, Arial;
text-transform: uppercase;
color: #67182b;
}
.commentUserinfo {
background: #fff;
padding: 2px;
margin: 15px 5px 10px 15px;
border: #b83050 1px solid;
text-align: left;
}
.commentUserinfo .ljuser a b {
font: normal 11px Lucida Sans Unicode, Arial;
}
.commentUserinfo .ljuser img {
}
.commentLinkbar li {
margin: 0 3px;
}
/* ------ QUICK REPLY ------ */
.replyform,
.quickreply_entry form table,
.quickreply_comment form table {
background: #fff url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-entry-bg.gif) repeat;
border: 0 !important;
color: #32312F;
font: normal 12px Lucida Sans Unicode, Arial;
line-height:20px;
padding: 20px 40px;
margin-bottom: 40px;
}
.replyform {
border: 2px solid #000 !important;
}
.textbox {
border: 1px solid #b83050;
padding: 5px;
width: 90%;
}
/* ---------------- CALENDAR ------------------------ */
.month {
background: transparent;
border: 0;
margin: 30px auto 70px auto;
padding:0;
width:500px;
}
.daysubjects {
}
.daytitles {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
border: 1px solid #b83050;
padding: 5px;
font: normal 12px Lucida Sans Unicode, Arial;
text-transform: uppercase;
color: #67182b;
text-align:left;
}
.day-blank {
border: 0;
}
.day {
background: tranparent;
border:0;
margin:5px;
padding:3px;
}
.day-date {
width:40%;
background: transparent;
border: 0;
padding: 7px 3px;
color: #32312F;
text-align:center;
font: normal 12px Lucida Sans Unicode, Arial;
}
.day-count {
float:right;
text-align:center;
width: 150%;
}
.day-count a,
.day-count a:visited {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
padding:3px;
color: #67182b;
font: normal 12px Lucida Sans Unicode, Arial;
text-decoration:none;
}
.day-count a:hover {
color: #32312F;
}
/* ---------------- TAGS PAGE ------------------------ */
table .tagstable {
border: 0;
}
table .tagstable td {
border: 0;
border-bottom: 1px solid #67182b;
}
/* ------------------ MISCELLANEOUS ------------------------- */
/* --------------------- input & textarea ----------------------------- */
textarea, select {
border: solid 1px #67182b;
background: #fff;
color: #32312F;
font: normal 11px Lucida Sans Unicode, Arial;
line-height:20px;
margin:2px;
padding: 2px 5px;
}
input {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
border: 1px solid #b83050;
margin:2px;
padding:2px 5px;
font: normal 11px Lucida Sans Unicode, Arial;
color: #67182b;
}
/* -------- lj user & images --------------- */
img[src*="userinfo.gif"] {
width: 0;
height: 0;
padding: 8px 8px 8px 14px;
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-ljuser.gif) no-repeat transparent;
}
img[src*="community.gif"] {
width: 0;
height: 0;
padding: 8px 8px 8px 20px;
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-ljcomm.gif) no-repeat transparent;
}
/* ---------------- controlstrip ------------------------------ */
#lj_controlstrip {
background: #000;
}
#lj_controlstrip_statustext,
#lj_controlstrip_user {
color: #494949;
font: normal 11px Lucida Sans Unicode, Arial;
}
#lj_controlstrip a,
#lj_controlstrip a:link,
#lj_controlstrip a:visited,
#lj_controlstrip .ljuser a b {
color: #b83050 !important;
font: normal 11px Lucida Sans Unicode, Arial;
}
#lj_controlstrip a:hover,
#lj_controlstrip .ljuser a:hover b {
color: #494949 !important;
text-decoration: none;
}
#lj_controlstrip_user,
#lj_controlstrip_actionlinks,
#lj_controlstrip_search,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic {
border-right:0 none;
}
#lj_controlstrip_login td, #lj_controlstrip td td {
border-bottom:0 none;
}
#lj_controlstrip input {
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
border:0 none !important;
padding:3px;
color: #67182b;
}
#lj_controlstrip_search_input_text,
#lj_controlstrip select,
#lj_controlstrip input#xc_user,
#lj_controlstrip input#xc_password,
#lj_controlstrip input#xc_remember,
#lj_controlstrip_search_submit,
#lj_controlstrip #Logout {
font: normal 11px Lucida Sans Unicode, Arial !important;
color: #67182b !important;
background: url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-header-menu-bg.gif) repeat-x transparent;
border:0 !important;
padding: 0px !important;
}
/* ------------------ Contextual Popup ------------------ */
div.ContextualPopup img {
border:0;
}
div.ContextualPopup div.Inner {
opacity: .9;
background: #fff url(
http://ruthenia-alba.webs.com/021pink-layout/upload/021pink-entry-bg.gif) repeat;
border: 1px solid #b83050;
color: #32312F;
font: normal 11px Lucida Sans Unicode, Arial !important;
margin:0;
padding:5px;
}
div.ContextualPopup .Relation {
border-bottom:0px;
color: #32312F !important;
font: normal 12px Lucida Sans Unicode, Arial !important;
letter-spacing: 0;
margin:2px 0;
padding:2px 0;
text-transform:uppercase;
}
div.ContextualPopup .Content .OnlineStatus {
font-weight:bold;
}
div.ContextualPopup .Userpic {
padding:8px 8px 0 0;
}
div.ContextualPopup div.Inner a,
div.ContextualPopup div.Inner a:link,
div.ContextualPopup div.Inner a:visited {
color: #b83050 !important;
font: normal 11px Lucida Sans Unicode, Arial;
text-decoration: none !important;
}
div.ContextualPopup div.Inner a:hover {
color: #32312F !important;
text-decoration:none !important;
}
Чтобы поменять шапку, найдите в коде блок .header-menu и поменяйте цифру в названии файла в фоне (по умолчанию 021pink-header1.png).
To change the header, find .header-menu block in the code and change the number in the background's file name (021pink-header1.png by default).
N.B. Если верхнее меню наползает на шапку (особенно на странице комментариев), можно отключить в нем кнопку "Memories". Для этого зайдите в
Настройки и выберите "Show Memories link on Menubar - No".
N.B. If the header menu covers the header picture (especially at comment pages), you can disable the "Memories" button. To do this, go to your
Settings and choose "Show Memories link on Menubar - No".
Все варианты шапки // All header versions:
1
2
3
4
5