pagans | LAYOUT | lisbeth & wentham

/* Cleaned CSS: */
/* LISBETH - layout by manual@dw
For the BLANKET theme
functional custom pages, disabled modules
tiny icons from http://p.yusukekamiyamane.com/*/

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: local('Open Sans Light'), local('OpenSans-Light'), url("https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: local('Open Sans Light'), local('OpenSans-Light'), url("https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZX5f-9o1vgP2EXwfjgl7AY.woff2") format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

body { padding: 0; margin: 0; text-align: center; color: #000;
background-color: #FEFEFF;
 font-family: 'Open Sans', 'Lato', sans-serif; font-size: 1em; }

a, a:active { text-decoration: none; color: #333; 
 }
a:visited { color: #666;
 }
a:hover { color: #000;
 }

q { font-style: italic; }

#canvas { margin: 0 auto 3em auto; text-align: justify; padding: 0; }
#content { padding: 0; margin: 0; }
#primary { width: 56%; margin: 0 auto; z-index: 0; padding: 0; }
#tertiary { display: none; }

/*--- header + footer ---*/
#header { width: 60%; margin: 0 auto 2em auto; background-color: transparent;
 }
#header>.inner { padding: 4em 2em; }
#footer { display: block; clear: both; }
.page-top, div.navigation.bottomnav { width: 60%; margin: 0 auto; text-transform: lowercase; text-align: center; font-weight: bolder; letter-spacing: 3pt; font-size: 1.0em; font-style: italic; }
.navigation { text-transform: uppercase; text-align: right; width: 100%; }
li.page-back, li.page-forward { display: inline; list-style: none; padding: 0; margin: 0 0 0 0.3125em; }
li.page-separator { display: none; }
div.navigation ul { display: inline; padding: 0; margin: 0; }

div.navigation.topnav { display: none; }

/*--- header texts ---*/
div#header h1#title { text-transform: uppercase; font-weight: 200; text-align: center; letter-spacing: 3pt; padding: 0; margin: 0; color: inherit; font-family: inherit; font-style:italic; font-size: 2,0em; }
div#header h2#subtitle { text-transform: lowercase; font-weight: 600; text-align: center; letter-spacing: 3pt; padding: 0; margin: 0; color: inherit;
 font-family: inherit; font-style:italic; font-size: 1em; }
div#header h2#pagetitle { display: none; }

/*--- navigation links ---*/
div.module-navlinks, div.module-navlinks ul.module-list, div.module-navlinks ul.module-list li { display: none; }

/*--- modules ---*/
#secondary, #secondary>.inner, #secondary .module, #secondary .module-header, #secondary .module-header a, #secondary .module-header, #secondary .separator-after, .module-tags_cloud, .module-tags_cloud .module-content, .module-tags_cloud li, .tags_cloud li, ul.userlite-interaction-links.icon-links, ul.userlite-interaction-links.icon-links li, .module-calendar td a, .module-credit dt, .module-search .search-form, .module-search .search-box, #secondary .module-content, #secondary .module-content ul, #secondary .module-content li { display: none; }

/*--- entry ---*/
div.entry { padding: 0; margin: 0 0 3em 0; color: #000;
background-color: transparent !important;
 }
div.entry-content { margin: 1em 1em 1em 1.4em; font-size: 0.9em; }

