shifgrethor | Recent Entries

Larger TEXT ONLY preview or Larger HEADER IMAGE preview

layout: transmogrified
supports custom comment pages: yes
CUSTOM HEADER IMAGE: yes, at last!
supported on: free & paid
does not have: a sidebar
works on: 800x600 up (fluid)
tested on: firefox 3, ie 8

INSTRUCTIONS

1. Go to the journal customisation page and select transmogrified as your theme
2. Go to the custom CSS page and UNCHECK "use layout's stylesheet" option
3. Copy past the following code into the "embed CSS" textarea:

/* Coded by Karanguni for DW Transmogrified. :D */

/* GLOBAL RESETS ---------- */

*, html {
   padding: 0;
   margin: 0;
   border: 0;
   outline: none; 
   font-size: 100%;
}

small {

font-size: smaller; }

big {

font-size: larger; }
blockquote {

margin: 30px 10px 30px 10px;
   border: 1px solid #646464;
   padding: 10px 20px 10px 20px; }

h1 {
   line-height: 42px;
   font-size: 40px; }

h2 {

line-height: 32px;
   font-size: 30px; }

h3 {

line-height: 18px;
   font-size: 16px; }

#content ol, #content ul {

margin: 10px 0 10px 30px;
   line-height: 15px; }

#content ul {

list-style-type: square; }

/* GENERAL LINK COLOURS ---------- */

a {

color: #db0404; }

a:visited {
   
   color: #db0404; }

a:hover {

color: #cacaca; }

/* LAYOUT SIZE ---------------- */

#container {
   font-family: arial, verdana, sans-serif;
   width: 100%; }

#wrap {
   margin: auto;
   width: 80%; }

.module-section-two {

display: none; }

#content {
   font-size: 11px;  /* CHANGE THIS TO CHANGE FONT SIZE */
   line-height: 15px;
   padding: 15px 20px 15px 20px; }

#header {

/*
TO ADD A HEADER: change the width and height here to your header image size. Add this code just after this comment: background: url(YOURURLHERE) #ffffff; */

width: 77%;    /* your header width */
   height: 180px; /* your header height */
   margin: auto;
   color: #000; 
   text-align: center;}

#header a {

color: #000; }

#title {

/*
TO HIDE THE JOURNAL TITLE, add this code just after this comment:   display: none;  */

text-transform: lowercase;
   padding-top: 20px;
   font-family: century gothic, sans-serif;
   font-size: 72px;
   letter-spacing: -3px;
   line-height: 39px; }

/* NAVIGATION LINKS ----------------- */

.module-navlinks {

height: 25px;
   width: 100%;
   background: #db0404; /* CHANGE THE NAVSTRIP BG */
   text-align: center;
   padding: 0;
   margin: 15px 0px 15px 0px; }

.module-navlinks ul {
   
   list-style-type: none;
   text-transform: lowercase;
   height: 25px;  }

.module-navlinks ul li {
  
   display: inline;
}

.module-navlinks ul li a {

font-family: arial, verdana, sans-serif;
   font-weight: bold;
   font-size: 32px;
   color: #fff;
   text-decoration: none; 
   line-height: 25px;
   padding: 0 20px 0 0;

}

