bakesale | THEME 001: Wry

Wry was designed to be a clean, minimalistic theme with maximum readability for long passages, such as if you roleplay, post fiction, or simply write extensive entries. The 100% Easy-to-Read Standard was a big inspiration (even if the theme may not meet the standard completely).

NOTABLE FEATURES

› Styled comments pages
› Fluid width
› Optional modules in footer

› Nav bars hidden until hover
› Clean and lovely web fonts
› Tested for community use

HOW TO INSTALL THE THEME

Read my Terms of Use. By continuing installation, you are agreeing to full compliance with these terms.

From the Select Journal Style page, choose one of the themes for Five AM. (I used "Early Edition," but in theory any should work.)

On the same page, scroll down to section 3. Choose a Page Setup and select 1 Column (modules at bottom; no sidebar).

Click Customize Selected Theme at the bottom right.

On the Modules tab, select your desired modules for the Main Module Section, if any. These will appear at the bottom of the theme. Also make sure that Navigation is selected and under Header.

On the Custom CSS tab, deselect "Use layout's stylesheet(s)" (there should be NO CHECKMARK), paste the code below into "Use embedded CSS" and save.

THE CUSTOM CSS CODE

/* Theme: Wry */
/* By: bakesale.dreamwidth.org */
/* Dreamwidth Base Style: Five AM */

/* FONTS */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat-Bold'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v3/IQHow_FEYlDC4Gzy_m8fcgFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

/* BASICS */

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	}

body {
	margin:0;
	background:#f5f5f5;
	color:#323232;
	padding-bottom:50px;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	}

img {
	border:0;
	}
	
a, a:active, a:visited {
	text-decoration:none;
	color:#666;
	transition:color 1s ease;
	}
	a:hover {
		color:#999;
		}
hr {border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3);}

h1, h2, h3 {
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	}

/* NAVIGATION */

.module-navlinks {
	background:#c0c0c0;
	padding:8px;
	text-align:center;
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	position:fixed;
	bottom:-25px;
	width:100%;
	transition:bottom 1s ease;
	z-index:9;
	}
	.module-navlinks:hover {
		bottom:0;
		}

#header .module-list {
	list-style:none;
	display:inline;
	width:100%;
	margin:0;
	}
	#header .module-list ul {
		margin:0;
		padding:0;
		width:100%;
		padding:5px 8px;
		}
	#header .module-list li {
		display:inline;
		padding:5px 8px;
		text-transform:uppercase;
		}
		#header .module-list a, #header .module-list a:active, #header .module-list a:visited {
			color:#666;
			padding:8px;
			}
			#header .module-list a:hover {
				background:#ccc;
				}
#header #title a, #header #title a:visited {color:#f9f9f9;}
#header #title a:hover {color:#fff;}

.topnav, #module-jump-link {display:none;}

.navigation ul, .comment-pages {
    margin-left: 0;
    padding-left: 0;
	font-family:'Montserrat', Helvetica, Arial, sans-serif;
	text-align:center;
	text-transform:uppercase;
	color:#999;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
	.navigation li a, .navigation li a:active, .navigation li a:visited {
		color:#666;
		}
		.navigation li a:hover {
			color:#999;
			}
		
.noentries {
    padding: 0 .5em;
}
				
/* HEADER */
	
#header #title {
	text-align:center;
	text-transform:uppercase;
	font-family:'Montserrat', Helvetica, Arial, sans-serif;
	font-size:80px;
	margin:0;
	padding:0;
	color:#f9f9f9;
	text-shadow: -1px -1px 1px #fff, 1px 1px .03em #666;
	}
	
#pagetitle, #subtitle {display:none;}
		
/* CONTROLSTRIP */

#lj_controlstrip {
	background:#ccc;
	opacity:0;
	transition:opacity 1s ease;
	}
	#lj_controlstrip:hover {
		opacity:1;
		}
		
/* ENTRIES */

#content {
	width:70%;
	margin:0 auto;
	border-top:1px dashed #ccc;
	padding-top:20px;
	margin-top:15px;
	}

#entries {
	margin-top:20px;
	}
	
.entry, .comment {
	position: relative;
	margin-bottom:50px;
	}
		
.entry-content, .comment-content {
	font-size: x-large;
	font-family:Georgia, "Times New Roman", Times, serif;
	line-height:140%;
	margin:15px 0;
	}

.entry .userpic, .comment .userpic {
	position:absolute;
	top:75px;
	left:-120px;
	}
	.entry .userpic img, .comment .userpic img {
		border-radius:50px;
		opacity:.7;
		transition:opacity 2s ease;
		}
		.entry .userpic img:hover, .comment .userpic img:hover {
			opacity:1;
			-moz-transform: scaleX(-1);
       	 	-o-transform: scaleX(-1);
        	-webkit-transform: scaleX(-1);
        	transform: scaleX(-1);
        	filter: FlipH;
        	-ms-filter: "FlipH";
			}
			
.entry .header, .comment .header {
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	text-align:center;
	font-size:larger;
	color:#333;
	margin-bottom:15px;
	}

.sticky-entry-icon {display:none;}

.entry-title, .comment-title {
	margin:0;
	font-size:x-large;
	}
	.entry-title a, .entry-title a:active, .entry-title a:visited, .comment-title a, .comment-title a:visited, .comment-title a:active {
		color:#333;
		}
		.entry-title a:hover, .comment-title a:hover {
			color:#999;
			}

.entry .datetime, .entry .datetime a, .entry .datetime a:visited, .entry .datetime a:active, .comment .datetime {
	color:#999;
	}
	.entry .datetime a:hover {
		color:#666;
		}

.entry .poster, .comment .poster {
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	color:#999;
	}

.entry .poster img, .comment .poster img {display:none;}

.entry .poster a, .entry .poster a:active, .entry .poster a:visited, .comment .poster a, .comment .poster a:active, .comment .poster a:visited {
	color:#ccc;
	transition:color 1s ease;
	}
	.entry .poster a:hover, .comment .poster a:hover {
		color:#333;
		}

.entry .ljuser img {
	padding-bottom:6px;
	}

.metadata {
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	color:#616161;
	padding-top:20px;
	}
	.metadata ul {
		list-style:none;
		padding:0;
		text-align:center;
		}
		.metadata li {
			display:inline;
			padding-right:8px;
			}

.tag {
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	background:#f9f9f9;
	padding:8px;
	}
	
.tag ul {
    display: inline;
    margin-left: 0;
    padding-left: 0;
}

.tag ul li {
    display: inline;
}

.tag a, .tag a:active, .tag a:visited {
	color:#666;
	}
	.tag a:hover {
		color:#ccc;
		}

ul.entry-management-links, ul.comment-management-links {
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li, ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links, ul.comment-interaction-links {
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

ul.entry-interaction-links li, ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

.entry-interaction-links {
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	padding:0 0 40px 0;
	margin:-40px 0 0 0;
	}

.comment-interaction-links {
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
}

#qrdiv {
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	}

.bottomcomment {
	background:#f9f9f9;
	padding:8px;
	margin-top:-30px;
	margin-bottom:10px;
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	}

.poster-ip {
	color:#666;
	font-size:14px;
	text-transform:uppercase;
	padding-left:8px;
	margin-left:5px;
	border-left:1px solid #ccc;
	}

.multiform-checkbox {
	font-family:'Montserrat', Helvetica, Arial, Verdana, sans-serif;
	}
	
/* MODULES */

#secondary {
	padding-top:30px;
	margin-top:20px;
	border-top:1px dashed #ccc;
	}

#secondary .module {
    border-bottom: none;
    border-left: none;
    border-right: none;
    line-height: 1.1em;
    margin-bottom: 2.5em;
	background:#f9f9f9;
	padding:8px;
    }

.one-column #secondary .module,
.one-column #tertiary .module {
    float: left;
    margin-right: 2em;
    }

#secondary .module h2 {
    text-transform: uppercase;
	margin:0;
    }

#secondary .module h2 a {
    color: #323232;
    }
#secondary .module-content {
    padding-top: .8em
    }

#secondary .module-content ul {
    list-style: none;
    padding-left: 0;
    }

#secondary .module-content li {
    padding: .3em 0;
    }

.module-userprofile {
	text-align:center;
	}
	
.module-userprofile .userpic img {
    background: #ccc;
    padding: 5px;
	margin-bottom:5px;
    }

.module-userprofile .journal-website-name {
    padding-top: 5px;
    }

ul.userlite-interaction-links {
    list-style: none;
    }

ul.userlite-interaction-links li {
    display: inline;
    }

.module-customtext .module-content {
	line-height:140%;
	}

.module-calendar {
	width:250px;
	}

.module-calendar .module-content {
    padding-top: 1em;
    }

.module-calendar table {
    text-align: center;
    width: 100%;
    }

.module-calendar th,
.module-calendar td {
    border: 1px solid #e9e9e9;
    height: 2em;
    line-height: 2em;
    }

.module-calendar td a, .module-calendar td a:visited, .module-calendar td a:active {
    background: #e9e9e9;
    color: #666;
    display: block;
    text-align: center;
    }

.module-calendar td a:hover {
    background: #ffffff;
    }

.module-tags_multilevel li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    }

.module-tags_multilevel li ul li {
    margin-left: -.5em;
    padding-left: 2em;
    }

.module-tags_cloud .module-list {
    line-height: 1.8em;
    }

.manage-tags-link, .manage-link {
    padding-top: .8em;
    text-transform: lowercase;
    }

.module-powered a:active,
.module .manage-link a:active {
    color: ;
    }

.module-search .search-box {
    margin-right: 2px;
    padding: 1px;
    }

.module-credit {display:none;}
	
/* FOOTER */

#footer {
	font-family:'Montserrat', Helvetica, Arial, sans-serif;
	text-align:center;
	text-transform:uppercase;
	color:#999;
	}
	#footer a, #footer a:visited, #footer a:active {
		color:#999;
		}
		#footer a:hover {
			color:#666;
			}
			
/* ARCHIVE */

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl .time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

.page-archive .navigation {
    text-align: center;
    }

.page-archive .bottomnav {
    padding-top: 1em;
    }

#archive-year {
    padding: 2.2em 4em 0;
    }

.month-wrapper {
    margin: 1.5em 0;
    }

.month-wrapper .header {
    padding: 0 0 .5em 2em;
    }

.month-wrapper .contents caption {
    display: none;
    }

table.month {
    text-align: center;
    width: 90%;
    }

table.month th {
    border: 1px solid #cccccc;
    border-left: none;
    font-weight: normal;
    height: 4em;
    padding: .5em;
    }

table.month td {
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    height: 4em;
    width: 4em;
    }

table.month td:first-child,
table.month th:first-child {
    border-left: 1px solid #cccccc;
    }

.month-wrapper .day-has-entries {
    background: #e9e9e9;
    color: #444444;
    }

.month-wrapper .day-has-entries a {
    color: #666;
    }

.month-wrapper .day-has-entries:hover {
    background: #ffffff;
    color: #444444;
    }

.month-wrapper .day-has-entries a:visited {
    color: ;
    }

.month-wrapper .day-has-entries:hover p a {
    color: #666;
    }

.month-wrapper .day-has-entries a:active {
    color: ;
    }

.month-wrapper .footer {
    padding-right: 2.5em;
    padding-top: 1em;
    text-align: right;
    }

#archive-month {
    padding-top: 2.2em;
	font-family:'Montserrat', Helvetica, Arial, sans-serif;
    }

#archive-month .navigation {
    text-align: center;
    }

#archive-month .topnav {
    padding-top: .8em;
    }

#archive-month .bottomnav {
    margin-top: .5em;
    }

#archive-month .topnav {
    }

.navigation .month-back,
.navigation .month-forward {
    text-align: center;
    }

#archive-month .month {
    margin-top: .7em;
    padding: 1em 2em 0;
    }

.month h3.entry-title {
    font-family:'Montserrat', Helvetica, Arial, sans-serif; font-size: 1.2em;
    }

dd.month {
    display: inline;
    }

.month dl, .month dt, .month dd {
    margin: 0;
    padding: 0;
    }

.month .datetime,
.month .access-filter,
.month .entry-title {
    padding-right: 5px;
    }

#archive-day .day {
    margin-top: 1em;
    }

h3.day-date {
    font-family:'Montserrat', Helvetica, Arial, sans-serif;
    padding-top: 1em;
    }
	
#archive-year, #archive-day {
	font-family:'Montserrat', Helvetica, Arial, sans-serif;
	}
	
	
/* TAGS */

.tags-container {
    padding: 0 1em;
	font-family:'Montserrat', Helvetica, Arial, sans-serif;
    }

.tags-container h2 {
    font-family:'Montserrat', Helvetica, Arial, sans-serif;
    padding: .5em 0 1em;
    }

.tags-container .ljtaglist {
    line-height: 1.8em;
    }

.tags-container ul.ljtaglist {
    list-style: none;
    }

.tags-container .manage-tags-link {
    margin-bottom: 1em;
    }

ENJOY!

If you decide to use this theme, I'd love to know, and would particularly love to see it in action if you care to link the journal! Please feel free to ask questions about this theme in the comments to this post. I created this one quite awhile ago, but I will do my best to dive back into the code and get you an answer.

Please note: The main navigation is located at the bottom of the page: Hover over the dark gray stripe to access.

Answered:
- How to change the font size on entries.

Change Log:
26 JUL 14 - Removed the new "module jump link" that DW added in the last code push. If you don't want to replace all of your code, please just add this to the very bottom of your CSS: #module-jump-link {display:none}

15 AUG 17 - Updated the header title so that it's the proper color now that it is a link

Bake Sale

Goodies for Dreamwidth

Links

THEME 001: Wry

(no subject)

Credits & Style Info