div.entry-content a, a.active, a.visited, a.hover {font-weight: 800; font-style: italic; background-color: #d2d1d2;}

div.header { padding: 0; margin: 0 0 1em 0; }
h3.entry-title { font-weight: normal; letter-spacing: 2pt; padding: 0; margin: 0; font-family: inherit; font-size: 1.8em; color: #099aaf; font-style:italic;
 }
h3.entry-title a { color: #000;
 }

h3.sticky-entry-title.entry-title { font: inherit; color: inherit; text: inherit; }

h3.sticky-entry-title.entry-title img { -webkit-filter: grayscale(1); }

.datetime { font-size: 0.80em; font-weight: normal; text-transform: lowercase; letter-spacing: 2px; font-style: italic; padding: 5px 0; color: #999999;
 }
.datetime a { color: #999999;
 }

.userpic { display: inline-block; }

.userpic img {
    padding: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    margin-left: -120px;
    height: 90px; width: 90px; }

span.poster.entry-poster{ font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #c8c8c8;
 }
img.ContextualPopup-trigger { margin-bottom: 2px; padding: 0 2px; width: 12px; height: 12px; }

span.cuttag_container img { display: none; }

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

.metadata { margin: 2em 0 0 0; }
.metadata.top-metadata { margin: 1em 0 2em 0; }
div.metadata ul { padding: 0; margin: 0; }
div.metadata ul li { list-style: none; font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #c8c8c8;
 }
span.metadata-label-location, span.metadata-label-mood, span.metadata-label-music { display: none; }
span.metadata-item-location { padding: 0 0 0 1.3em; }
span.metadata-item-mood { padding: 0 0 0 1.3em; }
span.metadata-item-music { padding: 0 0 0 1.3em; }

span.tag-text { display: none; }
div.tag ul { padding: 0 0 0 1.3em; margin: 0; display: inline; }
div.tag ul li { display: inline; list-style: none; font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #c8c8c8;
 }

ul.entry-management-links { padding: 0; margin: 2em 0 0 0; -webkit-filter: grayscale(1); text-align: center; }
ul.entry-management-links li { display: inline; list-style: none; font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0 5px 0 0; color: #c8c8c8;
 }

ul.entry-interaction-links { padding: 0 0 0.5em 0; margin: 1em 0 0 0; text-align: center; padding-bottom: 1em; border-bottom: 1px solid #999999; }
ul.entry-interaction-links li { display: inline; list-style: none; font-size: 0.9em; font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0 5px 0 0; color: #c8c8c8;
 }

/*--- comments ---*/

.comment-title {
    font-family: inherit; 
    }

.comment-title h4 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
}

hr.above-entry-interaction-links, hr.below-reply-container { display: none; }

input, textarea { padding: 5px; font: 1em Helvetica, Arial, 'Arial Narrow', sans-serif; line-height: 1.8em; color: #888888;
background-color: #ffffff;
border: solid 1px #eeeeee;
 }
textarea.textbox  { width: 100% !important; }

.comment { margin: 0 auto 2em auto; padding: 40px 20px; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
 }
.comment-wrapper { margin: 2em 0; padding: 0; }

.bottomcomment, .comments-message { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
 }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0!important; }

/*--- archive ---*/
li.active { list-style: none; display: inline; text-transform: uppercase; padding: 0; margin: 0; text-align: center; color: #d58d0f;
 }

.month { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
 }
.month h3 { font-size: 1em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; text-align: right; color: #099aaf;
 }

div.navigation ul { display: inline; }
div.navigation li { display: inline; list-style: none; }

.month th { font-size: 0.9em; font-weight: normal; text-transform: uppercase; padding: 5px; text-align: center; color: #6c6c6c;
background-color: #eeeeee;
 }
.month table { width: 100%; border: 0; margin: auto; }
.month caption { display: none; }

td.day { padding: .5em; border: .1em solid #eeeeee; }

/*--- tags ---*/
.page-tags .tags-container h2 { font-size: 1em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; text-align: right; color: #099aaf;
 }

.page-tags .tags-container { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
}

.page-tags .tags-container ul { margin: 1em; padding: 0; }
.page-tags .tags-container ul li { margin: 0 0 0 1em; padding: 0; list-style: none; }

.userpic { float: left; margin: 0 10px 10px 0; }
/* ENTRY TINYICON REPLACEMENTS */

#canvas img[src*="user.png"]  {
    width: 0 !important;
    height: 0 !important;
    background: transparent!important;
    background-image: url("https://i.imgur.com/yBoBLMj.png") !important;
    background-repeat: no-repeat !important;
    background-position: 0; !important; !important;
    padding:16px 16px 0 0 !important; }

#canvas img[src*="community.png"]  {
    width: 0 !important;
    height: 0 !important;
    background: transparent!important;
    background-image: url("https://i.imgur.com/AdEJonv.png") !important;
    background-repeat: no-repeat !important;
    background-position: 0; !important; !important;
    padding:16px 16px 0 0 !important; }

#canvas img[src*="locked.png"]  {
    float: left;
    width: 0 !important;
    height: 0 !important;
    background: transparent!important;
    background-image: url("https://i.imgur.com/Ju8zWZA.png") !important;
    background-repeat: no-repeat !important;
    background-position: 0; !important; !important;
    margin: 2px 0 5px 5px;
    padding:16px 16px 0 0 !important; }

