dreamwidthlayouts | New Layout: Fix Ya Face (EDITED to accommodate resolutions 1024 x 768 and up)

This is a 2-column (left) Tabula Rasa layout - just copy and paste the CSS into your layout, and untick 'use layout's stylesheet' in the customise section. Tested in Firefox & Google Chrome. Rounded corners only work in Firefox, Safari and Chrome. Not tested in IE (don't have Windows), but I did put the layout in an IE testing website, and it appears okay.

IMAGE PREVIEW LIVE PREVIEW

Please update the background image (yellowcomicbg.png) to your own host so that I can preserve my Photobucket bandwidth.

Feel free to edit colours and images, but keep the credit (to

fascination or

imagination)!

Code under the cut.

/* Cleaned CSS: */

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

::selection {
background: #FDF332;
}

::-moz-selection {
background: #FDF332 
}

img {
    border: none;
}

hr {
    display: none;
}
.entry-content hr,
.comment-content hr {
    display: block;
    margin: 1em 10%;
}

body {
    font-size: 100%;
    padding: 0;
    background: transparent;
    background: url('http://i11.photobucket.com/albums/a176/indusztri/yellowcomicbg.png')
    
}

a { 
color: #EF2C8F; 
}
a:visited {
#AF206C;
  }
a:hover { 
#D3D3D8;
  }
a:active {  }

blockquote {
	font-style: italic; 
	background-color: #FDF332;
	padding: 20px;
	border: 1px dashed;
}

q { font-style: italic; }

.one-column #content { float: none; }
.two-columns-left #content,
.three-columns-sides #content {
    border-left: 15em solid transparent;
}
.two-columns-right #content,
.three-columns-sides #content {
    border-right: 15em solid transparent;
}
.three-columns-left #content {
    border-left: 30em solid transparent;
}
.three-columns-right #content {
    border-right: 30em solid transparent;
}
.column-right #content {
    min-width: 15em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}

#header, #footer {
    margin: 0;
    clear: both;
    padding: .5em;
}

#header {
    background: transparent;
    
}

h1#title {
	display:none;
    
}

h2#subtitle,
h2#pagetitle {
	display:none;
    
}

#footer {
    background: white;
    font-family: helvetica, arial;
    border-radius: 15px; 
    -moz-border-radius: 15px;
    width: 150px;
}

#footer a {
	 color: black;
	 text-decoration: none;
	  }
#footer a:active {  }
#footer a:hover {  }
#footer a:visited {  color: #AF206C;
}

#primary {
    float: left;
    margin-right:-100%;
    margin-left: 200px;
    font-family: georgia, serif;
    font-size: 10pt;
    background-color: white;
      border-radius: 15px;
    -moz-border-radius: 15px;
}

.one-column #primary { float: none; }

#primary > .inner:first-child {
    padding: 1em;
}

.one-column #secondary { width: 15em; }
.two-columns-left #secondary,
.three-columns-sides #secondary {
    float: left;
    width: 15em;
    margin-left: -10em;
}
.two-columns-right #secondary {
    float: right;
    width: 15em;
    margin-right: -15em;
}
.three-columns-left #secondary {
    float: left;
    width: 15em;
    margin-left: -30em;
}
.three-columns-right #secondary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#secondary > .inner:first-child {
    padding: 1em;
    background-color: white;
        border-radius: 15px;
    -moz-border-radius: 15px;
    margin-left: 20px;

}

.one-column #tertiary { width: 15em; }
.two-columns-left #tertiary,
.two-columns-right #tertiary {
    clear: both;
}
.two-columns-left #tertiary { margin-left: -15em; }
.two-columns-right #tertiary { margin-right: -15em; }
.two-columns-left #tertiary .module,
.two-columns-right #tertiary .module {
    float: left;
    width: 15em;
}
.three-columns-left #tertiary {
    float: left;
    width: 15em;
    margin-left: -15em;
}
.three-columns-right #tertiary {
    float: right;
    width: 15em;
    margin-right: -30em;
    margin-left: 15em; /* so that #tertiary won't overlay #secondary in IE7 */
}
.three-columns-sides #tertiary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#tertiary > .inner:first-child {
	display:none;
    padding: 1em;
}

.navigation ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}

/* entries */

.entry {
    background: transparent;
    padding-right: 20px;
    width: 500px;
  
    
}

