Hey, want some coffee? That's a drink I can't live without. I love it pure, with milk, with chocolate, cappuccino, espresso. So I was thinking about how much I love coffee and I ended up finding inspiration to make a layout about it. Weird much? Well, if you like coffee as much as me and want a new smelling layout, take this one. It's for free!!!
Style: S2 Smooth Sailing
Title: Food - Coffee love
Website: Not needed
Default Icon: Not needed
Best view: 800x600 and higher.
Browser(s) Compatible: Firefox, Internet Explorer, Netscape, Opera.
Maker:
amavel_bel (Mabel). Just don't remove the credits in the page bottom.
Resources: Images from the web site
iStockPhoto. 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_food001
| 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. Just the FRIENDS ONLY BANNER and the ICON are optional.
Header:
http://i38.photobucket.com/albums/e107/bel_layouts/food001/coffeelove_header.jpg Background:
http://i38.photobucket.com/albums/e107/bel_layouts/food001/coffeelove_back.jpg Friends Only Banner:
Icon:
Extra images:
- background of the links in the navigation bar (on mouse hover)
- decoration of the entries subject
- background of the entries bottom
- background of the sidebar bottom
- image footer with the credits
| 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;
text-align: justify;
letter-spacing: 1px;
color: #000000;
background: #000000 url(
http://i38.photobucket.com/albums/e107/bel_layouts/food001/coffeelove_back.jpg) repeat;
margin: 0;
}
/* PAGE HEADER AND HEADER IMAGE SETTINGS */
.pageheaderblock {
background: #FAF9F5 url(
http://i38.photobucket.com/albums/e107/bel_layouts/food001/coffeelove_header.jpg) no-repeat top center;
width: 750px;
padding-top: 245px;
margin: auto;
text-align: center;
border-top: 13px solid #FAF9F5;
}
/* PAGE SETTINGS */
.pageblock {
background-color: #FAF9F5;
width: 780px;
margin: auto;
border: 1px solid #000000;
}
/* GENERAL LINKS */
a:link,a:active,a:visited {
font-weight: bold;
text-decoration: none;
color: #360E0C;
}
a:hover {
cursor: e-resize;
font-weight: bold;
text-decoration: none;
color: #977049;
}
/* HEADER TITLE AND SUBTITLE */
.header-title,.header-subtitle {
display: none;
}
/* NAVIGATION BAR */
.header-menu {
position: relative;
font-family: sans-serif, Arial;
font-size: 7.5pt;
text-transform: uppercase;
text-align: center;
background-color: #000000;
margin: auto;
width: auto;
border: 0;
padding-top: 45px;
}
.header-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li {
position: relative;
display: inline;
padding: 0px;
left: 0px;
right: 0px;
line-height: 24px;
}
/* NAVIGATION BAR LINKS */
.header-menu a, .header-menu a:visited, .header-menu a:active {
color: #D7CFBF;
text-decoration: none;
white-space: normal;
font-weight: bold;
padding: 0px 8px 0px 8px;
}
.header-menu a:hover {
color: #FFFFFF;
text-decoration: none;
cursor: e-resize;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/food001/coffeelove_smoke.gif) no-repeat top center;
padding-top: 45px;
}
/* TITLE IN EACH PAGE (entries, friends, calendar) */
.body-title {
font-family: "Times New Roman", Verdana;
font-weight: bold;
font-size: 11px;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: #D7CFBF;
line-height: 16px;
width: 750px;
margin: auto;
margin-top: 20px;
background-color: #000000;
padding: 2px 0px 2px 0px;
}
.body-midtitle {
font-family: Georgia, Verdana;
font-size: 8pt;
color: #FAF9F5;
text-align: left;
padding: 2px 0px 2px 0px;
background-color: transparent;
margin: auto;
}
/* MORE ENTRIES AND SIDEBAR BLOCK SETTINGS */
.bodyblock {
color: #510E08;
background-color: transparent;
padding: 15px 0px 0px 0px;
margin: auto;
width: 750px;
}
/* TITLE PAGE (entries, friends etc) SETTINGS */
.bodyheaderblock {
border: 0;
background-color: transparent;
padding: 0px;
margin: auto;
}
/* NAVIGATION LINKS (previous entries/top of page at the bottom) */
.bodynavblock {
color: #000000;
background-color: transparent;
margin: 0;
padding: 8px;
text-align: right;
border: 0;
}
.bodynavblock a, .bodynavblock a:visited {
color: #000000;
}
.bodynavblock a:hover {
color: #977049;
}
/* SIDEBAR SETTINGS */
.sidebar {
font-size: 11px;
margin: 0px 10px 0px 0px;
padding: 0px 0px 200px 0px;
width: 188px;
border: 0px solid #690303;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/food001/coffeelove_sidebar.jpg) no-repeat bottom center;
}
/* SIDEBAR BOX - BACKGROUND, BORDER, TEXT */
.sidebox {
color: #000000;
background-color: transparent;
margin-bottom: 10px;
padding: 2px 2px 5px 2px;
}
/* SIDEBAR - BOX TITLES */
.sideboxTitle {
font-family: Georgia, Arial;
font-size: 10px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
color: #D7CFBF;
line-height: 16px;
margin-top: 0px;
margin-bottom: 15px;
padding-left: 8px;
background-color: #000000;
border: 0;
}
/* SIDEBAR - BOX CONTENTS */
.sideboxContent {
font-family: Tahoma, Verdana;
font-size: 9px;
text-align: left;
padding-left: 5px;
}
/* PROFILE */
.sidebox #profile {
text-align: left;
text-transform: lowercase;
line-height: 16px;
}
#profile a, #profile a:active, #profile a:visited {
color: #000000;
}
#profile a:hover {
color: #977049;
}
/* PROFILE USERPIC */
.profile-userpic {
border: 0px solid #AF9C8F;
padding: 2px;
margin-left: 35px;
margin-bottom: 15px;
}
/* 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: #977049;
background-color: #F0EEE6;
}
/* TAGS LIST IN THE SIDEBAR */
.sidebox #tags_sidebox {
line-height: 16px;
text-align: left;
color: #000000; /* commas color */
}
#tags_sidebox a {
display: block;
margin-bottom: -16px;
color: #F5F3EF;
}
.sidebox #tags_sidebox a:link, .sidebox #tags_sidebox a:active, .sidebox #tags_sidebox a:visited {
display: inline;
text-decoration: none;
font-weight: normal;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
.sidebox #tags_sidebox a:hover {
color: #977049;
}
/* FREETEXT IN THE SIDEBAR */
#freetext a:link, #freetext a:active, #freetext a:visited {
line-height: 16px;
display: block;
padding-left: -10px;
}
#freetext a:hover {
color: #977049;
line-height: 16px;
display: block;
padding-left: -10px;
}
/* SUMMARY IN THE SIDEBAR */
.summaryList {
text-align: left;
}
.summaryList a:link, .summaryList a:active, .summaryList a:visited {
line-height: 16px;
font-weight:normal;
color: #000000;
}
.summaryList a:hover {
line-height: 16px;
color: #977049;
}
/* MINI-CALENDAR IN THE SIDEBAR */
.sidebox #latestmonth {
text-align: left;
}
/* MINI-CALENDAR POSITION */
.sidebox #latestmonth table {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 2px;
}
/* SPACE AMONG DAYS IN MINI-CALENDAR */
#latestmonth table td {
padding: 1px;
text-align: center;
color: #553E30;
text-transform: uppercase;
border: 1px solid #D6CEC0;
}
/* APPEARANCE OF DAYS IN MINI-CALENDAR */
.latestmonth-inactive {
background-color: #F0EDE8;
text-align: center;
padding: 3px;
}
.latestmonth-active {
background-color: #F5F3EF;
text-align: center;
padding: 3px;
}
.latestmonth-active a {
text-decoration: none;
}
.latestmonth-active a:hover {
color: #977049;
}
/* 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: #F5F3EF;
line-height: 20px;
margin-bottom: 2px;
margin-top: 2px;
}
/* WIDTH OF THE SEARCH BOX */
#SearchTerm {
position: relative;
left: 0;
width: 90%;
margin-left: 0;
}
/* CATEGORY LISTBOX IN SEARCH */
#SearchType, select {
font-family: Verdana, Arial;
font-size: 9.5px;
text-transform: lowercase;
letter-spacing: 1px;
line-height: 20px;
color: #000000;
width: 100px;
background-color: #F5F3EF;
margin-bottom: 2px;
margin-top: 2px;
}
/* ENTRIES BLOCK SETTINGS */
.entryHolder {
font-family: Tahoma, Verdana;
font-size: 8pt;
color: #4F0202;
margin: 0px 0px 0px 0px;
padding-bottom: 10px;
background-color: transparent;
border: 0;
}
.entryHeader {
text-align: left;
padding: 5px 5px 0px 17px;
margin-right: 5px;
height: 30px;
border: 0;
border-bottom: 1px solid #D7CFBF;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/food001/coffeelove_subj.jpg) no-repeat top left;
}
.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: #360E0C;
padding: 5px 5px 5px 5px;
}
.entryHeaderDate a {
color: #000000;
text-decoration: none;
}
.entryHeaderDate a:hover {
color: #977049;
text-decoration: underline;
}
/* SECURITY ICON */
.entryHeaderSubject img {
margin-bottom: -2px;
}
/* ENTRIES SUBJECT */
.entryHeaderSubject {
display: block;
font-family: sans-serif, Verdana;
font-size: 13px;
letter-spacing: 2px;
color: #501A00;
font-weight: bold;
text-align: left;
}
.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 #F5F3EF;
margin-top: 5px;
padding: 0px;
}
/* USERNAME IN THE FRIENDS PAGE */
.entryUserinfo-username {
text-align: center;
margin-top: 5px;
}
/* POSITION OF THE ENTRIES TEXT */
.entryText {
font-family: Verdana, Arial;
font-size: 7.5pt;
letter-spacing: 0px;
padding: 6px;
color: #2A0C01;
background-color: transparent;
margin: 5px 5px 10px 5px;
}
/* MOOD AND MUSIC */
.entryMetadata {
padding-left: 6px;
text-transform: lowercase;
color: #360E0C;
}
.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 {
color: #360E0C;
font-weight: normal;
}
.entryMetadata-content a:hover {
color: #977049;
text-decoration: underline;
}
/* COMMENTS IN THE ENTRIES */
.entryLinkbar {
font-size: 10px;
color: #430404;
text-align: right;
background-color: transparent;
padding: 60px 5px 5px 5px;
margin: 10px 5px 20px 0px;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/food001/coffeelove_beans.jpg) no-repeat bottom left;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
.entryLinkbar a, .entryLinkbar a:link, .entryLinkbar a:visited {
text-decoration: none;
padding-left: 8px;
background-color: #FAF9F5;
}
.entryLinkbar a:hover, .entryLinkbar a:active {
color: #977049;
text-decoration: none;
}
/* COMMENTS PAGE */
.commentHolder {
font-family: Tahoma, Verdana;
font-size: 9pt;
text-align: left;
color: #4F0202;
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 {
border: 1px solid #360E0C;
padding: 2px;
margin-top: 6px;
}
.commentText {
font-family: Tahoma, Verdana;
font-size: 8pt;
padding: 6px;
width: 90%;
}
.commentHeader {
background-color: #000000;
color: #D7CFBF;
font-size: 10px;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #F3F1E2;
}
.commentHeaderScreened {
font-size: 12px;
background-color: #F5F3EF;
padding: 4px 4px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
padding: 4px 0px 4px 8px;
}
.commentLinkbar {
font-size: 11px;
color: #430404;
text-align: center;
padding-top: 4px;
padding-bottom: 4px;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
.commentLinkbar a, .commentLinkbar a:link, .commentLinkbar a:visited {
color: #000000;
text-decoration: none;
}
.commentLinkbar a:hover, .commentLinkbar a:active {
color: #977049;
text-decoration: none;
}
.replyform {
padding-left: 10px;
background-color: transparent;
}
.replyform textarea {
width: 90%;
}
/* CALENDAR PAGE */
.yearlinks{
text-align: right;
}
.yearlink{
padding-left: 4px;
padding-right: 4px;
}
.month {
width: 90%;
border: 1px solid #F5F3EF;
margin: 8px 8px 8px 40px;
}
.daysubjects {
color: #000000;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
color: #000000;
background-color: #F5F3EF;
border: 0;
}
.day-blank {
border: 1px solid #F5F3EF;
}
.day {
border: 1px solid #F5F3EF;
}
.day-date {
text-align: center;
color: #000000;
width: 50%;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.day-count {
float: right;
text-align: center;
font-size: 12px;
width: 50%;
}
.day-count a {
text-decoration: none;
color: #360E0C;
}
.day-count a:hover {
text-decoration: none;
color: #977049;
}
/* TAGS PAGE */
.tagstable, .tagstable td {
border: 1px solid #D6CEC0;
text-align: left;
}
.tagstable {
font-size:90%;
width: 90%;
}
/* FOOTER SETTINGS */
.pagefooterblock {
text-transform: lowercase;
text-align: right;
padding: 100px 0px 10px 0px;
margin: auto;
width: 750px;
border: 0;
background: transparent url(
http://i38.photobucket.com/albums/e107/bel_layouts/food001/coffeelove_footer.jpg) no-repeat bottom left;
}
.pagefooterblock a, .pagefooterblock a:link, .pagefooterblock a:visited {
color: #360E0C;
text-decoration: none;
}
.pagefooterblock a:hover, .pagefooterblock a:active {
color: #B19C8E;
text-decoration: none;
}
#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 {
color: #000000;
white-space: nowrap;
font-family: Georgia, Verdana;
text-transform: uppercase;
padding-left: 15px;
}
#footer-menu a:hover {
color: #977049;
}
| 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/food001 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.
Cross-posted to
layouts_for_fun,
freelayouts and
freelayouts_s2.