#58 - Moonlight: gawariel

gawariel in gawariel_design

#58 - Moonlight

Dec 03, 2007 15:12

Well, I hope you guys will stop nagging now ;) *joking*
I hope you like this!

D E S C R I P T I O N

Name:

Moonlight

Description:

Blue-ish Smooth Sailing layout, with a full-moon theme.
The quote in the header/dividers comes from the song Moonlight by Kamelot.

G E N E R A L I N F O R M A T I O N

Works with ads?:

Yes

Style:

Smooth Sailing.

Tested in:

IE and Mozilla Firefox.
Works in Opera as well. Thanks, sound_of_vision!

Best Resolution:

1024*768 and above

Works with Navigation Strip?:

Yes

Credit:

Please put a link to gawariel_design in your profile or sidebar.

{Bigger} ~ {Live Preview}

I N S T A L L A T I O N

Go to Manage:

Customize

Select a New Theme:

Type Smooth Sailing in the search box.
Click 'Search'.
Apply any theme that you get in the search results, it doesn't really matter which one!

Choose a Page Setup:

Apply the following: 2 Column (sidebar on LEFT).
Click Customize Selected Theme

Note:

The following section(s) can be found in the left, blue sidebar of the page.
Only the sections I mention are the ones you MUST adjust. You can play with the rest as you please.

Display:

Under Presentation:
- Userinfo Position in Entries: Right side of the entry text
Under Additional Options:
- Wrap Entry text under userinfo: Yes

Hit "save changes".

Custom CSS:

Use layout's stylesheet(s): No
Use layout's stylesheet(s) when including custom external stylesheet: No
Custom external stylesheet URL: Leave empty
Custom stylesheet: Paste the stylesheet (given bellow) in this box.

Hit "save changes".

I M A G E S & C O D E

Images:

The images are hosted on my account, but it is recommended that you upload them yourself. Don't forget to change the URL's in the code!

Code:

/* LAYOUT 58: MOONLIGHT */
/* S2 STYLE: SMOOTH SAILING */
/* AVAILABLE AT GAWARIEL_DESIGN (http://community.livejournal.com/gawariel_design/) */
/* CREATED BY GAWARIEL (http://gawariel.livejournal.com/) */
/* ALL IMAGES MADE BY GAWARIEL IN PHOTOSHOP CS */
/*-----------------------------------------------------------------------------------------------*/

/*----------- MISC -----------*/
blockquote {
background: #B6CAD5 url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/Blockquote.jpg) no-repeat bottom right;
min-height: 150px;
padding: 5px;
border: 3px double #223A49;
}

textarea {
background: #EFF4F7;
font-family: arial;
font-size: 8pt;
color: #1F343F;
letter-spacing: 1px;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/LJUser.png);
padding: 19px 16px 0 0!important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/LJUser.png);
padding: 19px 16px 0 0!important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/LJComm.png);
padding: 17px 16px 0 0!important;
}

.ljuser a b{
padding-left:3px;
font-variant: normal;
font-size: 8pt;
}

/*----------- PAGE -----------*/
body {
background: #172730 url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/Pattern.jpg);
font-family: arial;
font-size: 9pt;
}

a, a:visited {
color: #00659E;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: #002862;
}

.pageblock{
width: 880px;
margin: 0 auto;
}

/*______________________________________________________________________________________________________________*/

/*----------- HEADER -----------*/

.pageheaderblock {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/MoonlightHeader.jpg) no-repeat top center;
height:358px;
margin-top: -8px;
}

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

.header-menu {
position:absolute;
margin: 20px 0px 0px -29px
}

html*.header-menu {
margin-top: 30px;
}

.header-menu ul {
list-style: none;
}

.header-menu li {
margin: -18px 0px;
font-family: Copperplate Gothic Light, Times New Roman;
font-variant: small-caps;
font-size: 10pt;
letter-spacing: 3px;
}

.header-menu li a{
display: block;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/Navigation.png) no-repeat top left;
height: 40px;
width: 212px;
text-align: center;
padding: 13px 0px;
text-decoration: none;
color: #98A5AC;
}

.header-menu li a:hover{
background:url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/Navigation.png) no-repeat -212px top;
color: #6186A0;
}

/*______________________________________________________________________________________________________________*/

/*----------- BODY -----------*/

.bodyblock {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/Container.jpg) repeat-y top center;
}

.bodyheaderblock {
display: none;
}

.bodynavblock {
float: right;
margin: 30px 15px 50px 0px;
}

.bodynavblock ul{
list-style: none;
}

.bodynavblock li {
display: inline;
margin: 0px 8px;
}

