visualwit | layout 004: Write My Words In The Sky (Transmogrified)

/*-- Write My Words In The Sky (Transmogrified) --*/
/*-- stylesheet by ravenclawbest @ visualwit for DW --*/

/*--- main ---*/

BODY { 
		background-image: url(''); 
		background-color: #7CC0B0;
		margin: auto; 
		color: #888888; 
		font-size: 12px; 
		margin: auto; 
		font-family: georgia, serif;
		}

* {
		margin: 0px 0px 0px 0px; 
		padding: 0px;
		}

a, a:link, a:visited { 
		color: #7CC0B0;
		text-decoration: none;
		}

a:hover {
		color: #4C4C4C;
		}

img {
		border: none;
		}

code, kbd, pre, tt, textarea {
		font-family: monospace;
		}

input, textarea {
		background-color: #f7f7f7;
		color: #919191;
		border: 1px solid #919191;
		}

::-moz-selection { 
		background: #f7f7f7; 
		color: #5e5e5e; 
		}

blockquote {
		border-left: 15px solid #7CC0B0;
		margin: 15px 15px 5px 50px;
		padding: 10px;
		width: 70%;
		}

/*--- containers and things ---*/

#container {
		margin: auto;
		margin-top: 5px; 
		width: 85%;
		}

#wrap {
		padding: 0px 220px 0px 0px;
		}

#content {
		width: 100%;
		float: left;
		}

/*--- headers ---*/

#header {
		display: none;
		background: #7CC0B0;
		color: #FFFFFF;
		padding: 10px 0px 10px 0px;
		}

#header h1 {
		color: #FFFFFF;
		font-size: 20px;
		}

/*-- header links (recent, tags, etc) --*/

.module-section-one {
		background: ;
		font-size: 35px; 
		text-align: center;
		text-transform: lowercase;
		font-family: georgia, serif;
		}

.module-section-one ul {
		padding: 15px 0px 15px 0px;
		}

.module-section-one li {
		display: inline;
		list-style: none;
		padding: 10px 10px 10px 10px;
		}

.module-section-one li a {
		color: #F5F5F5;
		}

.module-section-one li a:hover {
		color: #FFFFFF;
		}

/*--- navigation (for entries) ---*/

.navigation {
		background: #FFFFFF;
		margin: 0px 10px 0px 0px;
		padding: 10px;
		text-align: left;
		text-transform: uppercase;
		}

.navigation ul {
		
		}

.navigation li {
		padding: 5px;
		display: inline;
		}

.navigation li a {
		color: #7CC0B0;
		}

.navigation .page-back a:before, .navigation .page-forward a:after {
		vertical-align: 40%;
		}

/*--- entries ---*/

.entry, .text_noentries_day {
		background: #FFFFFF;
		padding: 10px;
		position: relative;
		margin-bottom: 20px;
		}

.text_noentries_day {
		margin-top: 20px;
		margin-bottom: 20px;
		}

.entry .userpic a {
		float: right;
		margin: -20px 10px 10px 10px;
		}

.entry .userpic img {
		border: 5px solid #7CC0B0;
		}

.entry-title, .entry-title a {
		color: #4C4C4C;
		font-size: 14px; 
		font-variant: small-caps;
		}

.datetime, .datetime a {
		font-size: 10px; 
		text-transform: uppercase;
		}

.entry-poster {
		border-bottom: 1px solid #C2C2C2; 
		display: block;
		margin-bottom: 10px; 
		}

.entry ul li {
		list-style: disc;
		margin-left: 50px;
		padding-left: 0px;
		}

.entry ol li {
		list-style: decimal-leading-zero;
		margin-left: 50px;
		padding-left: 0px;
		}

.entry-wrapper .entry, .text_noentries_day {
		padding: 10px;
		margin-right: 10px;
		border-bottom: 5px dashed #7CC0B0;
		}

.entry .footer {
		text-align: center;
		text-transform:uppercase; 
		}

.entry .footer hr {
		display: none;
		}

/*--- currents and tags ---*/

