#40 Sweet September

Sep 19, 2012 08:14




Title: Sweet September
System: s2
Theme: Smooth Sailing
Account: free, plus & paid
Header: no
Browser: Chrome, Firefox & IE
More layouts @ cssbox



/*
CSS by a r t p h i l i a.livejournal.com
Download @ c s s b o x.livejournal.com
TinyIcons by: p.yusukekamiyamane.com
Style System: S2
Theme: Smooth Sailing
Account: Free, Plus & Paid
*/

body {
color: #4C4C4C;
font-family: Calibri, Tahoma, Verdana, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
background-color: #F1F1F1;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/wood-bg02.jpg);
}

a, a:visited, a:active {
color: #FF7200;
text-decoration: none;
font-weight: normal !important;
}
a:hover {
color: #FFAA00 !important;
}

input, textarea, select {
background-color: #F1F1F1;
font-family: Consolas, Inconsolata, Monaco, monospace;
font-size: 11px;
color: #4C4C4C;
border: 1px solid #D3D3D3;
margin: 1px;
}

code, kbd, pre, tt {
font-family: Consolas, monospace;
}
blockquote {
margin: 15px;
padding: 5px 15px 20px 15px;
font-size: 11px;
font-family: Consolas, Inconsolata, Monaco, monospace;
border: 1px dashed #D3D3D3;
background-color: #F1F1F1F;
text-align: justify;
}

/* CONTAINER */
.pageblock {
background-image: url();
background-repeat: no-repeat;
background-position: top center;
height: 0 !important;
margin-right: 270px;
margin-left: 270px;
z-index: 1;
}
.pageheaderblock{
text-align: center;
padding-top: 20px;
}

.header-title, .header-subtitle, .header-icon, .pagefooterblock {
display: none;
}

.header-menu {
background-color: #F1F1F1;
background-image: -webkit-linear-gradient(top, #fafafa, #efefef);
background-image: -moz-linear-gradient(top, #fafafa, #efefef);
background-image: -ms-linear-gradient(top, #fafafa, #efefef);
background-image: -o-linear-gradient(top, #fafafa, #efefef);
background-image: linear-gradient(top, #fafafa, #efefef);
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
-webkit-border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
border-radius: 0 0 25px 25px;
padding: 0 10px;
width: 200px;
position: absolute;
top: 0;
left: 50px;
}
.header-menu a, .header-menu a:active, .header-menu a:visited {
color: #FFAA00;
white-space: nowrap;
padding: 2px 6px;
text-decoration: none;
}
.header-menu a:hover {
color: #FF7200 !important;
}
.header-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.header-menu li {
display: block;
padding: 5px;
}

/* BODY */
.bodyblock {
padding: 0;
}
.bodyheaderblock {
display: none;
}
.bodynavblock {
margin: 5px;
padding: 5px;
text-align: center;
}
.bodynavblock a, .bodynavblock a:active, .bodynavblock a:visited {
font-weight: normal;
}
.bodynavblock a:hover {
color: #898989;
}
.body-title {
display: none;
}
.body-midtitle {
display: none;
}

/* ENTRIES */
.entryHolder {
background-color: #fafafa;
padding: 10px 5px;
margin: 15px;
}
.entryUserinfo {
text-align: center;
margin: 5px;
}
.entryUserinfo-usericon img {
-webkit-border-radius: 25px 8px;
-moz-border-radius: 25px 8px;
border-radius: 25px 8px;
border: 0;
position: relative;
}
.entryText {
color: #4C4C4C;
text-align: justify;
padding: 5px;
}
.entryHeader {
padding: 4px;
border-bottom: 1px solid #D3D3D3;
}
.entryHeader a, .entryHeader a:active, .entryHeader a:visited {
color: #FFAA00;
text-decoration: none;
font-weight: normal !important;
}
.entryHeader a:hover {
color: #FF7200;
}
.entryHeaderDate {
font-size: 10px;
color: #7D7D7D;
}
.entryHeaderSubject {
text-transform: none;
font-size: 15px;
font-style: italic;
}

/* CURRENTS */
.entryMetadata {
text-transform: uppercase;
font-size: 10px;
padding: 5px 0;
margin: 10px 0 0 0;
}
.entryMetadata ul {
margin: 0;
padding: 0;
}
.entryMetadata li {
background-image: url(http://artphilia.de/pics/bullet_star.png);
background-repeat: no-repeat;
position: left middle;
padding: 2px 0 0 16px;
margin: 1px;
display: block;
}
.entryMetadata-label {
padding: 0 3px;
}

.entryLinkbar {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #D3D3D3;
text-transform: uppercase;
text-align: center;
font-size: 11px;
padding: 10px 0;
}
.entryLinkbar a, .entryLinkbar a:visited, .entryLinkbar a:active {
color: #FFAA00;
text-decoration: none;
}
.entryLinkbar a:hover {
color: #FF7200;
}
.entryLinkbar ul {
margin: 0;
padding: 0;
}
.entryLinkbar li {
padding: 0 10px;
display: inline;
}

/* FOOTER */
#footer-menu {
text-transform: lowercase;
background-color: transparent;
white-space: nowrap;
text-align: center;
padding: 10px 5px;
}
#footer-menu ul {
margin: 0;
padding: 10px;
}
#footer-menu li {
padding: 10px;
display: inline;
}

/* SIDEBAR */
.sidebar {
background: #fafafa;
background-image: -webkit-linear-gradient(top, #fafafa, #efefef);
background-image: -moz-linear-gradient(top, #fafafa, #efefef);
background-image: -ms-linear-gradient(top, #fafafa, #efefef);
background-image: -o-linear-gradient(top, #fafafa, #efefef);
background-image: linear-gradient(top, #fafafa, #efefef);
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
-webkit-border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
border-radius: 0 0 25px 25px;
padding: 15px 10px;
width: 200px;
position: absolute;
top: 0;
right: 50px;
}
.sidebox {
margin: 0 auto;
padding: 0;
text-align: center;
}
.sideboxTitle {
-webkit-border-radius: 25px 8px;
-moz-border-radius: 25px 8px;
border-radius: 25px 8px;
background-color: #F1F1F1;
background-image: -webkit-linear-gradient(left, #fafafa, #efefef);
background-image: -moz-linear-gradient(left, #fafafa, #efefef);
background-image: -ms-linear-gradient(left, #fafafa, #efefef);
background-image: -o-linear-gradient(left, #fafafa, #efefef);
background-image: linear-gradient(left, #fafafa, #efefef);
text-transform: none;
font-size: 15px;
font-style: italic;
padding: 2px;
text-align: center;
}
.sideboxContent {
line-height: 14px;
text-align: left;
padding: 3px;
}
.sidebox #freetext {
text-align: center;
}
.sidebox #profile {
display: none;
}
.sidebox #latestmonth {
text-align: center;
}
.sidebox #search {
text-align: center;
width: 200px;
}
.listitem {
background-image: url(http://artphilia.de/pics/bullet_star.png);
position: left middle;
background-repeat: no-repeat;
padding: 2px 0 0 16px;
margin: 1px;
}
.sidebox #systemlinks, .summaryList {
font-weight: normal !important;
text-transform: uppercase;
font-size: 11px;
}
.sidebox #latestmonth table {
margin: 0 auto;
}
#latestmonth td {
text-align: center;
margin: 2px;
font-size: 11px;
}
.latestmonth-inactive {
border: 1px solid #F1F1F1;
padding: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: transparent;
}
.latestmonth-active {
padding: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #F1F1F1;
}
.profile-label {
display: none;
}

/* COMMENT PAGE */
.commentHolder {
color: #4C4C4C;
background-color: #fafafa;
margin: 5px !important;
}
.commentUserinfo {
float: right;
text-align: center;
margin: 5px;
background-color: #fafafa;
}
.commentUserinfo-usericon img {
-webkit-border-radius: 25px 8px;
-moz-border-radius: 25px 8px;
border-radius: 25px 8px;
padding: 0;
border: 0;
}
.commentText {
width: 100%;
padding: 5px;
}
.commentHeader {
background-color: #fafafa;
font-style: italic;
font-size: 15px;
padding: 4px 8px;
}
.commentHeaderSubject {
font-weight: normal;
}
.commentLinkbar {
border-top: 1px solid #D3D3D3;
text-transform: uppercase;
text-align: center;
font-size: 11px;
padding: 10px 0;
margin: 5px 0;
}
.commentLinkbar ul {
margin: 0;
padding: 0;
}
.commentLinkbar li {
padding: 0;
margin: 0 10px;
display: inline;
}
.replyform, #replyto {
border: 0;
}

/* ARCHIVE PAGE */
.yearlinks {
text-align: center;
}
.yearlink{
padding: 0 4px;
}
.month {
width: 80%;
margin: 0 auto;
padding: 10px 0;
}
.daysubjects {
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
background-color: #F1F1F1;
}
.day-date {
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 13px;
}
.day-count a {
color: #A60010;
text-decoration: none;
font-weight: normal !important;
}

/* TAGS PAGE */
.tagstable tr:nth-child(odd) {
background-color: #F1F1F1;
}
.tagstable tr:nth-child(even) {
background-color: #FAFAFA;
}
.tagstable {
border: 1px dashed #CCCCCC;
width: 90%;
}

/*--------------------------------------------
User, Community, Protected icons
-----------------------------------------*/
/* --- User icons --- */
.ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/quill.png);
padding: 0 0 16px 17px !important;
background-repeat: no-repeat;
background-position: left center;
}

/* --- Community icons --- */
.ljuser img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/script.png);
padding: 0 0 16px 17px !important;
background-repeat: no-repeat;
background-position: left center;
}

/* --- Lock icons --- */
.entryHeaderSubject img[src*="icon_protected.gif"], .summaryList img[src*="icon_protected.gif"] {
width: 0 !important;
height: 0 !important;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/lock_zpse1df2312.png);
padding: 2px 11px 14px 4px !important;
background-repeat: no-repeat;
position: left middle;
}

/* --- Sticky icons --- */
.entryHeaderSubject img[src*="icon_sticky.png"], .summaryList img[src*="icon_sticky.png"] {
width: 0 !important;
height: 0 !important;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/pin_zps4880d822.png);
padding: 2px 11px 12px 4px !important;
background-repeat: no-repeat;
position: left middle;
z-index: 15;
}

********* R E A D M E *********

* Please upload ALL images from the zip to your own host i.e. photobucket.com, flickr.com or imageshack.us
* Open the css.txt with your texteditor and search for the following urls and replace them with your own. I won't host the images for you. Thanks!
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/wood-bg02.jpg
- http://artphilia.de/pics/bullet_star.png
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/quill.png
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/script.png
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/lock_zpse1df2312.png
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/pin_zps4880d822.png

1) Go to your customize (http://www.livejournal.com/customize) site.
2) (Select a new theme) by searching for Smooth Sailing. If you have you own layer for Smooth Sailing use it.
3) (Choose a page setup) Set sidebar left.
4) Hit the customize selected theme button.
5) (customize your theme)
- (Sidebar) Set » Profile Position - hide
- (Sidebar) Set » Summary Position - hide
- (Sidebar) Set » Latest Month Position - up to you
- (Sidebar) Set » Links Visibility - up to you
- (Sidebar) Set » Tags Sidebox Position - up to you
- (Sidebar) Set » Free Text Position - up to you
- (Sidebar) Set » Multisearch Position - up to you
6) (Custom CSS) Set the three pulldowns to 'no', copy the css and paste it into » Custom stylesheet. Save changes!
7) A link back to my journal (cssbox) somewhere at yours would be very nice, but isn't a must.

If you wanna change the images or colours that's just fine. I won't be offended. But please do not claim my css as yours. Thank you and enjoy!

style: smooth sailing, maker: artphilia

Previous post Next post
Up