.bodynavblock a, .bodynavblock a:visited {
font-family: Copperplate Gothic Light, Times New Roman;
font-variant: small-caps;
letter-spacing: 3px;
font-size: 10pt;
color: #00659E;
text-decoration: none;
}

.bodynavblock a:hover {
color: #002862;
text-decoration: underline;
}

.body-title, .body-midtitle {
display: none;
}

/*______________________________________________________________________________________________________________*/

/*----------- ENTRIES -----------*/

.entryHolder {
width: 627px;
}

.entryUserinfo {
text-align: center;
font-size: 8pt;
}

.entryUserinfo-usericon img {
margin: 8px 0px 3px 8px;;
padding: 5px;
background: #C9DAE4;
}

.entryUserinfo-usericon a img,
.commentUserinfo-usericon a img {
border: 1px solid #9DB9CA;
}

.entryUserinfo-usericon a:hover img,
.commentUserinfo-usericon a:hover img {
}

.entryText {
margin-left: 8px;
font-family: arial;
font-size: 10pt;
color: #2F586F;
line-height: 20px;
}

.entryText a{
color: #00659E;
font-variant: small-caps;
text-decoration: none;
}

.entryText a:hover{
text-decoration: underline;
color: #002862;
}

.entryHeader {
text-align: center;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/DateSubject.jpg) no-repeat top center;
width: 629px;
height: 36px;
padding: 8px 0px;
margin: 8px 0px;
}

.entryHeaderSubject {
font-family: Copperplate Gothic Light, Times New Roman;
font-weight: bold;
font-variant: small-caps;
font-size: 12pt;
letter-spacing: 3px;
color: #436682;
}

.entryHeaderDate {
margin: 13px 0px 0px 15px;
font-size: 8pt;
color: #6186A0;
}

.entryMetadata {
margin: 18px 0px 8px 10px;
font-size: 8pt;
color: #9DB9CA;
line-height: 15px;
}

.entryMetadata ul{
list-style: none;
border-left: 3px double #9DB9CA;
}

.entryMetadata li {
display: block;
margin-left: -30px;
}

.entryMetadata a{
color: #00659E;
text-decoration: none;
}

.entryMetadata a:hover{
text-decoration: underline;
color: #002862;
}

.entryMetadata-label {
font-weight: normal;
font-variant: small-caps;
padding-right: 8px;
}

.entryLinkbar {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/Comment.jpg) no-repeat center;
height: 159px;
text-align: center;
font-family: Copperplate Gothic Light, Times New Roman;
font-variant: small-caps;
font-size: 9pt;
letter-spacing: 3px;
}

.entryLinkbar a{
text-decoration: none;
color: #00659E;
}

.entryLinkbar a:hover{
text-decoration: underline;
color: #002862;
}

.entryLinkbar ul {

}

.entryLinkbar li {
display: inline;
padding: 0px 5px 0px 20px;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/Seperator.png) no-repeat left center;
}

/*______________________________________________________________________________________________________________*/

/*----------- FOOTER -----------*/

.pagefooterblock {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/Footer.jpg) no-repeat bottom center;
height: 110px;
margin-bottom: -10px;
font-size: 0pt;
color: #223A49;
}

html*.pagefooterblock {
padding-left: 5px;
margin-bottom: -20px;
}

/*______________________________________________________________________________________________________________*/

/*----------- SIDEBAR -----------*/

.sidebar {
width: 220px;
padding: 10px;
margin-top: 50px;
}

.sidebar a {
text-decoration: none;
color: #98A5AC;
}

.sidebar a:hover {
color: #6186A0;
text-decoration: underline;
}

.sidebox {
margin-bottom: 50px;
}

.sideboxTitle {
Text-align: center;
font-family: Copperplate Gothic Light, Times New Roman;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 3px;
color: #6E96A8;
border-bottom: 3px double #6E96A8;
margin: 10px;
}

.sideboxContent {
padding: 0px 8px;
font-family: arial;
font-size: 9pt;
line-height: 20px;
color: #4F778C;
}

.sidebox #profile {
text-align: center;
color: #4F778C;
}

.profile-label {
font-variant: small-caps;
letter-spacing: 1px;
padding-right: 8px;
}

.profile-userpic {
padding: 5px;
background: #C9DAE4;
border: 1px solid #9DB9CA;
margin-bottom: 8px;
}

.sidebox #systemlinks {
text-align: left;
margin-left: 15px;
line-height: 20px;
}

.listtitle {
font-variant: small-caps;
text-decoration: underline;
margin: 8px 0px 4px 0px;
color: #3C647A;
}

.summaryList {
border-bottom: 1px solid #3C647A;
margin: 5px;
font-size: 8pt;
}