.tag {
		font-size: 10px; 
		color: #4f4f4f;
		text-align: left;
		margin: 10px 0px 10px 0px;
		border-bottom: 1px solid #C2C2C2; 
		}
 
		.metadata-label {
		color: #4f4f4f;
		}

.metadata a, .tag a {
		color: #7CC0B0;
		}

.metadata {
		padding: 5px;
		color: #7CC0B0;
		font-size: 10px; 
		text-align: right;
		margin: 5px 0px 0px 0px;
		text-transform:uppercase;
		border-bottom: 1px solid #C2C2C2; 
		}

.entry .metadata li {
		list-style: none;
		}

.tag ul {
		display: inline;
		}

.tag li, .footer li {
		display: inline; 
		list-style: none; 
		margin-left: 0 !important;
		}

/*--- comments ---*/

.comment {
		background: #FFFFFF;
		padding: 10px;
		position: relative;
		margin-bottom: 20px;
		margin-right: 10px;
		border-bottom: 5px dashed #7CC0B0;
		}

.comment-wrapper .comment-title, .comment-wrapper .comment-title a {
		color: #4C4C4C;
		font-size: 14px; 
		font-variant: small-caps;
		}

.comment .userpic a {
		float: right;
		margin: -20px 10px 10px 10px;
		}

.comment .userpic img {
		border: 5px solid #7CC0B0;
		}

.comment-poster {
		border-bottom: 1px solid #C2C2C2; 
		display: block;
		margin-bottom: 10px; 
		}

.page-reply .entry-wrapper {
		margin-top: 20px;
		}

#postform {
		border: 1px solid #f4f4f4;
		margin: 20px;
		}

#commenttext {
		width: 80%;
		}

.poster-ip {
		color: #4C4C4C;
		text-transform: uppercase;
		}

#qrdiv table, #qrformdiv table, form #qrform {
		background: #f4f4f4; 
		border: 1px solid #f4f4f4 !important;
		}

.comment .footer {
		margin: 20px 0px 10px 0px;
		padding: 5px 0px 0px 0px;
		border-top: 1px solid #C2C2C2; 
		text-align: center;
		text-transform:uppercase; 
		}

/*--- management links (entries & comments) ---*/

.entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {
		text-align: right; 
		display: inline;
		}

.entry-management-links li, .entry-interaction-links li, .comment-management-links li, .comment-interaction-links li {
		display: inline; 
		list-style: none; 
		padding: 5px;
		}

.entry-management-links li a, .comment-management-links li a,
.comment-interaction-links .thread a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/permalink.gif);
		background-repeat: no-repeat;
		background-position: 0% 50%;
		padding-left: 14px;
		color: #4C4C4C;
		}

.entry-management-links .edit_entry a, .comment-management-links .delete_comment a,
.comment-management-links .edit_comment a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/edit.gif);
		}

.entry-management-links .edit_tags a, .comment-interaction-links .parent a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/tag.gif);
		}

.entry-management-links .mem_add a, .entry-management-links .watch_comments a,
.comment-management-links .watch_thread a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/memories.gif);
		}

.entry-management-links .link_prev a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/previous.gif);
		}

.entry-management-links .link_next a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/next.gif);
		}

.entry-interaction-links li a, .entry-management-links .tell_friend a,
.comment-interaction-links li a { 
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/comment.gif);
		background-repeat: no-repeat;
		background-position: 0% 50%;
		padding-left: 14px;  
		display: inline;
		color: #4C4C4C;
		}