.entry .entry-title {
    font-family: helvetica, arial;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.entry .entry-title, .entry .entry-title a {
    
}

.entry a { 
	text-decoration: none; 
	 	color: black;
	 	text-transform: uppercase;
	 	font-family: helvetica, arial;
}
.entry a:visited { 
	color: #3D3D3D;
	  }
.entry a:hover { 
	color: #D3D3D3; }
.entry a:active {  }

.entry .userpic {
	background-color: black; 
	border: solid 10px; 
	width: 100px;
	float: left;
	margin-top: 15px;
	margin-right: 10px;
	margin-bottom: 10px;
border-radius: 10px;
-moz-border-radius:5px;
}

.entry-content {
	padding: 10px;
}

.datetime {
	font-size: 19pt; 
	font-family: helvetica;
	text-transform: uppercase;
	color: #EF2C8F;
}

.datetime a {
	color: #EF2C8F;
}
.metadata ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
color: #EF2C8F;
text-transform: uppercase;
font-family: helvetica;
font-weight: bold;
}
.metadata li {
    margin-bottom: .5em;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 1em;
}

.tag ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.tag ul li {
    display: inline;
    padding: .25em;
} /* same for month view */

ul.entry-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

.entry-interaction-links a {  }

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

/* comments */

.comment-wrapper {
    padding: .5em 0;
width:500px;
}

.comment .comment-title {
    
}

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

ul.comment-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* 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 span.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;
}

/* modules */

.module {
    background: transparent;
    font-family: helvetica; 
    font-size: 12pt;
    
}

.module a { 	
	text-decoration: none; 
	 	color: black;
 }
.module a:visited { 
	color: #AF206C; }
.module a:hover {
	color: #D3D3D3;
	  }
	  
	  .module a:active {  }

.module h2 {
    
    font-family: helvetica; 
    font-weight: bold; 
    	color: #EF2C8F;
    font-size: 18pt; 
    text-transform: uppercase;
    border-bottom: 1px dotted;
    border-color: black;
   
}

.module h2 a{
	color: #EF2C8F;
}

.module-content {
    	margin-left: 20px;

}

.module-content ul {
    list-style: outside;
    margin-left: 1em;
    padding-left: 0;
}
.module-content li {
    margin: .5em 0;
text-transform: uppercase;
}

.module-photo .module-content {
    text-align: center;
}

.module-user-links .module-content {
    text-align: center;
}
ul.userlite-interaction-links {
display:none;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.userlite-interaction-links li {
    display: inline;
    padding: 0 .20em;
}

.module-calendar .module-content {
    text-align: center;
}
.module-calendar table {
    margin: 0 auto;
}
.module-calendar td {
    padding: 1px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}
.module-userprofile .userpic img {
    border: 10px solid;
    margin: 0;
    background-color: black;
border-radius: 10px;
-moz-border-radius:5px;
}
 
.journal-name {
    color: ;
    font-size: 12pt;
    letter-spacing: -1px;
    padding-top: 10px;
text-transform: uppercase;
font-weight: bold;

}
.search-box {
    margin: .2em auto;
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}
.module-credit dt, .module-credit dd {
    display: inline;
    margin: 0;
    padding: 0;
}
.module-credit dt {
    font-weight: bold;
    margin-right: 0.5em;
}

.tags_cloud li, .module-tags_cloud li { display: inline;
    list-style-type: none; }

.module-syndicate  .module-content {
    text-align: center;
}

ETA, 26 Aug 2011: Comment section FIXED, at least on my test journal at

edges!

Flat | Top-Level Comments Only

Gotcha. See, if I operated my browser in full-screen mode it'd be totally fine. But I'm one of those crazy people who like to have lots of windows up on the outskirts so I can multi-task. XD Hmm. I'd actually rather side-scroll than reduce the entry section. What about just reducing the wallpaper buffer at the side and between the sidebar and entry section? Obviously not by much or you lose the awesome background effect, which is obviously the main attraction to the layout...Hmm. It's an interesting issue. Well, never mind for now, it'll be a while before I come to terms with giving up my converted LJ layout for an actual DW layout. Thanks for the feedback, though! I do really like it. It's less module-y than all the other layouts I see. =)

Oh, no problem. I don't want people to not be able to use a layout I made because of resolution issues or anything else. I reduced the entry section by 100 pixels and it's still readable, at least to me. When browsing, I tend to have browser windows open to their maximum size, because it's easiest for me to read. Other windows, though, are not always full size. Depends on what I'm doing.

Also, I'm probably going to use the base design for other layouts in future, some of which will be lower on images and won't have the same resolution constraints.

Totally understandable. I do operate at the same screen res as you. I used to use my browser at full screen, but now it makes me feel techno-claustrophobic or something. XD

Awesome. I look forward to seeing them! I'll probably plug this layout in at some point and just play around with it, see what I think of it with my own content and image tweaks and such, haha. It might just win me over anyway.

New Layout: Fix Ya Face (EDITED to accommodate resolutions 1024 x 768 and up)

no subject

no subject

no subject