.sidebox #latestmonth {
text-align: center;
}

.sidebox #latestmonth table{
text-align: center;
margin-left: 5px;
width: 90%;
background: #3C647A;
padding: 4px;
border: 1px solid #274C62;
color: #192B34;
}

#latestmonth table td {
text-align: center;
}

.latestmonth-inactive {
background-color: #274C62;
text-align: center;
border: 1px solid #2B5269;
}

.sidebox #search {
font-family: arial;
font-size: 8pt;
}

input {
font-family: arial;
font-size: 8pt;
text-transform: lowercase;
background-color: #274C62;
letter-spacing: 1px;
margin-top: 2px;
margin-bottom: 2px;
}

#SearchTerm {
position: relative;
left: 0;
width: 120px;
margin-left: 0;
}

#SearchType, select {
width: 100px;
background-color: #274C62;
line-height: 20px;
font-family: arial;
font-size: 8pt;
letter-spacing: 2px;
text-transform: lowercase;
margin-bottom: 2px;
margin-top: 2px;
}

.sidebox #tags_sidebox {
padding: 5px;
text-align: left;
display: block;
font-size: 8pt;
}

.sidebox #tags_sidebox a:link, .sidebox #tags_sidebox a:active, .sidebox #tags_sidebox a:visited {
display: inline;
text-decoration: none;
}

/*______________________________________________________________________________________________________________*/

/*----------- COMMENT PAGE -----------*/
.commentHolder {
background: #D6E3EB;
margin: 20px 20px 0px 0px;
padding: 10px;
font-size: 8pt;
border: 3px double #9EBACC;
}

.commentUserinfo {
text-align: center;
font-size: 10px;
margin: 5px 8px 8px 5px;
}

.commentUserinfo-usericon img {
padding: 5px;
background: #C9DAE4;
border: 1px solid #9DB9CA;
}

.commentText {
font-size: 9pt;
color: #2F586F;
line-height: 20px;
}

.commentHeader {
border-bottom: 3px double #4F778C;
margin-bottom: 10px;
color: #4F778C;
}

.commentHeaderScreened {
background: #517B7D;
padding: 3px;
}

.commentHeaderSubject {
font-family: Copperplate Gothic Light, Times New Roman;
font-variant: small-caps;
font-weight: bold;
color: #4F778C;
font-size: 10pt;
line-height: 25px;
letter-spacing: 3px;
}

.commentLinkbar {
text-align: right;
}

.commentLinkbar ul {
margin: 0px;
padding: 0px;
}

.commentLinkbar li {
display: inline;
padding: 0px 0px 0px 15px;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/58_Moonlight/Seperator.png) no-repeat left center;
}

.replyform {
margin: 0 auto;
background-color: #223A49;
border: 3px double #172730;
padding: 10px;
margin: 10px 20px 0px 0px;
font-size: 10pt;
color: #4F778C;
}

option {
border-bottom: 1px solid #3C647A;
padding:1px;
color: #98A5AC;
letter-spacing: 2px;
font-size: 8pt;
}

#commenttext {
width:100%;
background: #EFF4F7;
}

/*______________________________________________________________________________________________________________*/

/*----------- ARCHIVE PAGE -----------*/

.month {
width:400px;
padding: 5px;
border: 1px solid #1A2C36;
margin: 0 auto;
background: #223A49;
}

.daytitles {
Text-align: center;
font-family: Copperplate Gothic Light, Times New Roman;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 3px;
color: #6E96A8;
border-bottom: 1px solid #6E96A8;
}

.day-blank {
border-right: 1px solid #6E96A8;
border-top: 1px solid #6E96A8;
}

.day {
font-size: 10pt;
color: #4F778C;
border-right: 1px solid #6E96A8;
border-top: 1px solid #6E96A8;
padding: 3px;
}

.day a{
text-decoration: none;
color: #98A5AC;
}

.day a:hover{
color: #6186A0;
text-decoration: underline;
}

.day-count {
text-align: right;
}

/*______________________________________________________________________________________________________________*/

/*----------- TAGS PAGE -----------*/

.tagstable {
width: 500px;
padding-left: 20px;
padding-top: 20px;
}

.tagstable td{
border-right: 1px solid #6E96A8;
border-top: 1px solid #6E96A8;
}

E X T R A

Icon:

Matching Profile Layout:

here

T R O U B L E S H O O T I N G

Before asking any questions, make sure you read all information above thouroughly and that your question isn't adressed in the FAQ.

If your problem still isn't solved, you are welcome to ask your question here

layouts: account status: plus, layouts: [s2], layouts: account status: paid, layouts, layouts: account status: basic, layouts: [s2]: smooth sailing