.comment-management-links .delete_comment a {
		background-image: url(http://s.dreamwidth.org/stc/transmogrified/delete.gif);
		}

.comment-wrapper- .comment {
		padding: 10px;
		margin-right: 10px;
		border-bottom: 5px dashed #7CC0B0;
		}

/*--- modules (aka sidebar) ---*/

.module-section-two {
		float: left;
		width: 220px;
		padding: 0px;
		margin: 0px -220px 0px 0px;
		}

.module-section-two .module {
		background: #FFFFFF;
		padding: 10px 10px 10px 10px;
		margin: 0px 0px 10px 0px;
		border-bottom: 5px dashed #7CC0B0;
		}

.module-section-two ul {
		list-style-type: none;
		}

.module-section-two li {
		padding: 2px 0px 5px 5px;
		display: block;
		text-transform: lowercase;
		}

.module-section-two h2 {
		font-size: 14px; 
		color: #4C4C4C;	
		text-align: left;
		font-variant: small-caps;
		border-bottom: 1px solid #C2C2C2;
		}

.module-section-two h2 a, .module-section-two .module-header a {	
		color: #4C4C4C;		
		}

.module-section-two h2 a:hover, .module-section-two .module-header a:hover {
		color: #7CC0B0;
		}

.module-userprofile {
		padding: 0px;
		}

.module-userprofile h2, .module-userprofile p {
		display: none;
		}

.module-userprofile .userpic img {
		border: 5px solid #7CC0B0;
		}

.module-userprofile .userpic {
		text-align: center;
		}

.module-userprofile ul {
		text-align: center; 
		margin-top: 20px;
		}

.module-userprofile li {
		display: inline; 
		padding: 5px; 
		list-style: none;
		}

.module-calendar {
		text-align: center;
		}

.module-calendar table {
		width: 85%; 
		margin: auto;
		}

.empty-day {
		padding: 5px;
		}

.entry-day {
		background-color: #7CC0B0; 
		padding: 5px;
		}

.entry-day a { 
		color: #FFFFFF;
		text-decoration: none;
		}

.entry-day a:hover {
		text-decoration:underline;
		}

/*--- footer ---*/

.module-section-three {
		background: #7CC0B0;
		clear: both;
		margin: auto;
		padding: 5px;
		color: #ffffff;
		text-align:center;
		}

.module-section-three a {
		color: #ffffff;
		}

/*--- tag page ---*/

.page-tags #content {
		background: #FFFFFF; 
		}

.page-tags #content h2 {
		margin-bottom: 10px;
		background: #FFFFFF; 
		color: #4C4C4C;
		font-variant: small-caps;
		}

.page-tags #content ul li {
		background: #FFFFFF; 
		list-style: disc;
		margin-left: 50px;
		padding: 5px;
		}

/*--- archive page ---*/

.page-archive .navigation ul li {

}

.month-wrapper, #archive-month dl {		background: #FFFFFF;
		padding: 10px;
		position: relative;
		margin: 20px;
		}

.month-wrapper h3 {
		background: #FFFFFF;
		border-bottom: 1px solid #CACACA; 
		color: #4C4C4C;
		font-variant: small-caps;
		}

.month table{
		width: 100%; 
		margin: auto; 
		}

.month table th {
		padding: 5px;
		color: #2F615E; 
		text-align: center;
		}

.month caption {
		display: none;
		}

.month .day {
		padding: 5px; 
		border: 1px solid #E5E5E5;
		}

.day-has-entries {
		border: 1px solid #E5E5E5;
		padding: 2px;
		}

.month .day-has-entries {

}

.month .day-has-entries a {
		font-size: 14px;
		}

.day-has-entries p {
		margin: 3px !important;
		text-align: right;
		}

.month .footer {
		width: 100%; 
		text-align: center; 
		margin: auto;
		}

#archive-month dt {
		font-weight: bold;
		}

#archive-month .entry-title {
		display: inline-block;
		padding-left: 5px;
		}

/*-- navigation bar --*/

table#lj_controlstrip td {
		background-color: #ffffff;
		border: 0;
		color: #4C4C4C; 
		}

#lj_controlstrip input {
		background-color: #ffffff;
		border: 1px solid;
		}

#lj_controlstrip a  {
		color: #7CC0B0;
		}

#lj_controlstrip_statustext {
		color: #4C4C4C; 
		}

#lj_controlstrip .ljuser a b {
		color: #4C4C4C; 
		}

#lj_controlstrip_userpic {
		display: none;
		}

/*------- contextual pop-up -------*/

