I made a X-File layout, specifically about the last movie. Oh, you saw that coming, didn't you? *g*
It's a S2 Smooth Sailing layout and this time I make it lighter than my oldies X-Files layouts. Well, with all that snow in the movie, it couldn't be different, hehehe. As always, it's a shareable layout. Feedback is awesome ;-).
Style: S2 Smooth Sailing
Title: Mulder/Scully - Believe (The X-Files 2 - "I Want to Believe")
Best view: 800x600 and higher.
Browser(s) Compatible: Firefox, Internet Explorer, Netscape, Opera.
Maker:
amavel_bel (Mabel). Credit me in your user info page.
Resources: Images from the web site
Omelete. Other resources (like brushes, textures and so on) are credited at my
LJ Info Page.
Notes: For basic (free) and paid accounts and it works with Nav bar strip and Sponsored Plus Account.
Preview:
Working preview:
bel_movie009 | IMAGES |
Obs.: The images are provided in the code for convenience. They are hosted and I don't intend to take them down (hopefully I won't have exceeding bandwidth problem). If you want, I'm providing the links below, so you can take the images and upload them in your own server. The FRIENDS ONLY BANNER and the ICONS are optional.
Header:
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_header.jpg Backgrounds:
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_back.jpg Friends Only Banner:
Icons:
Extra images:
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_bgDIVIDER.gif
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_bgOFF.gif
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_bgON.gif
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_corner01.gif
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_corner02.gif
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_corner03.gif
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_credits.gif | CUSTOM COLORS |
You don't need to configurate the colors.
| CSS CODE |
/* COLORS, BACKGROUND IMAGE AND GENERAL TEXT SETTINGS */
body {
font-family: Tahoma, Arial;
font-size: 9px;
color: #4D4D4D;
text-align: justify;
letter-spacing: 1px;
background: #F7F7F7 url(
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_back.jpg) repeat;
margin: 0;
}
/* PAGE SETTINGS */
.pageblock {
width: 780px;
color: #4D4D4D;
background-color: transparent;
margin: auto;
border: 0;
}
/* PAGE HEADER AND HEADER IMAGE SETTINGS */
.pageheaderblock {
width: 780px;
text-align: center;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_header.jpg) no-repeat top center;
margin: auto;
padding-top: 300px;
border: 0;
}
/* GENERAL LINKS */
a:link,a:active,a:visited {
color: #000000;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #5B749C;
font-weight: bold;
text-decoration: none;
cursor: e-resize;
}
blockquote {
font-family: "Times New Roman", Verdana;
font-size: 11px;
font-style: italic;
text-align: justfiy;
background-color: #F7F7F7;
margin: 15px;
padding: 15px;
border-left: 3px solid #5B749C;
}
/* HEADER TITLE AND SUBTITLE */
.header-title,.header-subtitle {
display: none;
}
/* NAVIGATION BAR */
.header-menu {
position: relative;
width: auto;
height: 39px;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
font-weight: bold;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_bgOFF.gif) repeat-x top left;
border-top: 4px solid #5B749C;
margin: auto;
}
.header-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li {
position: relative;
display: inline;
top: 6px;
left: 0px;
right: 0px;
line-height: 23px;
padding: 0px;
}
/* NAVIGATION BAR LINKS */
.header-menu a, .header-menu a:visited, .header-menu a:active {
height: 23px;
color: #666666;
text-decoration: none;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_bgDIVIDER.gif) no-repeat top right;
padding: 9px 14px 9px 14px;
}
.header-menu a:active, .header-menu a:hover {
color: #5B749C;
background: #FFFFFF url(
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_bgON.gif) no-repeat top left;
}
/* TITLE IN EACH PAGE (entries, friends, calendar) */
.body-title {
width: auto;
font-family: "Times New Roman", Verdana;
font-weight: bold;
font-size: 11px;
text-align: center;
text-transform: uppercase;
color: #000000;
background-color: #FFFFFF;
letter-spacing: 3px;
line-height: 10px;
margin: auto;
padding: 15px 0px 0px 0px;
}
.body-midtitle {
font-family: Georgia, Verdana;
font-size: 8pt;
font-weight: bold;
text-transform: uppercase;
text-align: left;
color: #666666;
background-color: #FFFFFF;
margin: auto;
padding: 10px 0px 10px 0px;
border-top: 1px solid #666666;
}
/* MORE ENTRIES AND SIDEBAR BLOCK SETTINGS */
.bodyblock {
width: auto;
color: #000000;
background-color: #FFFFFF;
padding: 35px 10px 0px 10px;
margin: auto;
border: 0;
}
/* TITLE PAGE (entries, friends etc) SETTINGS */
.bodyheaderblock {
background-color: transparent;
padding: 0px;
margin: auto;
border: 0;
}
/* NAVIGATION LINKS (previous entries/top of page at the bottom) */
.bodynavblock {
text-align: right;
color: #000000;
background-color: transparent;
margin: 0;
padding: 8px;
border: 0;
}
.bodynavblock a, .bodynavblock a:visited {
color: #000000;
}
.bodynavblock a:hover {
color: #5B749C;
}
/* SIDEBAR SETTINGS */
.sidebar {
width: auto;
font-size: 11px;
margin: 0px 10px 0px 0px;
padding: 0px 15px 10px 0px;
}
/* SIDEBAR BOX - BACKGROUND, BORDER, TEXT */
.sidebox {
color: #000000;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_corner03.gif) no-repeat left top;
margin-bottom: 10px;
padding: 0px 0px 30px 0px;
border: 0;
}
/* SIDEBAR - BOX TITLES */
.sideboxTitle {
font-family: sans-serif, Verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #5B749C;
margin: 0;
padding: 5px 10px;
border-bottom: none;
}
/* SIDEBAR - BOX CONTENTS */
.sideboxContent {
font-family: Tahoma, Verdana;
font-size: 9px;
text-align: left;
padding-top: 10px;
padding-left: 5px;
}
/* PROFILE */
.sidebox #profile {
text-align: left;
line-height: 16px;
}
#profile a, #profile a:active, #profile a:visited {
color: #000000;
}
#profile a:hover {
color: #5B749C;
}
/* PROFILE USERPIC */
.profile-userpic {
margin-left: 10px;
margin-bottom: 15px;
padding: 2px;
border: 0;
}
/* PROFILE - user AND name */
.profile-label {
font-weight: bold;
text-transform: lowercase;
}
/* TITLE OF EACH LINKS SECTION IN THE SYSTEM LINKS */
.listtitle {
display: block;
text-decoration: underline;
font-weight: bold;
line-height: 16px;
}
/* SYSTEM LINKS IN THE SIDEBAR */
.sidebox #systemlinks {
line-height: 13px;
}
.sidebox #systemlinks a:link, .sidebox #systemlinks a:active, .sidebox #systemlinks a:visited {
display: block;
font-weight: normal;
color: #000000;
padding-left: -10px;
}
.sidebox #systemlinks a:hover {
color: #5B749C;
background-color: #F7F7F7;
}
/* TAGS LIST IN THE SIDEBAR */
.sidebox #tags_sidebox {
line-height: 16px;
text-align: left;
color: #000000; /* commas color */
}
#tags_sidebox a {
display: block;
color: #F7F7F7;
margin-bottom: -16px;
}
.sidebox #tags_sidebox a:link, .sidebox #tags_sidebox a:active, .sidebox #tags_sidebox a:visited {
display: inline;
text-decoration: none;
font-weight: normal;
color: #000000;
padding: 0;
}
.sidebox #tags_sidebox a:hover {
color: #5B749C;
}
/* FREETEXT IN THE SIDEBAR */
#freetext a:link, #freetext a:active, #freetext a:visited {
display: block;
line-height: 16px;
padding-left: -10px;
}
#freetext a:hover {
display: block;
color: #5B749C;
line-height: 16px;
padding-left: -10px;
}
/* SUMMARY IN THE SIDEBAR */
.summaryList {
text-align: left;
}
.summaryList a:link, .summaryList a:active, .summaryList a:visited {
font-weight: normal;
color: #000000;
line-height: 16px;
}
.summaryList a:hover {
color: #5B749C;
line-height: 16px;
}
/* MINI-CALENDAR IN THE SIDEBAR */
.sidebox #latestmonth {
text-align: left;
}
/* MINI-CALENDAR POSITION */
.sidebox #latestmonth table {
width: 100%;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
}
/* SPACE AMONG DAYS IN MINI-CALENDAR */
#latestmonth table td {
text-align: center;
text-transform: uppercase;
color: #553E30;
padding: 1px;
border: 0;
}
/* APPEARANCE OF DAYS IN MINI-CALENDAR */
.latestmonth-inactive {
text-align: center;
background-color: #F7F7F7;
padding: 3px;
}
.latestmonth-active {
text-align: center;
background-color: #F7F7F7;
padding: 3px;
}
.latestmonth-active a {
text-decoration: none;
}
.latestmonth-active a:hover {
color: #5B749C;
}
/* APPEARANCE OF SEARCH AND COMMENTS BUTTONS */
.sidebox #search {
text-align: left;
}
input {
font-family: Verdana, Arial;
font-size: 9.5px;
text-transform: lowercase;
letter-spacing: 1px;
color: #000000;
background-color: #F7F7F7;
line-height: 20px;
margin-top: 2px;
margin-bottom: 2px;
}
/* WIDTH OF THE SEARCH BOX */
#SearchTerm {
position: relative;
width: 90%;
left: 0;
margin-left: 0;
}
/* CATEGORY LISTBOX IN SEARCH */
#SearchType, select {
width: 100px;
font-family: Verdana, Arial;
font-size: 9.5px;
text-transform: lowercase;
letter-spacing: 1px;
line-height: 20px;
color: #000000;
background-color: #F7F7F7;
margin-top: 2px;
margin-bottom: 2px;
}
/* ENTRIES BLOCK SETTINGS */
.entryHolder {
width: 590px;
font-family: Tahoma, Verdana;
font-size: 8pt;
color: #4D4D4D;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_corner01.gif) no-repeat left top;
margin: 0px 0px 20px 0px;
padding-bottom: 10px;
border: 0;
}
.entryHeader {
height: 30px;
text-align: left;
background-color: transparent;
padding: 5px 5px 0px 17px;
margin-right: 0px;
border: 0;
border-bottom: 1px solid #CDCDCD;
}
.entryHeader a{
color: #000000;
}
/* DATE IN THE ENTRIES */
.entryHeaderDate {
font-family: Arial, Verdana;
font-size: 7pt;
font-weight: bold;
text-align: left;
text-transform: lowercase;
color: #000000;
padding: 5px 5px 5px 5px;
}
.entryHeaderDate a {
color: #000000;
text-decoration: none;
}
.entryHeaderDate a:hover {
color: #5B749C;
text-decoration: underline;
}
/* SECURITY ICON */
.entryHeaderSubject img {
margin-bottom: -2px;
}
/* ENTRIES SUBJECT */
.entryHeaderSubject {
display: block;
font-family: sans-serif, Verdana;
font-size: 13px;
font-weight: bold;
letter-spacing: 2px;
text-align: left;
color: #5B749C;
}
.entryHeaderSubject a {
color: #000000;
text-decoration: none;
}
/* DISTANCE BETWEEN ICON AND ENTRIES */
.entryUserinfo {
text-align: center;
margin: 0px 0px 8px 8px;
background-color: transparent;
}
/* ICON IN THE ENTRIES */
.entryUserinfo-usericon img {
border: 1px solid #F7F7F7;
margin-top: 5px;
padding: 0px;
}
/* USERNAME IN THE FRIENDS PAGE */
.entryUserinfo-username {
text-align: center;
margin-top: 5px;
}
/* POSITION OF THE ENTRIES TEXT */
.entryText {
width: 420px;
font-family: Verdana, Arial;
font-size: 7.5pt;
letter-spacing: 0px;
color: #4D4D4D;
background-color: transparent;
padding: 6px;
margin: 5px 4px 10px 4px;
overflow: auto;
}
/* MOOD AND MUSIC */
.entryMetadata {
text-transform: lowercase;
color: #666666;
background-color: #F7F7F7;
padding: 4px 6px 4px 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 0px;
}
.entryMetadata li {
list-style: none;
padding-right: 0;
}
.entryMetadata-label {
font-weight: bold;
padding-right: 4px;
}
/* TAGS LINKS IN MOOD AND MUSIC */
.entryMetadata-content a:link, .entryMetadata-content a:active, .entryMetadata-content a:visited {
font-weight: normal;
color: #666666;
}
.entryMetadata-content a:hover {
text-decoration: underline;
color: #5B749C;
}
/* COMMENTS IN THE ENTRIES */
.entryLinkbar {
font-size: 10px;
text-align: center;
color: #430404;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_corner02.gif) no-repeat right bottom;
padding: 20px 5px 5px 5px;
margin: 10px 5px 0px 0px;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
display: inline;
padding: 0px 5px 0px 5px;
margin: 0px;
}
.entryLinkbar a, .entryLinkbar a:link, .entryLinkbar a:visited {
text-decoration: none;
background-color: transparent;
padding-left: 8px;
}
.entryLinkbar a:hover, .entryLinkbar a:active {
text-decoration: none;
color: #5B749C;
}
/* COMMENTS PAGE */
.commentHolder {
font-family: Tahoma, Verdana;
font-size: 9pt;
text-align: left;
color: #4D4D4D;
background-color: transparent;
margin: 4px 0px 4px 0px;
border: 0;
}
.commentUserinfo {
font-size: 8pt;
text-align: center;
background-color: transparent;
margin: 0px 8px 8px 0px;
}
.commentUserinfo-usericon img {
padding: 2px;
margin-top: 6px;
border: 1px solid #000000;
}
.commentText {
width: 90%;
font-family: Tahoma, Verdana;
font-size: 8pt;
padding: 6px;
}
.commentHeader {
font-size: 10px;
color: #666666;
background-color: #E7E5E5;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #F3F1E2;
}
.commentHeaderScreened {
font-size: 12px;
background-color: #F7F7F7;
padding: 4px 4px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
padding: 4px 0px 4px 8px;
}
.commentLinkbar {
font-size: 11px;
text-align: center;
color: #430404;
padding-top: 4px;
padding-bottom: 4px;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
display: inline;
padding: 0px 5px 0px 5px;
margin: 0px;
}
.commentLinkbar a, .commentLinkbar a:link, .commentLinkbar a:visited {
text-decoration: none;
color: #000000;
}
.commentLinkbar a:hover, .commentLinkbar a:active {
text-decoration: none;
color: #5B749C;
}
.replyform {
background-color: transparent;
padding-left: 10px;
}
.replyform textarea {
width: 90%;
}
/* CALENDAR PAGE */
.yearlinks{
text-align: right;
}
.yearlink{
padding-left: 4px;
padding-right: 4px;
}
.month {
width: 90%;
margin: 8px 8px 8px 40px;
border: 1px solid #F7F7F7;
}
.daysubjects {
color: #000000;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
color: #000000;
background-color: #F7F7F7;
border: 0;
}
.day-blank {
border: 1px solid #F7F7F7;
}
.day {
border: 1px solid #F7F7F7;
}
.day-date {
width: 50%;
text-align: center;
color: #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.day-count {
float: right;
width: 50%;
font-size: 12px;
text-align: center;
}
.day-count a {
text-decoration: none;
color: #000000;
}
.day-count a:hover {
text-decoration: none;
color: #5B749C;
}
/* TAGS PAGE */
.tagstable, .tagstable td {
text-align: left;
border: 1px solid #CDCDCD;
}
.tagstable {
font-size:90%;
width: 90%;
}
/* FOOTER SETTINGS */
.pagefooterblock {
width: auto;
text-transform: lowercase;
text-align: right;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/movie009/x-files2_credits.gif) no-repeat bottom left;
padding: 50px 0px 10px 0px;
margin: auto;
border: 0;
}
.pagefooterblock a, .pagefooterblock a:link, .pagefooterblock a:visited {
text-decoration: none;
color: #000000;
}
.pagefooterblock a:hover, .pagefooterblock a:active {
text-decoration: none;
color: #B19C8E;
}
#footer-menu {
text-transform: lowercase;
text-align: right;
background-color: transparent;
}
#footer-menu ul {
margin: 0px;
padding: 0px;
}
#footer-menu li {
display: inline;
}
#footer-menu a, .footer-menu a:visited {
font-family: Georgia, Verdana;
text-transform: uppercase;
white-space: nowrap;
color: #000000;
padding-left: 15px;
}
#footer-menu a:hover {
color: #5B749C;
}
| SPECIAL INSTRUCTIONS |
Preparing the code:
- Copy the CSS code and paste it in the Notepad.
- If you decided to host the images in your own server, replace every i38.photobucket.com/albums/e107/bel_layouts/movie009 by the server address where you uploaded the images.
Configuring the layout:
- In the LJ page, go to
Journal >> Change Journal Theme.
- If you're using S1 style do the following. If not, skip this step: Click in the link Switch to S2 in the blue box on the right side of the page. Then, click in the button "Yes, I want to upgrade to S2".
- In the 2. Select a New Theme section, type Smooth Sailing in the search box. Then select one of the themes listed and click in Apply Theme.
- In the 3. Choose a Page Setup section at the bottom of the page, choose "2 Column (sidebar on left)" and click in the button "Apply Layout".
- Then click in the button
Customise your theme, in the bottom on the right side.
- Click in the option
Custom CSS and under Use layout's stylesheet(s) choose No (THIS IS VERY IMPORTANT!). Then copy the CSS from the Notepad and paste it in the field Custom stylesheet.
- Then you can navigate through the links in the Customize Your Theme and personalize other things as you wish, like going to the Sidebar link and putting personalized labels or entering personalized texts inside the free text boxes, for example.
- Click in the button Save Changes and it's done.
OBS.: The code is meant to work the way it's posted here. I'm not responsible for any modification made in it.
Cross-posted to
layouts_for_fun,
freelayouts and
freelayouts_s2.