#72 - Veiled Sadness

Apr 08, 2010 20:27

It's been a while, hasn't it?
The following layout has been sitting unfinished on my laptop since January. I started making it to get my mind of my disappeared cat Billy - who's still is missing by the way :'(. That's why I titled this layout Veiled Sadness.
I finally found some time and some envie to finish this one. Hopefully you'll like it :).

Description Name: Veiled Sadness Description: A sober, yet elegant layout in the Minimalism style.

General Information Layout Style: Minimalism
Thanks to grrliz for the template! Tested in: Mozilla Firefox and Internet Explorer Best Resolution: 1024*768 and above Account Levels: Layout works with all account levels (Basic, Plus, Paid). [ How to change add orientation] Works with Navigation Strip: Yes [ How to enable/disable] Credit: Credit to me is implemented in the footer of the page.



{Bigger} {Live Preview}

Installation Go to Manage: Customize Select a new Theme:
  • Check the box next to 'Only show themes available to me'
  • Type 'Minimalism' in the Search box
  • Click search
  • Apply any theme that has the header icon on the top left (e.g. Deep Ocean, Bad Weather, Stone Age, ...)
Choose a Page Setup
  • Plus accounts: Choose an Ad placement and save
  • Apply the following: '2 Column (sidebar on left)' or '2 Column (sidebar on right) (sidebar will always appear on the left!)'
  • Click 'Customize Selected Theme'
Choose 'Custom CSS' from the menu on the left:
  • Use layout's stylesheets: No
  • Use layout's theme's stylesheet : No
  • Custom external stylesheet URL: Leave empty
  • Custom stylesheet: Paste the codes (given bellow) in the box

Hit 'Save Changes'

Images & Code The images are uploaded to my own accounts. If you want to avoid bandwidth getting exceeded it is recommended to upload the images to your own server.
If you upload the images to your own account, don't forget to change the URL's in the code!

Paste these codes in the "Custom stylesheet" box.

/*=================================================================================================================================================*/ /*------------------------------------------------------- LAYOUT 72: VEILED SADNESS --------------------------------------------------*/ /*------------------------------------------------------------- S2 STYLE: MINIMALISM --------------------------------------------------------------*/ /*----------------------------------------------------------------- DATE: APRIL 2010 -----------------------------------------------------------*/ /*------------------------------- AVAILABLE AT GAWARIEL_DESIGN (http://community.livejournal.com/gawariel_design/) -------------------------------*/ /*--------------------------------------------- CREATED BY GAWARIEL (http://gawariel.livejournal.com/) --------------------------------------------*/ /*---------------------------------------------------------- IMAGES MADE IN PHOTOSHOP CS ----------------------------------------------------------*/ /*------------------------- MINIMALISM TEMPLATE BY GRRLIZ FROM THE FULCRUM (http://community.livejournal.com/thefulcrum/) -------------------------*/ /*=================================================================================================================================================*/ /*----------------------------------------*/ /*---------- GENERAL FORMATTING ----------*/ /*----------------------------------------*/ * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } html { font-size: 100%; } body { margin: 0 auto; padding: 0; text-align: center; background: #BCC4C6 url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/body.jpg) top center repeat-y; font-family: candara, helvetica, verdana, arial, tahoma, sans-serif; font-size: 62.5%; } table { border-collapse: collapse; /*sets default to single border instead of double*/ border-spacing: 0; } blockquote { width: 80%; margin: 0 auto; background: #FFFFFF; padding: 10px; border-top: 5px solid #264247; border-bottom: 5px solid #99625E; } a { color: #23616D; text-decoration: none; } a:hover { color: #9A4E48; } .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/user.png); padding: 15px 0px 0 10px!important; } .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/community.png); padding: 15px 0px 0px 15px!important; } /*--------------------------* /*---------- PAGE ----------*/ /*--------------------------*/ #page { font-size: 1.2em; height: 600px; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/container.jpg) repeat-x top center; } .layout { margin: 0px auto; text-align: left; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/header.jpg) no-repeat top center; } .layout-inner { position: relative; overflow: hidden; width: 900px; margin: 0 auto; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/sig.jpg) no-repeat bottom right; } /*-- CONTAINS HEADER AND MAIN CONTENT BUT NOT SIDEBAR --*/ .content { float: left; display: inline; width: 680px; padding: 10px; } /*-- CONTENT WITHOUT HEADER --*/ .content-inner { margin: 120px auto 0 auto; } /* JOURNAL TITLE, DEFAULT ICON, NAVIGATION */ .header { margin: 0 auto; padding: 10px 0 0 0; width: 900px; } .sidebar { float: right; display: inline; width: 190px; padding: 0; margin: 318px 8px 60px 0; } /*----------------------------*/ /*---------- HEADER ----------*/ /*----------------------------*/ .header .vcard, .header h1 { display: none; } .header .userpic, .header h2, .header h3 { position: relative; text-align: center; margin: 0 auto; } .header .userpic img { padding: 6px; background: #264247; border: 6px solid #99625E; } .header h2 { font-family: times new roman, serif; text-transform: lowercase; font-size: 30px; color: #FFFFFF; font-weight: normal; letter-spacing: 1px; } .header h3 { font-family: times new roman, serif; text-transform: lowercase; font-size: 15px; color: #535F5F; font-weight: normal; letter-spacing: 1px; } /*-- NAVIGATION --*/ .header ul.nav { position: absolute; top: 238px; text-align: center; list-style-type: none; font-family: times new roman, serif; text-transform: lowercase; font-size: 1.4em; letter-spacing: 0.05em; } .header ul.nav li.item { display: inline; } .header ul.nav li.item a{ line-height: 40px; color: #B1BBBC; font-weight: normal; text-decoration: none; padding: 0 23px; } .header ul.nav li.item a:hover{ color: #EABBB6; text-decoration: underline; } .header ul.nav-sub, .item-addfriend, .item-rss { display: none; } /*-----------------------------*/ /*---------- CONTENT ----------*/ /*-----------------------------*/ /*-- EACH SEPARATE ENTRY --*/ div.entry-wrap { background: #D1D9DB url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-wrap.jpg) repeat-x 0 50px; border: 5px solid #DDDDDD; line-height: 1.5em; color: #444444; text-align: justify; margin: 0 0 50px 0; } /*-- ENTRY TITLE --*/ dt.entry-title { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-title.jpg) repeat-x top center; border: 1px solid #FFFFFF; border-bottom: 0; height: 50px; font-family: times new roman, serif; font-size: 2.0em; line-height: 0.8em; padding: 10px 0 0 10px; text-transform: lowercase; color: #FFFFFF; } dt.entry-title a { text-decoration: none; color: #FFFFFF; } dt.entry-title a:hover { color: #EABBB6; } dt.entry-title img { padding-right: 5px; } /*-- USERPIC AND USERNAME --*/ dl.vcard { z-index: 101; max-width: 120px; padding: 8px; } dl.vcard dt img { padding: 3px; background: #264247; border: 3px solid #99625E; } dl.vcard { display: inline; float: right; margin: 0px 0px 5px 10px; text-align: center; } .ljuser img { vertical-align:middle !important; } .ljuser .ico img { vertical-align: -.4em !important; } dd.entry-date { font-size: 1.1em; font-style: italic; color: #99625E; } /*-- CURRENT MOOD, MUSIC, LOCATION --*/ .metadata { padding: 8px; margin-bottom: 1.5em; font-size: 0.9em; } .metadata dl { margin: 0; display: block; } .metadata dt, .metadata dd { display: inline; margin-left: 0; font-style: italic; } .metadata dt { font-weight: bold; margin-right: .4em; } .metadata dd img { vertical-align: bottom; } /*-- ENTRY AREA --*/ div.entry-content { padding: 8px; } div.entry-content ol { margin: 1em 3em; } div.entry-content ul { margin: 1em 1.4em; } div.entry-content p { padding: 1em 0; } div.entry-content br { height: 1em; } div.ljtags { display: block; font-weight: bold; font-style: italic; font-size: 0.9em; } /*-- COMMENT BAR --*/ dd.entrymenu { clear: both; position: relative; height: 50px; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-menu.jpg) repeat-x bottom center; font-size: 1.3em; font-family: times new roman, serif; text-transform: lowercase; border: 1px solid #FFFFFF; border-top: 1px solid #ABB9BC; } dd.entrymenu ul { list-style-type: none; text-align: right; padding: 10px; margin: 5px 0 0 60px; } dd.entrymenu ul li { display: block; float: left; padding: 0 10px; } dd.entrymenu ul li a { color: #FFFFFF; } dd.entrymenu ul li a:hover { color: #EABBB6; } dd.entrymenu ul li.comments { position: absolute; top: 0px; left: 0px; padding: 0; } dd.entrymenu ul li.comments a { display:block; margin: 0 20px; color: #ffffff; font-size: 3.0em; line-height: 50px; } dd.entrymenu ul li.comments a:hover { color: #EABBB6; } /*-- PREVIOUS AND NEXT LINKS --*/ ul.page-nav { list-style-type: none; overflow: hidden; margin: 0 0 60px 0; padding: 0px 0px 20px 0; text-align: center; font-family: times new roman, serif; text-transform: lowercase; font-size: 1.4em; letter-spacing: 0.05em; } ul.page-nav li { display: inline; padding: 0px 0px 0px 30px; } /*-----------------------------*/ /*---------- SIDEBAR ----------*/ /*-----------------------------*/ div.hr {clear: both;} div.hr hr {display: none;} .sidebar-inner { line-height: 1.5em; color: #444444; margin: 0; } .sidebar-block { background: #D1D9DB url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-wrap.jpg) repeat-x top center; border: 5px solid #DDDDDD; margin: 0 0 20px 0; text-align: justify; } .sidebar-block ul li { padding: 0; margin: 0 0 0 20px; line-height: 1.5em; } /*-- BLOCKTITLE --*/ .sidebar-block dt { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-title.jpg) repeat-x center; border: 1px solid #FFFFFF; height: 25px; color: #FFFFFF; font-family: times new roman, serif; font-size: 1.5em; line-height: 0.8em; padding: 10px 0 0 10px; text-transform: lowercase; } /*-- BLOCK CONTENT --*/ .sidebar-block dd { padding: 2px 5px; background: #D1D9DB url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-wrap.jpg) repeat-x top center; } .sidebar-links dd { margin: 0 0 0 10px; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/bullet.png) no-repeat center left; padding: 0 0 0 12px; line-height: 1.5em; } .sidebar-custom { line-height: 1.5em; } .sidebar-powered { display: none; } /*-- SIDEBAR CALENDAR --*/ .sidebar .calendar-wrap { float: left; padding: 1em 2em; } .sidebar .calendar-wrap { float: none; width: auto; height: auto; padding: 0 5px; } .sidebar .calendar-wrap table { width: 100%; } .sidebar .calendar-wrap table caption { text-align: center; height: 2em; font-size: 1.2em; text-transform: uppercase; } .sidebar .calendar-wrap table thead th { background: none; text-align: center; font-weight: normal; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-menu.jpg) repeat-x bottom center; border: 1px solid #FFFFFF; padding: 1px; color: #FFFFFF; } .sidebar .calendar-wrap table tbody td { font-size: 1.1em; line-height: 29px; text-align: center; border: 1px solid #FFFFFF; } .sidebar .calendar-wrap table tbody td a { display: block; line-height: 27px; text-decoration: none; font-size: 1.5em; } /*----------------------------------*/ /*---------- ARCHIVE PAGE ----------*/ /*----------------------------------*/ .view-archive .content-inner .entry-title { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-title.jpg) repeat-x top center; border: 1px solid #FFFFFF; height: 50px; font-family: times new roman, serif; font-size: 2.0em; line-height: 0.8em; padding: 15px 0 0 10px; text-transform: lowercase; color: #FFFFFF; } .view-archive .content-inner .entry-text ul { list-style-type: none; margin: 0 10px; } .view-archive .content-inner .entry-text ul li { display: inline; padding-right: 15px; font-size: 1.2em; } .content-inner .calendar-wrap table { width: 90%; margin: 0 auto; padding: 10px 0 30px 0; border-collapse: separate; border-spacing: 1px; text-align: center; font-size: 1.2em; } .content-inner .calendar-wrap table caption { text-align: left; padding: 20px; height: 2em; font-size: 1.2em; text-transform: uppercase; } .content-inner dl.entry .calendar-wrap table caption .year { display: none; } .content-inner .calendar-wrap table th { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-menu.jpg) repeat-x bottom center; color: #FFFFFF; padding: 1px; } .content-inner .calendar-wrap table tbody td { padding: 2px 4px; text-align: center; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-wrap.jpg) center; } .content-inner .calendar-wrap table tbody td a { display: block; padding: 2px 4px; border: 0; margin: -2px -4px; text-align: center; text-decoration: none; background: #FFFFFF; } /*-----------------------------------*/ /*---------- COMMENTS PAGE ----------*/ /*-----------------------------------*/ dt.entry-linkbar { position: relative; background: transparent; border: 0; margin: 0 auto; padding: 10px 0 0 10px; background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-wrap.jpg) repeat-x top center; } dt.entry-linkbar a { margin: 0; padding: 0; } .comments-links { background: url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-title.jpg) repeat-x top center; border: 1px solid #FFFFFF; height: 50px; font-family: times new roman, serif; font-size: 2.0em; line-height: 0.8em; padding: 15px 0 0 10px; text-transform: lowercase; color: #FFFFFF; text-align: center; } .entry-comments-text { overflow: auto; overflow-y: hidden; } .comment-wrap { background: #D1D9DB url(http://i19.photobucket.com/albums/b153/gawariel_design/72_Veiled%20Sadness/entry-wrap.jpg) repeat-x top center; border: 5px solid #DDDDDD; line-height: 1.5em; color: #444444; text-align: justify; margin: 0 0 20px 0; } .comment-head { border-bottom: 1px solid #444444; padding: 0 0 5px 0; } .comment-head h3 { text-transform: uppercase; font-size: 1.5em; color: #444444; font-weight: normal; padding: 5px 0; } .comment-head-in { padding: 0 10px; } .comment-head .comment-upic { float: left; display: inline; margin: 4px; padding: 0px 10px 5px 0px; } .comment-head .comment-upic img { float: left; padding: 3px; background: #264247; border: 3px solid #99625E; } .comment-head p, .comment-head img { vertical-align: bottom; } .comment-text { padding: 0px 0px 0px 130px; } .comment-menu { text-align: right; padding: 10px 0; } .comment-wrap .comment-text .hr {display: none;} #qrdiv form { display: block; padding: 5px; border: 1px solid #ABB9BC; margin: 5px 1px 1px; } #qrdiv #subject { margin: 3px 0; } #qrdiv table { border: none !important; } .replyform table td, #qrdiv table td { padding-right: .4em; vertical-align: top; } .replyform textarea, #qrdiv textarea { width: 90%; border: 1px solid #ABB9BC; font-size: 1.2em; padding: 1px; } input { margin: 5px; padding: 1px 2px; border: 1px solid #ABB9BC; }

Troubleshooting Before asking any questions, make sure you read all information above thoroughly 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: [s2]: minimalism, layouts: account status: paid, layouts, layouts: account status: basic

Previous post Next post
Up