div.ContextualPopup {
		margin: 10px 0 0 10px;
 		text-align: left; 
		}

div.ContextualPopup div.Inner {
		background: transparent !important;		
		color: #4C4C4C !important;
		border: 0px;
		padding: 10px;
		width: 280px;
		}

div.ContextualPopup .Userpic {
		margin: 5px 55px 0 0px;
		padding: 5px;
		background-color: #FFFFFF;
		border: 5px #7CC0B0 solid;
		}

div.ContextualPopup .Content {
		padding: 5px;
		border: 1px #4C4C4C solid;
		background-color: #ffffff;
		}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:link {
		text-decoration: none !important;
		font-weight: normal; 
		color: #7CC0B0 !important;
		}

div.ContextualPopup .Relation {
		color: #4C4C4C;
		}

/*-- paste additional codes below this point --*/

NOTES:
★- I'd shorten the header links (something like: recent, circle, tags, archive, etc).
★- Want to tweak the code (color, font, etc)? Go for it =D

DIRECTIONS:
★- Select Journal Style
★- Select any Transmogrified style layout.
★- Go to Custom CSS and uncheck the "Use layout's stylesheet(s)" option.
★- Paste code in 'Custom Stylesheet' text box

QUESTIONS?
★- See the Layout FAQ. Otherwise ask here and we'll go from there.
★-

style_system is also available for more CSS help.

Flat | Top-Level Comments Only

From:

phoenix

Wheee style :D Thank you! I have applied this to my journal, though I might end up making a whole bunch of changes.

arobynsung

Go crazy with it :D

megyal

This is so awesome. I prefer my LJ and DW to match up, but this is going to make my break that habit.

I'm going to go through your LJ to see if anything matches...

There's one that looks like this, I believe =)

A similar theme, I should say.

:D I'll go hunt it up, then.

http://community.livejournal.com/visualwit/42944.html#cutid1

sixthsecond

using :) this is lovely

baggyeyes

I want to try this at some point, but I just wanted to say, your large preview image - loaded faster than the 'small' previews at Minty Apple. Whatever you do, you do it right.

hibernate

Thank you! I love this layout. :)

odakota_rose

Just found this layout, it's lovely! Nice job :D

communal_living

Thanks! Will use.

knowing_shadows

Using now, it's lovely! Thanks :)

dekadai

this is really cute. I'll definitely be using it.

merrymen

Oh, I love this layout! Thanks for sharing! :D

jeweledeyes

Very nice! I'm using it on mine now. :-) Thank you!

loz

This is gorgeous, thank you!

dee_groovy

goody! You posted some layouts here, yay! Snagging this, will credit, thanks :D

dreadful_penny

Used and giving credit in profile, but I'm having an issue. I'm new to DW (from LJ) and just getting familiar with this style of HTML coding. How do I remove my user name from underneath my profile picture, the way you have it in your sample image? For some reason, the text is floating to the left instead of being centered. Any help would be appreciated. Thanks!

Removing the user name from the profile picture is in the customize sidebar section of the DW sidebar. Here: http://www.dreamwidth.org/customize/options?group=modules

Under Basic Journal Info: uncheck display name & website.

compels

Hey I just found this and it looks beautiful, but I had a question about tweaking. In your Layout FAQ you've got specifications on how to add a header in Tabula Rasa, but since this layout is Transmogrified, is there any way to add a header to it?

Not sure how Transmogrified would work. You could try using the code in the Layout FAQ or post to

style_system and they are always happy to help and have way more collective expertise.

All right, I'll give it a shot. Ty for the help!

terrier

This is great! Out of curiosity, is there a way to get the sidebar on the left instead?

seraphina_snape

I just stumbled over this via dreamwidthlayouts and was very pleased to see it was still online/available. Thank you for sharing this gorgeous layout!

S	M	T	W	T	F	S
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Visual Wit

★ Robyn's Graphics & Things ★

layout 004: Write My Words In The Sky (Transmogrified)

layout 004: Write My Words In The Sky (Transmogrified)

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

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

January 2015

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags