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

Flat | Top-Level Comments Only

From:

leia_solo

I love this! I've installed it and I will credit you in my user info! Thank you!

cirque

This looks great on both of my mobile devices! Lovely work :)

gingerous

I love this! It looks great! Using and will credit in my user info! Thank you! :)

graychalk

Love the simplicity... been looking for something like this. Thanks so much! :)

May I ask if there's a simple way/place to edit the layout so that the header links to the main page of the journal? I've been looking all over for it, but I'm not sure if I missed it or if there's just no way for me to change that.

Thanks again!

bakesale

Unfortunately, that's something that's part of the main code, and can't be changed with CSS. It's also something that drives me nuts about DW layouts, as they all seem to be that way! You could change it in the layers, but it wouldn't be simple.

Ah, I suspected that might be the case after looking at the code and knowing it wasn't something editable via CSS. I snooped around the layers, but I didn't even know where to begin looking. I was holding out hope on there being some kind of module I can just activate, but I guess not! Thanks very much for taking the time to reply though - at least I now know to give up. :P

surpassingly

Thank you so much for this theme! Using it for an RP journal and will credit you!

flashignite

is there anyway to make the font in this layout by default, one size smaller? I love that it big, but its a little -too- big for me. For example, when I use <small> html tag, the font size is perfect!

Under /* ENTRIES */ in the CSS, find the following:

.entry-content, .comment-content {
font-size: x-large;

Then change the font-size value to whatever you like. "medium" is the default, but you can also change it to a percentage or set numeric value, such as 15px. This page lists and explains the values.

Thank you!

valley

What a beautiful theme! I'll probably use it sometime in the near future and will credit when I do so.

naeryse

I'm in love with your layout, it's exactly what I've been waiting for.

Thank you so much for making and sharing! I've credited you in my userinfo.

ozqueen

Ooh, I'm looking for a new theme and I think this is the front-runner! I also really love the main theme for

bakesale - is there any chance you'd put that one up for grabs? ♥

wrabbit

Thanks for your work on this theme! I love it.

rigjuice

Hi! I love this. Is there a way to make the entry subject title and date/time line up with the left side of the entry? I'll probably steal the above tutorial for making the entry text a little smaller to go with it since it's my preferred aesthetic.

So glad there's a more muted grey/silver tone layout! So much of what I find is either white or black. 8(

Sure! At the very end of the code, add this:

.entry .header {text-align:left;}

Or, if you want both the post header and the comment header left-aligned:

.entry .header, .comment .header {text-align:left;}

That should sort it for you; let me know if not!

You are a delightful and wonderful (and prompt, when obviously unnecessary so it is incredibly appreciated!) person. Thank you very much!

compass_lily

I installed this to my jounal. Feel free to visit ! :)

wayleadsontoway

Used this theme on this journal here, it's absolutely perfect and just what I was looking for!

monolike

LOVELY theme!! really easy to mod

I'm using it on my current journal, thanks so much for it!

asscan

Snagged this one for this character and linked back in the profile. Many thank you's!

songsforthehomebirds

Using! Credit in my profile info. Thank you so much! :)

One question, though. I would like to add a couple of tiny icons for DW users and communities, but I'm not sure what to edit/add to the code. Would you be willing to help a gal out? ;)

It's been awhile since I coded the userinfo icons, so I don't know the code off the top of my head; if I'm remembering correctly, it varies depending on the size of the new icons, too. There's a post over here that might help.

duck

I love this theme, thank you so much for sharing it, I'm going to use it on this account.

juliandarling

Thank you so much, I'm using this currently!

out of curiousity, is there any way to adjust the vignette/circle cropping over the user icon? i'd like to make it slightly smaller, as my fave icon has a border on it that interferes with the vignette

Honestly, it's easier to just remove the circle than to crop closer in -- It's possible, but the CSS is slightly more involved.

To make them just square icons, c/p this code at the very bottom of the stylesheet, and that should take care of it:

.entry .userpic img, .comment .userpic img {border-radius:0;}