#canvas img[src*="private.png"]  {
    float: left;
    width: 0 !important;
    height: 0 !important;
    background: transparent!important;
    background-image: url("https://i.imgur.com/LYPYXaM.png") !important;
    background-repeat: no-repeat !important;
    background-position: 0; !important; !important;
    margin: 2px 0 5px 5px;
    padding:16px 16px 0 0 !important; }
        
/*--- Navigation Bar ---*/

#lj_controlstrip {
	background-color: #fff;
	background-image: none;
	height: 45px; color: 000;
        border-bottom: 1px solid #999;
        box-shadow: 0px 0px 5px #555;
}

#lj_controlstrip_userpic {
	padding-top: 5px;
	padding-left: 5px;
	height: 45px;
}

#lj_controlstrip td {
	font-family: helvetica,arial,sans-serif;
	font-size: 11px;
	line-height: 18px;
	letter-spacing: normal;
	color: #000;
}

#lj_controlstrip_statustext {
	color: #000;
	font-weight: normal;
	font-family: helvetica,arial;
	font-size: 14px;
}

#lj_controlstrip a, #lj_controlstrip .ljuser a b{
	color: #000;
	padding: 2px;
}

#lj_controlstrip a:hover {
	background: #555555;
	text-decoration: none;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
	border-right: 0px !important; color: #000;
}

WENTHAM

/* Cleaned CSS: */
/* CHRISTIE - layout by manual@dw
For the BLANKET theme
functional custom pages, disabled modules
tiny icons from http://p.yusukekamiyamane.com/*/

/* latin */
@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  src: local('IM FELL English Roman'), local('IM_FELL_English_Roman'), url("https://fonts.gstatic.com/s/imfellenglish/v6/xwIisCqGFi8pff-oa9uSVAkYLEKE0CJQa8tfZYc_plY.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  font-weight: 400;
  src: local('IM FELL English Italic'), local('IM_FELL_English_Italic'), url("https://fonts.gstatic.com/s/imfellenglish/v6/Z3cnIAI_L3XTRfz4JuZKbmwF2xAZ8zQZAh2gFEDZc7E.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body { padding: 0; margin: 0; text-align: center; color: #000;
background-color: #FEFEFF;
 font-family: 'IM FELL English Roman', 'Lora', serif; font-size: 1em; }

a, a:active { text-decoration: none; color: #333; 
 }
a:visited { color: #666;
 }
a:hover { color: #000;
 }

q { font-style: italic; }

#canvas { margin: 0 auto 3em auto; text-align: justify; padding: 0; }
#content { padding: 0; margin: 0; }
#primary { width: 56%; margin: 0 auto; z-index: 0; padding: 0; }
#tertiary { display: none; }

div.navigation.topnav { display: none; }

/*--- header texts ---*/
div#header h1#title { text-transform: uppercase; font-weight: 100; text-align: center; letter-spacing: 3pt; padding: 0; margin: 0; color: inherit; font-family: inherit; font-style:italic; font-size: 2,0em; }
div#header h2#subtitle { text-transform: lowercase; font-weight: 600; text-align: center; letter-spacing: 3pt; padding: 0; margin: 0; color: inherit;
 font-family: inherit; font-style:italic; font-size: 1em; }
div#header h2#pagetitle { display: none; }

/*--- navigation links ---*/
div.module-navlinks, div.module-navlinks ul.module-list, div.module-navlinks ul.module-list li { display: none; }

/*--- entry ---*/
div.entry { padding: 0; margin: 0 0 3em 0; color: #221922;
background-color: transparent !important;
 }
div.entry-content { margin: 1em 1em 1em 1.4em; }

div.entry-content a, a.active, a.visited, a.hover {font-weight: 800; font-style: italic; background-color: #d2d1d2;}

h3.sticky-entry-title.entry-title { font: inherit; color: inherit; text: inherit; }

h3.sticky-entry-title.entry-title img { -webkit-filter: grayscale(1); }

.datetime { font-size: 0.80em; font-weight: normal; text-transform: lowercase; letter-spacing: 2px; font-style: italic; padding: 5px 0; color: #999999;
 }
.datetime a { color: #999999;
 }

.userpic { display: inline-block; }

.userpic img {
    padding: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    margin-left: -120px;
    height: 90px; width: 90px; }

span.cuttag_container img { display: none; }

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

/*--- comments ---*/

.comment-title {
    font-family: inherit; 
    }

.comment-title h4 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
}

hr.above-entry-interaction-links, hr.below-reply-container { display: none; }

.comment { margin: 0 auto 2em auto; padding: 40px 20px; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
 }
.comment-wrapper { margin: 2em 0; padding: 0; }

.bottomcomment, .comments-message { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
 }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0!important; }

/*--- archive ---*/
li.active { list-style: none; display: inline; text-transform: uppercase; padding: 0; margin: 0; text-align: center; color: #d58d0f;
 }

div.navigation ul { display: inline; }
div.navigation li { display: inline; list-style: none; }

td.day { padding: .5em; border: .1em solid #eeeeee; }

/*--- tags ---*/
.page-tags .tags-container h2 { font-size: 1em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; text-align: right; color: #099aaf;
 }

.page-tags .tags-container { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
}

.page-tags .tags-container ul { margin: 1em; padding: 0; }
.page-tags .tags-container ul li { margin: 0 0 0 1em; padding: 0; list-style: none; }

.userpic { float: left; margin: 0 10px 10px 0; }
/* ENTRY TINYICON REPLACEMENTS */

/*--- Navigation Bar ---*/

#lj_controlstrip {
	background-color: #fff;
	background-image: none;
	height: 45px; color: 000;
        border-bottom: 1px solid #999;
        box-shadow: 0px 0px 5px #555;
}

#lj_controlstrip_userpic {
	padding-top: 5px;
	padding-left: 5px;
	height: 45px;
}

#lj_controlstrip td {
	font-family: helvetica,arial,sans-serif;
	font-size: 11px;
	line-height: 18px;
	letter-spacing: normal;
	color: #000;
}

#lj_controlstrip_statustext {
	color: #000;
	font-weight: normal;
	font-family: helvetica,arial;
	font-size: 14px;
}

#lj_controlstrip a, #lj_controlstrip .ljuser a b{
	color: #000;
	padding: 2px;
}

#lj_controlstrip a:hover {
	background: #555555;
	text-decoration: none;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
	border-right: 0px !important; color: #000;
}

HOW TO (updated 18.04.2025):
— Select a Blanket layout; I used Peach by sforzinda.
— Go to the Custom CSS tab and uncheck the Use Layout's Stylesheet(s) box.
— Copy the version code from above that you prefer.
— Paste the code in, hit save, and you're done.
— The comment pages are functional, but because it's high-contrast black/white it might give you a headache, so I'd suggest turning it off. All sidebar modules have been disabled because I kinda hate them.
— Tested on FF and Chrome, not responsive.

If you have questions/troubleshooting concerns, ask away in the comments. DISCLAIMER!!! I might take a long while to get back to you, on the other hand, so take this as a blanket (hehe) pass to edit as you feel like.

Flat | Top-Level Comments Only

*grabby hands*
These are perfect! Minimal and contrasting and smooth. Thank you :)

Oooh these look great! Adding to my memories.

LOVE IT! using wentham

This is so pretty!! Using for this journal here.

Using Lisbeth, thank you.

Ahh perfect, just the sort of thing I was looking for! Using for this account!

Thank you!! Wentham is one of the most beautiful layouts I've ever seen.

Edited 2015-10-20 23:18 (UTC)

These are gorgeous!! I'm using Lisbeth for this account.

These are beautiful. Thank you! Using Lisbeth for this account.

These are gorgeous.

Edited 2015-12-05 09:30 (UTC)

Quite nice. Using Lisbeth - thank you.

taking the second. these are gorgeous. thank you!

Very lovely!

Is it okay if I ask a question? I set the width of the entry content to 650 px and figured out that I neeed to set the margin to 'auto' to align it to the center, but the user image, entry title, date and time aren't. They're more to the left. What do I need to change in the code to match their alignment with that of the entry content? Thanks in advance!

ETA: I figured it out! :)

Edited 2016-06-20 18:15 (UTC)