.module-navlinks ul li a:hover {

color: #000; }

/* SKIP LINKS ------------------------- */

.navigation {

padding: 0 0 30px 0; 
   text-align: center;}

.navigation ul {

list-style-type: none; }

.navigation ul li {

display: inline;
   padding-right: 20px; }

.navigation ul li a {

font-family: arial, verdana, sans-serif;
   font-weight: bold;
   font-size: 22px;
   color: #db0404;
   text-decoration: none; 
   line-height: 22px;
   text-transform: uppercase; }

/* CONTENT --------------------------- */

.entry {

border: 10px solid #f2f2f2;
   padding: 15px 20px 15px 20px;
   margin: 0 0 40px 0; }

.header {

text-transform: uppercase;
   font-size: 11px;
   padding: 0 0 10px 0; }

h3.entry-title, h3.entry-title a {
   
   text-transform: uppercase;
   font-weight: bold;
   font-size: 45px; 
   text-decoration: none;
   letter-spacing: -1px;
   line-height: 48px;
   color: #000; 
}

.datetime a {

color: #db0404; 
   text-decoration: none;
   border-bottom: 1px dotted #db0404; }

.datetime a:hover {

color: #000; }

.contents .userpic {

float: right;
   border: 10px solid #000; }

.poster {
   margin: 0 0 5px 0;
   font-size: 11px; }

.entry-content {

padding-top: 10px; }

/* ENTRY METADATA ---------------- */

.metadata {

margin-top: 15px;
   color: #646464; }

.metadata ul {

list-style-type: none; }

.metadata ul li {
  
   display: inline; }

.metadata-label {

font-weight: bold; }

.metadata-item {

padding-right: 5px; 
   border-right: 1px solid #646464; }

/* ENTRY TAGS ------------------- */

.tag {

padding: 5px 10px 5px 10px;
  background: #f2f2f2;
  border: 1px solid #cccccc;
  margin: 20px 0 20px 0; }

.tag:hover {

background: #ffffff; }

.tag a:hover {

color: #000000; }

.tag ul {

list-style-type: none; }

.tag ul li {

display: inline;
   padding-right: 7px; }

/* ENTRY LINK BAR ---------------------- */

.entry-management-links, .entry-interaction-links  {

display: inline;
   list-style-type: none; }

.entry-management-links li, .entry-interaction-links li {
   
   display: inline;
   padding: 0px 7px 0 7px;
   border-right: 1px solid #646464;}

/* COMMENTS ON AN ENTRY ----------- */

.talkform {

margin: auto; 
  padding: 5px 10px 5px 10px;
  border: 5px solid #646464; }

#qrform {

margin: 10px 0 10px 0; }

.comment {

margin: 15px 0 15px 0;
   border: 10px solid #f2f2f2;
   padding: 15px 20px 15px 20px;}

.comment-title {

font-weight: bold;
   font-size: 20px;
   margin: 0 0 10px 0; }

.comment-poster {

text-transform: lowercase; }

.poster-ip {

padding: 0 0 0 15px; }

.comment-content {

padding: 15px 0 100px 0; }

.comment-management-links, .comment-interaction-links  {

display: inline;
   list-style-type: none; }

.comment-management-links li, .comment-interaction-links li {
   
   display: inline;
   padding: 0px 7px 0 7px;
   border-right: 1px solid #646464;}

.metadata-item-music, li.watch_comments, li.entry-replylink, li.watch_thread, li.thread {

border: none; }

.bottomcomment .watch_comments {

border-right: 1px solid #646464; }

.bottomcomment select, .bottomcomment input { 
   float:right; 
   display: block; }

/* ARCHIVE VIEW ------------------- */

#archive-year, .month {

text-align: center; }

table.month { 
   
   width: 300px;
   margin: auto; }

table.month caption {

display: none; }

table.month .day {

height: 45px; }

table.month td {

vertical-align: top; }

table.month .day-has-entries p {

margin-top: 5px;
   }

table.month .day-has-entries a {
   
   padding: 3px 7px 3px 7px; 
   background: #f2f2f2;
   border: 1px solid #cccccc;
   font-size: 14px;
   text-decoration: none; }

/* MONTH VIEW ---------------------------- */

#archive-month h3.entry-title, 
#archive-month h3.entry-title a {
   padding-left: 15px;
   font-size: 15px; 
   display: inline; }

#archive-month .poster {

padding-right: 10px; }

/* TAGS VIEW -------------------------- */

.page-tags #content {

text-align: center; }

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

.page-tags .ljtaglist li {
   margin: auto;
   margin-top: 5px;
   width: 500px;
   background: #f2f2f2;
   border: 1px solid #cccccc;
   padding: 3px 7px 3px 7px; 
  }

.page-tags .ljtaglist li:hover {

background: #ffffff;

}

.page-tags .ljtaglist li a:hover {

color: #000000;

}

/* DW Site branding ----------------  */

#site-branding, #site-branding a {

height: 25px;
   background: #db0404;
   font-family: arial, verdana, sans-serif;
   font-weight: bold;
   font-size: 15px;
   color: #fff;
   text-decoration: none; 
   line-height: 15px;
   padding: 0 20px 0 0; }

If you'd like to BETA a SIDEBAR ENABLED prototype, I have it live here at

shifgrethor. I offer no support right now or guarantees of non-breakage, but it's available here:

/* Coded by Karanguni for DW Transmogrified. :D */

/* GLOBAL RESETS ---------- */

*, html {
   padding: 0;
   margin: 0;
   border: 0;
   outline: none; 
   font-size: 100%;
}

small {

font-size: smaller; }

big {

font-size: larger; }

blockquote {

margin: 30px 10px 30px 10px;
   border: 1px solid #646464;
   padding: 10px 20px 10px 20px; }

h1 {
   line-height: 42px;
   font-size: 40px; }

h2 {

line-height: 32px;
   font-size: 30px; }

h3 {

line-height: 18px;
   font-size: 16px; }

#content ol, #content ul {

margin: 10px 0 10px 30px;
   line-height: 15px; }

#content ul {

list-style-type: square; }

/* GENERAL LINK COLOURS ---------- */

a {

color: #db0404; }

a:visited {
   
   color: #db0404; }

a:hover {

color: #cacaca; }

/* LAYOUT SIZE ---------------- */

#container {
   font-family: arial, verdana, sans-serif;
   width: 100%; }

#wrap {

width: 98%;
    margin: auto;
}
  
.module-section-two { 
   width: 15%; 
   float: left;
   display: block;
   padding: 0 10px 0 10px ;
 }

.module-section-two .module {
   
   width: 95%;
   float: left; 
   display: block; 
   font-size: 11px; 
   margin: 0 0 15px 0;}

.module-section-two ul {

list-style-type: square;
   margin: 0 0 0 7px; }

.module-section-two ul li a {

text-decoration: none; }

.module-userprofile .module-content {

text-align: center; }

.module-userprofile .module-content p {

padding: 5px 0 5px 0; }

.module-userprofile ul {

list-style-type: none;
     }

.module-userprofile li {

display: inline; }

.module-calendar table {

width: 100%;   
  text-align: center;
 }

.module-calendar table td {

width: 18px;
   height: 18px; }

.module-calendar td a {
   text-decoration: none;
   padding: 2px 5px 2px 5px;
  background: #f2f2f2;
  border: 1px solid #cccccc; }

.module-typelist ul 
.module-calendar table {
   
   width: 180px; }

.module-categories ul {

list-style-type: square;
    }

.module-categories ul li {
   
   display: block; 
   font-size: 11px; }

.manage-tags-link a {

text-decoration: none;
   font-weight: bold;
   text-transform: uppercase;
   margin-top: 7px; }

.module-section-two .module-header { 
   
   text-transform: lowercase; 
   font-family: century gothic, sans-serif;
   font-size: 32px;
   margin-bottom: 10px;}

.module-section-two .module-header a {

text-decoration: none; }

#content {
   float: right;
   display: block; 
   width: 80%; 
   font-size: 12px;
   line-height: 15px;
}

#header {

width: 77%;    /* your header width */
   height: 180px; /* your header height */
   margin: auto;
   color: #000; 
   text-align: center;}

#header a {

color: #000; }

#title {

text-transform: lowercase;
   padding-top: 20px;
   font-family: century gothic, sans-serif;
   font-size: 72px;
   letter-spacing: -3px;
   line-height: 39px; }

/* NAVIGATION LINKS ----------------- */

.module-navlinks {

height: 25px;
   width: 100%;
   background: #db0404;
   text-align: center;
   padding: 0;
   margin: 15px 0px 15px 0px; }

.module-navlinks ul {
   
   list-style-type: none;
   text-transform: lowercase;
   height: 25px;  }

.module-navlinks ul li {
  
   display: inline;
}

.module-navlinks ul li a {

font-family: arial, verdana, sans-serif;
   font-weight: bold;
   font-size: 32px;
   color: #fff;
   text-decoration: none; 
   line-height: 25px;
   padding: 0 20px 0 0;

}

.module-navlinks ul li a:hover {

color: #000; }

/* SKIP LINKS ------------------------- */

.navigation {

padding: 0 0 30px 0; 
   text-align: center;}

.navigation ul {

list-style-type: none; }

.navigation ul li {

display: inline;
   padding-right: 20px; }

.navigation ul li a {

font-family: arial, verdana, sans-serif;
   font-weight: bold;
   font-size: 22px;
   color: #db0404;
   text-decoration: none; 
   line-height: 22px;
   text-transform: uppercase; }

/* CONTENT --------------------------- */

.entry {

border: 10px solid #f2f2f2;
   padding: 15px 20px 15px 20px;
   margin: 0 0 40px 0; }

.header {

text-transform: uppercase;
   font-size: 11px;
   padding: 0 0 10px 0; }

.datetime a {

color: #db0404; 
   text-decoration: none;
   border-bottom: 1px dotted #db0404; }

.datetime a:hover {

color: #000; }

.contents .userpic {

float: right;
   border: 10px solid #000; }

.poster {
   margin: 0 0 5px 0;
   font-size: 11px; }

.entry-content {

padding-top: 10px; }

/* ENTRY METADATA ---------------- */

.metadata {

margin-top: 15px;
   color: #646464; }

.metadata ul {

list-style-type: none; }

.metadata ul li {
  
   display: inline; }

.metadata-label {

font-weight: bold; }

.metadata-item {

padding-right: 5px; 
   border-right: 1px solid #646464; }

/* ENTRY TAGS ------------------- */

.tag {

padding: 5px 10px 5px 10px;
  background: #f2f2f2;
  border: 1px solid #cccccc;
  margin: 20px 0 20px 0; }

.tag:hover {

background: #ffffff; }

.tag a:hover {

color: #000000; }

.tag ul {

list-style-type: none; }

.tag ul li {

display: inline;
   padding-right: 7px; }

/* ENTRY LINK BAR ---------------------- */

.entry-management-links, .entry-interaction-links  {

display: inline;
   list-style-type: none; }

.entry-management-links li, .entry-interaction-links li {
   
   display: inline;
   padding: 0px 7px 0 7px;
   border-right: 1px solid #646464;}

/* COMMENTS ON AN ENTRY ----------- */

.talkform {

margin: auto; 
  padding: 5px 10px 5px 10px;
  border: 5px solid #646464; }

#qrform {

margin: 10px 0 10px 0; }

.comment {

margin: 15px 0 15px 0;
   border: 10px solid #f2f2f2;
   padding: 15px 20px 15px 20px;}

.comment-title {

font-weight: bold;
   font-size: 20px;
   margin: 0 0 10px 0; }

.comment-poster {

text-transform: lowercase; }

.poster-ip {

padding: 0 0 0 15px; }

.comment-content {

padding: 15px 0 100px 0; }

.comment-management-links, .comment-interaction-links  {

display: inline;
   list-style-type: none; }

.comment-management-links li, .comment-interaction-links li {
   
   display: inline;
   padding: 0px 7px 0 7px;
   border-right: 1px solid #646464;}

.metadata-item-music, li.watch_comments, li.entry-replylink, li.watch_thread, li.thread {

border: none; }

.bottomcomment .watch_comments {

border-right: 1px solid #646464; }

.bottomcomment select, .bottomcomment input { 
   float:right; 
   display: block; }

/* ARCHIVE VIEW ------------------- */

#archive-year, .month {

text-align: center; }

table.month { 
   
   width: 300px;
   margin: auto; }

table.month caption {

display: none; }

table.month .day {

height: 45px; }

table.month td {

vertical-align: top; }

table.month .day-has-entries p {

margin-top: 5px;
   }

table.month .day-has-entries a {
   
   padding: 3px 7px 3px 7px; 
   background: #f2f2f2;
   border: 1px solid #cccccc;
   font-size: 14px;
   text-decoration: none; }

/* MONTH VIEW ---------------------------- */

#archive-month h3.entry-title, 
#archive-month h3.entry-title a {
   padding-left: 15px;
   font-size: 15px; 
   display: inline; }

#archive-month .poster {

padding-right: 10px; }

/* TAGS VIEW -------------------------- */

.page-tags #content {

text-align: center; }

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

.page-tags .ljtaglist li {
   margin: auto;
   margin-top: 5px;
   width: 500px;
   background: #f2f2f2;
   border: 1px solid #cccccc;
   padding: 3px 7px 3px 7px; 
  }

.page-tags .ljtaglist li:hover {

background: #ffffff;

}

.page-tags .ljtaglist li a:hover {

color: #000000;

}

/* DW Site branding ----------------  */

#site-branding, #site-branding a {

COMMON OPTIONS:

( adding headers, removing titles, changing colours, adjusting font size )

It's good being the third layout in as many days; I don't think this one suffers from any bugs, but do yell if you find one! :D

To the people whom I owe troubleshooting: I'll get back to you ASAP, but it'll probably be around this weekend? D: D: LIFE GETS IN WAY SOMETIMES.

NOTE: for some completely bizarre reason that I cannot for the life of me understand, some journals and communities are not rendering Transmogrified properly - entire navigation strips are disappearing! I HAVE NO IDEA. D: D: It's probably a coding bug on DW's server side, so if this happens to you, try sending in a bug report?

karanguni

Larger screenshots for happy eyes!

layout: transmogrified
supports custom comment pages: yes
supported on: free & paid
works on: 1024 screens and up only, sorry!
does not play nice with: the navigation bar D:, or Opera

HAS NOT BEEN TESTED IN INTERNET EXPLORER

INSTRUCTIONS

1. Go to the journal customisation page and select transmogrified as your theme
2. Go to the custom CSS page and UNCHECK "use layout's stylesheet" option
3. Copy past the following code into the "embed CSS" textarea:

/* Coded by Karanguni for DW Transmogrified */

/* GENERAL ----------------- */

* {

margin: 0;
   padding: 0;
   outline: none; }

html {

font-family: arial, verdana, sans-serif; /* default fonts for all pages */
   font-size: 100%;
   overflow-x: hidden; }

body {

background: #ecf0e9; }

blockquote {

margin: 10px 30px 10px 30px;
   padding: 10px 5px 10px 5px;  
   border-left: 2px solid #333; }

#container {

width: 925px; 
   margin: auto; }

.module-section-two {
   
   float: left;
   position: relative;
   top: -370px;
   width: 210px; 
   background: #ecf0e9; }

/* SIDEBAR LINK COLOURS ---------- */

.module-section-two a {

color: #2a3722; }

.module-section-two a:hover {

color: #ecf0e9; }

/* SIDEBAR HEADERS ----------------- */

.module-section-two .module-header { 
   text-decoration: none;
   font-weight: bold;
   text-transform: lowercase;
   background: transparent;
     color: #2a3722;
   position: relative;
   top: 8px; 
   left: 15px;}

.module-section-two .module-header a { 
   text-decoration: none;
   font-weight: bold;
   text-transform: lowercase;
   background: transparent;
     color: #2a3722;
   position: relative;
   top: 0px; 
   left: 15px;}

.module-section-two .module-header a:hover {

color: #4e6c3c; }

/* SIDEBAR GENERAL ------------------- */

.module-section-two .module-content {
   font-size: 0.7em;
   text-align: center;
   width: 194px;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 15px 5px 25px 5px; 
   background: url(http://andmoreslow.net/layouts/armyfatigued/modulebg.gif) no-repeat bottom center #4e6c3c;
    }

/* CONTENT GENERAL ---------------------- */

#content { 
 padding: 15px 10px 0px 10px; 
   position: relative;
   top: -165px;
   float: right;
   width: 660px; 
   background: url(http://andmoreslow.net/layouts/armyfatigued/entrytop.gif) no-repeat top center #99a990;

}

/* LINK COLOURS ------------------- */

a { 
  color: #4e6c3c;
 text-decoration: none;  }

a:hover {

color: #ecf0e9; }

.module-section-two a {

color: #2a3722; }

/* JOURNAL TITLE ---------------------- */

#header {

float: right;

width: 685px;
   height: 185px; 
   background: url(http://andmoreslow.net/layouts/armyfatigued/headerbg.gif) no-repeat top left; }

#header a {

color: #000;}

#title {
   position: relative;
   left: 6px;
   top: 110px; 
   width: 365px;
   font-size: 36px;
   line-height: 25px;
   letter-spacing: -1px; 
   text-transform: lowercase; }

/* JOURNAL NAVIGATION -------------------- */

.module-navlinks ul {
   float: right;
   position: relative;
   top:-180px;
   list-style-type: none;

}

.module-navlinks ul li a {
   color: #4e6c3c;
   font-size: 42px;
   line-height: 20px;
   text-decoration: none;
   text-transform: lowercase;
   font-weight: bold;
    }

.module-navlinks ul li a:hover {

color: #ecf0e9; }

/* ENTRY TITLES ---------------------- */

.entry-title, .entry-title a {

text-decoration: none;
  color: #2a3722;
  padding-bottom: 5px;
   }

/* ENTRY DATETIMES AND USERPIC --------------- */

.datetime {

font-size: 0.7em; 
  padding-left: 0.5em; }

.userpic img {

border: 0px; }

.userpic {

padding: 0px; 
  margin-left: 2px;
  border: 1px solid #333; }

.contents .userpic, .contents .poster {

float: right;
   }

.contents .poster {
   clear: left;
   padding-right: 3px;
   text-align: center;
   position: relative;
   top: -47px;
   left: 100px;
   font-size: 0.7em; }

.contents .poster .ljuser {

display: block; }

/* ENTRIES ------------------------- */

.entry-content {
  
  font-size: 0.6875em; /* edit to change entry font size */
   padding: 10px 10px 10px 10px; }

.entry-content ul, .entry-content ol {

margin-left: 15px; }

/* ENTRY META ----------------------- */

.metadata {
  padding-left: 10px;
  font-size: 0.7em; 
  color: #ecf0e9;}

.metadata ul {

list-style-type: none; }

.metadata-label {

border-bottom: 1px dotted #ecf0e9; }

.metadata-item {

padding-left: 5px; }

.tag {
  padding-top: 25px;
  padding-left: 10px; }

.tag-text {

font-size: 0.7em;
  text-transform: lowercase; }

.tag ul {
  list-style-type: none; 
  font-size: 0.7em; }

.tag ul li {
  display: inline;
  padding-right: 6px; }

.tag ul li a {

text-decoration: none; }

/* ENTRY LINKBAR -------------------------- */

.entry-management-links, .entry-interaction-links {
  height: 45px;
  padding: 12px 0px 0px 30px; 
  list-style-type: none;
  background: url(http://andmoreslow.net/layouts/armyfatigued/linkbarbg.gif) no-repeat top center; }
 
.entry-management-links li, .entry-interaction-links li {
  display: inline;
  padding-right: 6px; }

.entry-management-links li a, .entry-interaction-links li a {
  text-decoration: none;
  color: #4e6c3c;
  font-size: 0.7em; }

.entry-management-links li a:hover, .entry-interaction-links li a:hover {

color: #ecf0e9; }

/* MODULES ------------------------------ */

/* PROFILE ------------------------------ */

.module-userprofile .userpic {

border: 0px; }

.module-userprofile ul {

list-style-type: none;

}

.module-userprofile ul li {

display: inline; }

/* CALENDAR ----------------------------- */

.module-calendar table {

width: 195px;
 height: 140px; }

.module-calendar table a {

font-weight: bold;
  font-size: 15px; }

/* TAGS ----------------------------- */

.module-categories ul {

list-style-type: square; }

/* COMMENTS ------------------------- */

.talkform {

font-size: 0.6875em;
  width: 650px; }

/* COMMENT PAGES ----------*/

hr.below-reply-container, hr.above-entry-interaction-links {

display: none; }

#comments {

padding: 5px 10px 5px 10px; }

#comments .footer {

padding-top: 20px; }

#comments .footer ul {

list-style-type: none; }

#comments .footer ul li {

display: inline;
   }

.comment-title, .comment-title a {

color: #000; 
   font-size: 0.85em;
   font-weight: bolder; 
   padding: 0.5em 0em 0.5em 0.5em;}

.comment-title a:hover {

color: #ecf0e9; }

.comment-content {

padding: 1em 0.5em 1em 1em;
   font-size: 0.6875em; 
 }

#comments .comment-poster {
  padding-top: 5px; 
}

#comments .poster-ip  {
   padding-left: 5px; 
   font-size: 0.6875em; }

.bottomcomment {

font-size: 0.8em; }

.bottomcomment ul {

list-style-type: none; }

#comments .footer, .comment .footer

{

font-size: 0.7em; }

#comments .footer a, .comment .footer a

{

padding-right: 0.5em; }

.comment-interaction links, .comment-management-links {

float: left;
   display: block; }

.comment-wrapper {

margin-top: 10px; }

.comment-wrapper-odd {

border-top: 3px solid #000000; }

.comment-wrapper-even {

border-top: 3px solid #2a3722; }

/* MONTH VIEW ---------------------- */

#archive-month, #archive-year {

padding: 15px 10px 5px 10px; }

#archive-month dd  {

font-size: 0.9em; }

#archive-month .tag {

padding-top: 1.5em;
 }

#archive-month .tag ul {

list-style-type: none; }

#archive-month .tag ul li {

display: inline;
    padding-right: 1em; }

/* YEAR VIEW ------------------------ */

.month  {

font-size: 0.95em;
     vertical-align: top;  
     width: 400px; }

.month caption {

display: none; }

.month th {

text-align: center; }

.month .day {

text-align: center;
     width: 20px;
     height: 40px;
     vertical-align: top;  }

.day-has-entries a {

text-align: center;
     font-size: 14px;
     font-weight: bold;

}

.month-wrapper .footer {

margin-top: 2em; 
    border-bottom: none;
    font-size: 0.8em; }

#archive-year {

font-size: 0.8em; }

#archive-year ul {

list-style-type: none; }

/* TAG LISTING ---------------------- */

.page-tags h2 {

padding: 15px 10px 0px 10px; }

.page-tags .ljtaglist {
        font-size: 0.7em; 
   padding: 10px 20px 10px 20px; 
   list-style-type: square; }

/* DW BRANDING --------- */

#site-branding {
   margin-left: 10%;
   font-size: 0.75em;
   text-transform: lowercase; }

/* SKIP LINKS ---------- */

.navigation {
     text-align: center;
     margin: 0px;
     padding-top: 10px;
     padding-bottom: 10px;  
     height: 15px;
}

.navigation ul {

list-style-type: none;
      height: 15px;
      padding: 0px; 
      margin: 0px; }

.page-back, .page-forward {

display: inline;
  padding-right: 3em;
  
  font-weight: bold;
  text-transform: lowercase; }

COMMON OPTIONS

Q: HALP SIDEBAR GO UP ABOVE PAGE!
A: Working on it! For now, try this: Look for

.module-section-two {
   
   float: left;
   position: relative;
   top: -370px;
   width: 210px; 
   background: #ecf0e9; }

and change

top: -370px

to something like 0. The larger (non-negative) the number, the further down it comes from the top of the page.

Q: My journal title's too long and is spilling over like the Nile during flood season!
A: You can move it up by seeking

#title {
   position: relative;
   left: 6px;
   top: 110px; 
   width: 365px;
   font-size: 36px;
   line-height: 25px;
   letter-spacing: -1px; 
   text-transform: lowercase; }

and changing

top:110px

to a smaller value. :D

( Here below the cut! )

If you have any more questions, drop them in the comments here!

karanguni

Larger screenshots for happy eyes!

layout: transmogrified
supports custom comment pages: yes
supported on: free & paid

Hugely inspired by

grrliz's mixit layout, which is infinitely better coded. Do check it out if you have a paid account! :D

INSTRUCTIONS

1. Go to the journal customisation page and select transmogrified as your theme
2. Go to the custom CSS page and UNCHECK "use layout's stylesheet" option
3. Copy past the following code into the "embed CSS" textarea:

/* Designed by Karanguni. Feel free to use as you wish! Credit would be nice. --- */

/* BASIC PAGE DEFINITIONS ----------------- */

* {

outline: none; }

html, p, blockquote {

font-family: arial, verdana, san-serif;
    x-overflow: hidden;}

hr.below-reply-container, hr.above-entry-interaction-links {

display: none; }

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5 {

clear: both;
 }

.module-list li, .footer ul li {

display: inline; }

.entry-content ul {

list-style-type: square; }

.entry-content ul, .entry-content ol {
   margin: 0 2.5em 0 1.5em;
   }

blockquote {

padding: 3em 1.5em 3em 1.5em;
   margin-left: 3em;
   margin-right: 3em;
   border-left: 1px solid #000;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   border-right: 3px solid #000; }

/* GENERAL LINK COLOURS ----------------- */

* a {
    
    text-decoration: none;
    color: #E6B71A  ; }

* a:hover {

color: #333332; }

/* SIZE OF LAYOUT ----------------- */

#container {

width: 90%;
    margin: auto;
    font-size: 100%;
    text-align: center; /* IE fix */ }

#content {
    
    width: 80%;
    display: inline; 
    float: right; 
    
    text-align: left;
}

.module-section-two {
    
    width: 18%;
    display: inline;
    float: left;
    padding-top: 35px; 
    border-top: 1px solid black; 
    text-align: left;
 }

/* JOURNAL TITLES --------- */

#header a {

color: #E6B71A;   /* colour of journal title */
}

#title {
    text-align: left;
    font-family: arial;
    text-transform: lowercase;
    font-size: 3.1em;
    border-top: 3px solid black; }

#title a {

color: #000 !important; }
    
/* NAVIGATION ---------------- */

.module-navlinks {

padding: 0px;
    border-top: 1px solid #666;
    background: #fff; }

.module-navlinks a {

padding-right: 1em;
    paddding-left: 1em; 
    font-weight: bold;
    text-transform: lowercase;
}

/* MODULE AND ENTRY TITLES ----------- */

.module-header {
    
    margin-top: 0px;
    border-top: 3px solid #000;
    padding-top: 0.4em;
    text-transform: uppercase; }

.entry-title {
    
    margin-top: 0px;
    border-top: 3px solid #000;
    padding-top: 0.4em;
    text-transform: uppercase; }

.entry-title a {

text-transform: uppercase;
    color: #000; }

.entry-title a:hover {

text-transform: uppercase;
    color: #E6B71A  ; }
    
    
/* ENTRY DATES AND TIMES --------- */

.datetime {
    
    text-align: right;
    font-size: 0.75em;
    color: #ccc;
    text-transform: lowercase;
    float: right;
    width: 130px;
    height: 1em;
 }

.date {

display: block; }

/* ENTRY USERPIC AND POSTER ----------- */

.contents .userpic {

float: right;
    border: 1px solid #ccc; }

.userpic img {

border: none; }

.poster {

text-align: right;
    display: block;
    width: 130px;
    float: right;
    position: relative;
    left: 230px;
    top: 2.5em; 
    font-size: 0.7em;}

.poster .ljuser {

display: block;
    font-size: 1.2em;
    border-right: 3px solid #000000;
    padding-right: 5px;

margin-top: 0.5em;}

/* ENTRIES ------------ */

.entry-content {

x-overflow: hidden;
    padding-top: 0.2em;
    font-size: 0.6875em; /* edit to change entry font size */
    line-height: 1.2em;
 }

.footer {

margin-top: 4em;
    border-bottom: 1px solid #666;
    margin-bottom: 3em;
 }

/* ENTRY TAGS --------------- */

.tag-text {

font-size: 0px; }

.tag {
    
    background: url(http://andmoreslow.net/layouts/tinyicons/tag.gif) no-repeat left center; 
    text-transform: uppercase;
    font-size: 0.75em; }

.tag ul {
    
   position: relative;
   top: -0.3em;
    }

.tag ul li {

padding-left: 1em;
    padding-right: 1em;
}

.tag ul li a {

background: #000; }

.tag ul li a:hover {
    background: #000;
    color: #fff; }
 
/* METADATA ---------------------- */

.metadata {
    
  margin-top: 3em;
  font-size: 0.75em;
  color: #666; }

.metadata ul  {

list-style-type: none; }

/* ENTRY LINKS ------------------- */

.entry-management-links, .entry-interaction-links {
    
    font-size: 0.7em;
    text-transform: lowercase;
    font-weight: bold;
    text-align: left;
    height: 20px;
}

.entry-management-links {

background: url(http://andmoreslow.net/layouts/tinyicons/page.gif) no-repeat left center; }

.entry-interaction-links {

background: url(http://andmoreslow.net/layouts/tinyicons/comment.gif) no-repeat left center; }

.entry-management-links li a, .entry-interaction-links li a {

display: block;
    float:left;
    width: 110px;
    padding-left: 0.5em;
    padding-top: 0.2em;
    padding-bottom: 0.2em; 
    padding-right: 0.3em;

}

/* SKIP LINKS ---------- */

.navigation {

margin: 0px;
     padding-top: 10px;
     padding-bottom: 10px;  
     height: 15px;
     border-top: 1px solid black; }

.navigation ul {

list-style-type: none;
      height: 15px;
      padding: 0px; 
      margin: 0px; }

.page-back, .page-forward {

display: inline;
  padding-right: 3em;
  
  font-weight: bold;
  text-transform: lowercase; }

/* SIDEBAR MODULES -------------- */

.module-section-two .module-content {

margin-bottom: 2em;   
    font-size: 0.6875em; 
    }
    
    
    
/* PROFILE ------------- */

.module-userprofile {

}

.userlite-interaction-links {

list-style-type: none; }

.userlite-interaction-links li {

display: inline ; }

/* SUMMARY ----------- */

.module-pagesummary ul li {

padding-top: 0.5em;
    text-indent: -2em;
    display: block; }
    
/* CALENDAR ----------- */

.module-calendar table {
    
    width: 90%; }

.module-calendar table td {

padding: 0px;
   text-align: center; }
    
.module-calendar .entry-day {
    
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    
    }
    
    /* LINKLIST -------------- */

.module-typelist .module-list a {
    
    display: block;

}
    
/* TAGS -------------- */

.module-categories .module-list a {
    
    display: block;

}
 
.module-categories .module-list a:hover {
    
    padding-left: 5px;
    border-left: 3px solid black;
 }

.module-categories_multilevel .module-list li {
    
    display: block;
    padding-bottom: 0.3em;

}

/* DW BRANDING --------- */

#site-branding {
   margin-left: 10%;
   font-size: 0.75em;
   text-transform: lowercase; }

/* COMMENT PAGES ----------*/

.comment-title, .comment-title a {

color: #000; 
   font-size: 0.85em;
   font-weight: bolder; 
   padding: 0.5em 0em 0.5em 0.5em;}

.comment-title a:hover {

color: #E6B71A; }

.comment-content {
   padding: 1em 0.5em 1em 1em;
   font-size: 0.6875em; 
 }

.comment-poster {

position: relative;
   top: 3em; }

#comments .poster-ip  {

color: #ccc;
   font-size: 0.6875em; }

.bottomcomment {

font-size: 0.8em; }

.bottomcomment ul {

list-style-type: none; }

#comments .footer, .comment .footer

{

font-size: 0.6875em; }

#comments .footer a, .comment .footer a

{

padding-right: 0.5em; }

.comment-interaction links, .comment-management-links {

float: left;
   display: block; }

.comment-wrapper-odd {

border-top: 3px solid #333; }

.comment-wrapper-even {

border-top: 3px solid #ccc; }

.talkform {

font-size: 0.6875em;
 }

/* ARCHIVE VIEW ------------ */

#archive-month dd  {

font-size: 0.6875em; }

#archive-month .tag {

padding-top: 1.5em;
 }

#archive-month .tag ul {

list-style-type: none; }

#archive-month .tag ul li {

display: inline;
    padding-right: 1em; }

/* YEAR VIEW -------------- */

.month  {

font-size: 0.95em;
     vertical-align: top;  
     width: 400px; }

.month caption {

display: none; }

.month th {

text-align: center; }

.month .day {

text-align: center;
     width: 20px;
     height: 40px;
     vertical-align: top;  }

.day-has-entries a {

text-align: center;
     padding: 10px 15px 10px 15px; 
     border: 1px solid #ccc;

}

.month-wrapper .footer {

margin-top: 2em; 
    border-bottom: none;
    font-size: 0.8em; }

COMMON OPTIONS

( Here below the cut! )

If you have any more questions, drop them in the comments here!

Credit to either

karanguni or

shifgrethor in your profile or sidebar would be nice! :D

[edit] There were a few issues with the profile userpic, comment links and archive views that I've fixed in a blaze of panic in the last few minutes; if there are any more issues, please let me know! :D :D

over the wide sargasso

[transmogrified] Read Army (HEADER IMAGE support!)

[Transmogrified] Army Fatigued

[Transmogrified] Sink and Tomes

Profile

May 2009

Links

Syndicate

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags