Layout: Message Board
LAYOUT: MESSAGE BOARD
INFORMATION
Title: Message Board
Style: S2 Smooth Sailing
Accounts: Basic & Paid (Plus was not tested)
Browsers: Firefox, Safari (IE was not tested, but should work)
CSS
/*
CREDIT: EPHEE @ COMMUNITY.LIVEJOURNAL.COM/EP_IC
TITLE: CORK BOARD
STYLE: SMOOTH SAILING
*/
/* PAGE */
body {
font-family: Arial, sans-serif;
font-size: 12px;
margin: 0px;
color: #000000;
background:#d0a690 url(URL TO BACKGROUND IMG) repeat scroll 0 0;
}
a, a:link, a:visited {
color: #3498B5;
text-decoration: none;
}
a:hover {
color: #000000;
}
.pageblock{
width:100%;
margin: 0 auto;
}
.pagefooterblock {
display: none;
border-top: 2px solid #ffffff;
background-color: #aabbdd;
color: #000000;
padding: 4px 4px 4px 24px;
margin-top: 4px;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #000000;
}
/* HEADER */
.pageheaderblock {
}
.header-title {
background-color: transparent;
padding: 5px 0px 5px 0px;
margin: 45px 0px 10px 15px;
align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 34px;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
text-align: left;
letter-spacing: -3px;
line-height: 32px;
}
.header-subtitle {
display: none;
background-color: #6b7da6;
color: #d4ddee;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
padding: 0px 24px 0px 24px;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
}
.header-menu {
padding: 10px 0px 5px 0px;
background-color: #000000;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 8pt;
color: #ffffff;
line-height: 20px;
text-transform: lowercase;
width: 100%;
margin: -100px 0px 0px 0px;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: left;
padding: 0px 10px 0px 10px;
color: #3498B5;
text-decoration: none;
}
.header-menu a:hover {
color: #ffffff;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}
/* BODY */
.bodyblock {
padding: 10px 20px 0px 20px;
background-color: transparent;
margin-top: 40px;
}
.bodyheaderblock {
display: none;
border-top: 2px solid #ffffff;
background-color: #d4ddee;
padding: 4px 0px 4px 0px;
}
.bodynavblock {
background-color: transparent;
color: #000000;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #000000;
font-weight: bold;
}
.body-title {
display: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
color: #000000;
text-align: left;
padding-left: 24px;
}
.body-midtitle {
display: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
color: #000000;
text-align: left;
padding-left: 8px;
}
/*ENTRIES*/
.entryHolder {
color: #000000;
background-color: transparent;
font-family: Helvetica, Arial, sans-serif;
text-align: justify;
margin-top: 10px;
margin-left: 150px;
width: 700px;
}
.entryUserinfo {
font-weight: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 8.5pt;
text-transform: uppercase;
background-color: transparent;
text-align: center;
margin: 10px 0px 0px 10px;
}
.entryUserinfo a, .entryUserinfo a:link, .entryUserinfo a:visited, .entryUserinfo a:hover{
color: #000000;
margin-top: 2px;
}
.entryUserinfo-usericon img {
padding: 0px;
margin-left: 5px;
border: #ffffff solid 0px;
width: 100px;
height: 100px;
}
.entryText {
line-height: 9pt;
padding: 15px 15px 75px 15px;
width: 600px;
font-size: 8.5pt;
font-family: Helvetica, Arial, sans-serif;
background: #ffffff;
}
.entryHeader {
text-transform: lowercase;
font-size: 10pt;
letter-spacing: -1px;
font-family: Helvetica, Arial;
padding: 5px 15px 2px 15px;
background-color: #ffffff;
width: 600px;
color: #fffffff;
}
.entryHeader a{
color: #000000;
}
.entryHeaderSubject {
margin-top: 0px;
margin-left: 0px;
font-size: 12pt;
font-family: Helvetica, Arial Narrow, Courier, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-style: none;
letter-spacing:-1pt;
color: #ffffff;
}
.entryHeaderDate {
display:block;
position: absolute;
margin-left:-100px;
margin-top: 15px;
padding-top: 7px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 0px;
background-color: #B53452;
color: #ffffff;
font-family:Helvetica;
font-size:30px;
font-weight:bold;
letter-spacing:-2px;
line-height:23px;
text-align:right;
text-transform:uppercase;
width:80px;
}
.entryHeaderDate a {
color : #000000;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #000000;
text-decoration : underline;
}
.entryMetadata {
font-family: Helvetica, Arial, sans-serif;
padding: 15px 15px 40px 15px;;
color: #383838;
font-size: 7pt!important;
font-weight: none!important;
text-transform: lowercase;
background-color: #ffffff!important;
margin-top: -60px;
width: 600px;
}
.entryMetadata ul {
margin: 0px;
padding: 0px;
}
.entryMetadata li {
list-style: none;
display: inline;
padding-right: 10px;
}
.entryMetadata-label {
font-weight: bold;
padding-right: 4px;
}
.entryLinkbar {
text-transform: uppercase;
background-color: #ffffff!important;
text-align: center;
font-size: 7pt;
font-weight: bold;
font-family: Arial, sans-serif;
padding: 35px 15px 15px 15px;
width: 600px;
text-transform: uppercase;
margin-top: -55px;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
/*FOOTER*/
#footer-menu {
font-size: 11px;
}
#footer-menu a, .footer-menu a:visited {
color: #000000;
white-space: nowrap;
padding: 6px;
text-align: left;
}
/*SIDEBAR*/
.sidebar {
display: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
margin-right: 20px;
width: 200px;
}
.sidebox {
color: #000000;
background-color: #f8f8f8;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #dddddd;
color: #000000;
border-top: 2px solid #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 4px 0px 4px 8px;
text-align: ;
}
.sideboxContent {
text-align: left;
padding: 2px 4px 2px 4px;
}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}
.sidebox #tags_sidebox {
text-align: center;
}
.sidebox #systemlinks {
text-align: center;
}
.sidebox #latestmonth table{
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}
.listtitle {
font-weight: bold;
}
.profile-label {
font-weight: bold;
}
/*OTHER PAGES*/
/* COMMENT PAGE */
.commentHolder {
color: #383838;
background-color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-size: 8.5pt;
margin: 10px 0px 0px 150px;
width: 600px;
}
.commentUserinfo {
text-align: center;
margin: 8px 8px 8px 8px;
background-color: #ffffff;
}
.commentUserinfo-usericon img {
padding-bottom: 2px;
border: 0;
width: 75px;
height: 75px;
}
.commentText {
padding: 10px;
}
.commentHeader {
text-transform: lowercase;
background-color: #ffffff;
color: #383838;
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
padding: 4px 0px 4px 8px;
}
.commentHeaderScreened {
font-family: Helvetica, Arial, sans-serif;
font-size: 9pt;
background-color: #ffffff;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: normal;
}
.commentLinkbar {
font-family: Helvetica, Arial, sans-serif;
font-size: 8pt;
text-transform: lowercase;
text-align: center;
}
.commentLinkbar a {
color: #000000;
}
.commentLinkbar a:hover {
color: #000000;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
.replyform {
border: 0;
background-color: #ffffff;
color: #4e4e4e;
padding-left: 10px;
}
#commenttext {
width: 90%;
}
/*ARCHIVE PAGE*/
.yearlinks {
text-align: right;
background: #ffffff;
}
.yearlink {
padding-left:4px;
padding-right: 4px;
background: #ffffff;
}
.month {
width: 630px;
padding: 8px 8px 8px 20px;
background: #ffffff;
}
.daysubjects {
color: #000000;
padding: 8px 10px 8px 20px;
background: #ffffff;
width: 600px;
}
.daytitles {
text-align: center;
background-color: #348cb5;
color: #000000;
font-size: 8pt;
}
.day-blank {
}
.day {
background: #f7f7f7;
border: 2px solid #ffffff;
}
.day-date {
font-size: 8pt;
color: #000000;
width: 50%;
text-align: center;
padding-top: 5px;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 7pt;
font-weight: bold;
padding-bottom: 5px;
}
.day-count a {
text-decoration: none;
color: #348cb5;
}
/*TAGS PAGE*/
.tagstable td {
width: 70%;
}
.tagstable {
width: 600px;
}
.tagstable a {
font-size: 8pt;
}
/* ICONS - User, Community, Protected */
.entryHeader img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
width: 0;
height: 0;
padding: 0 16px 16px 0;
margin-left: -20px;
background: url("URL TO LOCK IMAGE");
}
.entryHeader img[src="http://p-stat.livejournal.com/img/icon_groups.gif"] {
width: 0;
height: 0;
padding: 0 16px 16px 0;
margin-left: -20px;
background: url("URL TO LOCK IMAGE");
}
.ljuser img {
/* fallback code for older browsers */
width: 0;
height: 0;
padding: 0px px 0 0;
/* for some reason IE doesn't understand
background shortcuts for this one */
background-image: url('');
background-repeat: no-repeat;
background-position: left center;
}
.ljuser img[src=\"http://p-stat.livejournal.com/img/userinfo.gif\"]{
width: 0;
height: 0;
padding: 0 0 0px 0px;
background-image: url('');
background-repeat: no-repeat;
background-position: left center;
}
.ljuser img[src=\"http://p-stat.livejournal.com/img/community.gif\"]{
width: 0;
height: 0;
padding: 0 0 0px 0px;
background-image: url('');
background-repeat: no-repeat;
background-position: left center;
}
/* MISC - random minor changes */
b {
color: #;
}
i {
color: #db7f1b;
}
u {
color: #812380;
}
blockquote {
padding: 10px;
background-color: #f7f7f7;
border-left: 5px solid #b5b5b5;
}
img {
max-width:550px;
}
INSTALLING
TIP BEFORE YOU START
Always click "Save Changes" after each section
SELECTING THEME
Go to Customize Page
Select a Smooth Sailing Theme, doesn't matter which one
Under Page Setup, click "Apply Layout" for 1 Column (no sidebar)
CUSTOMIZE
Display - Presentation - Userinfo in Entries - Click "Right side"
Enry Text - Page - Format for Date & Time - type: %%mon%% %%dd%% %%yy%%
CUSTOM CSS
Make sure all drop down menus say "No"
Copy & Paste CSS code located in first section
AFTER INSTALLING
UPLOAD IMAGES
Upload these images to your own server:
Background - http://i43.tinypic.com/20sep2w.jpg
Lock Image - http://i40.tinypic.com/j8fad3.png
(This site is available for free: http://tinypic.com)
YOU WILL NEED TO GO BACK TO YOUR "CUSTOM CSS" AND PASTE THE URLs
Look for:
Background - URL TO BACKGROUND IMG (near the top)
Lock - URL TO LOCK IMG (near the bottom)
CREDIT
Credit ephee OR ep-ic somewhere public, ie. your profile is the best place.
FAQ & ETC.
MY RESOURCES
For Background Image - http://seamlesstextures.net/
For Lock Image - http://www.famfamfam.com/
For Smooth Sailing CSS Source - http://community.livejournal.com/carriep63_stuff/24658.html
ADDING A HEADER
Find .pageheaderblock in the CSS Code & adjust it to your needs.
Here is a tutorial @ s2smoothsailing
.pageheaderblock { background-image: url("IMAGE_URL"); background-position: top center; background-repeat: no-repeat; padding-top: HHHpx; }
SIDEBAR?
You can use the sidebar if you'd like. However, I designed this layout with "No Sidebar" in mind. To add a sidebar, you'll have to do it yourself. This requires a little bit of CSS knowledge. I will not fix your layout for you.
THANK YOU FOR VIEWING MY LAYOUT
COMMENT
Please comment here if taking, I'd love to see who enjoys this layout.
WATCH
Feel free to WATCH me at my community ep-ic for future updates.
QUESTIONS?
Please post all questions about this layout HERE (at my community ep-ic) so I can respond to them.