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

This is really great!!
I'm glad to see some activity on the comm =D

Might I suggest a textarea box for easy coping/pasting?

[textarea] insert css here [/textarea]

Just replace the [] with < > :)

fixed (:

I'm glad you like it.

Awesome layout!

timeasmymeasure beat me, but I suggest the same with the text area for the cod :)

Hi there, lovely layout. Thank you for sharing! Do you think you could resize the image to 300px or smaller per the community rules? Thank you!

Fixed (:

Oh this layout is AWESOME looking. Thank you for sharing it! :D

Nice. :)

This is a very good-looking layout! I'll probably use it when I get tired of mine.

I really like this (and I'm pretty picky about layouts), so I'm adding it to my memories. =)

The *only* thing I don't like is that it's not flexible for screen size (I don't know the technical term), I mean in that if my browser window isn't maximized, I'd have to use a side-scroll to see everything. (You know what I mean?) Is there an easy fix to adjust that? If I were to use a smaller background image would it make a difference? I do like it otherwise, though!

It's a fixed-width layout. Making the width liquid (that is, adjustable for screen size) would throw off the layout, at least with my coding abilities. What I could do, though, is reduce the size of the entry section, so that it's compatible with more layout sizes. I work with a 1280 x 800 screen myself, so I could probably reduce the width of the entry section by about fifty pixels in order to accommodate 1024 x 768 screens. I don't know about lower resolutions (they're not as common any more), but that I can do.

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.

This is so pretty!

Love this layout! Using with credit. ♥

I bet you're starting to hate me. X(

I discovered that longer comments made to my entries aren't wrapping properly, which screw with the main column width which in turn makes everything wonky.

Is there an easy fix to this, or is it a bug with DW in general? I took out the custom CSS for a second and things appeared to be normal with comments, but the problem returned once I re-installed the custom CSS.

I'm getting tons of compliments on the layout in general, though, it's definitely a winner!

I just put up this layout today, in the latest version of Google Chrome, and it doesn't display properly at all. The entry/content area is three screens wide, and then the sidebar displays underneath it. Any thoughts?

This was awhile ago, but you have to select "2 Column (sidebar on left)" under "Choose a Page Setup", haha.

I'm using the coding for this layout on this journal, but I need some help with editing it. I'm not a Dreamwidth user. I'm more used to LiveJournal than Dreamwidth and so much more versed in InsaneJournal than either of the other two.

Under the headings Profile and Style Credit, there is black text being obscured by the black background. I don't know where in the coding I would fix this, but could you please point out where I would change it to white.

Hmm. I think you'll want to look for this section in the CSS:

.journal-name (line 549)

{

font-size: 12pt;

letter-spacing: -1px;

padding-top: 10px;

text-transform: uppercase;

font-weight: bold;

}

and add a 'color: #fff' (or whatever colour you want for your profile text'). Do this after the 'font-weight bold', but before the final curly bracket.

You'll also want to do that here and here:
.module-credit dt, .module-credit dd (line 569)

{

display: inline;

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

.module-credit dt (line 574)

{

font-weight: bold;

margin-right: 0.5em;

}

I hope this helps! (Sorry I got back to you so late; I've been quite busy!)

This is a really neat layout - the background and the fact that it doesn't look like most of the other layouts drew me in! I do wonder why my icons aren't showing up as they should like in the image preview? All there is is a black rectangular thing where the icon should go. I'm thinking of not displaying the icons at all but I'm not sure which part of the code I should edit.

Sorry to bother you, but is it possible to control the color of the entry title's text independently from the link color? I want the links to 'reply' and 'link' to be pink, but I'd like the title of the entry to be a different color. Sorry if the answer to the question is really simple; I'm stupid when it comes to coding.

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

no subject

no subject

no subject

MOD

Re: MOD

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject