Transmogrified style
1024x768 resolution or above
DOUBTS/PROBLEMS/QUESTIONS

Click the thumbnail to preview the layout.

I wanted to make a simple layout with an image in the sidebar, more like we use to do in Tumblr, rather than a whole header at the top. You can use any image you want on your sidebar (instructions further below) but I used an image from Kiki's Delivery Service, hence the title of the layout :3 I know it's too simple and has really nothing too original to it, but I started making this for myself and thought someone would like it for it's simplicity in changing headers and having a small sidebar etc. Enjoy!

Instructions

→Go to the customize page and set your style to Transmogrified. Then save changes.
→Go to customize your theme.
→Sidebar set up:

Go to modules and set up your sidebar like above.
NOTE: Remember to hide all other modules. They are disabled but the cut tags "no cut tags" text appears and I don't know how to disable that except manually through the modules set up, sorry!
→Finally, go to custom css and UNSELECT se layout's stylesheet(s)
Now paste the overrides on the textbox and save the changes.

That's it! DOUBTS/PROBLEMS/QUESTIONS

Sidebar image

To put up a sidebar image you have to go to the text option from the customize page.
Find "Text for the 'Custom Text' box " and you'll see a box where you can type. Copy and paste this:

Replace the url if you want to change the image to your own :D.
NOTE: Size in pixels must be 400 x 250 to look like in the preview. It may be taller or smaller in height, but the width must be 400px to look right (as it's the width of the sidebar).

Images

Sidebar picture. Feel free to use your own.

Overrides

→Paste this on your profile as credit for the layout.

/*  Kiki's Delivery Service
Transmogrified
By inconformista.dreamwidth.org */

* { box-sizing:border-box; -moz-box-sizing:border-box }

body {
background-color: #EDEDED;
font-family: Lucida Sans Unicode;
text-align: justify;
font-size: 12px;
line-height: 18px;
margin-top: 0px;
padding: 0;
}

@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 400;
  src: local('CinzelDecorative-Regular'), url(http://themes.googleusercontent.com/static/fonts/cinzeldecorative/v1/fmgK7oaJJIXAkhd9798yQt0Zu-Kfjb9GTaHd117aS3o.woff) format('woff');
}

body.has-navstrip {
margin-top: 45px;
}

a, a:link, a:visited, a:active {
color: #4abaff;
border-bottom: 0px;
text-decoration: none;
}

a:hover{
color: #878787;
border-bottom: 0px;
text-decoration: none;
}

blockquote {
background: #FFFFFF;
color: #7e8d6a;
font-family: Georgia;
font-style: italic;
font-size: 14px;
padding: 3px;
}

#container {
background: transparent;
margin: 0 auto; 
width: 100%; 
text-align: justify; 
padding: 0px;
}

#wrap {
position: relative; 
}

#content {
width: 60%;
float: right;
margin-right: 4%;
margin-top: 20px;
}

#entries {
background-color: transparent;
}

#title {
background: transparent;
text-align: center;
}

#header a {
display: none;
}

#header h1 {
display: none;
}

#header h2 {
display: none;
}

h2#subtitle {
display: none;
}

.page-tags #content{
border: 0px solid #739adf;
padding: 4%;
margin-top: 100px;
width: 60%;
color: #848484;
background: #FFFFFF;
}

.page-tags #wrap {
margin: 0 auto;
background: transparent;
width: 100%;
}
    
/* SIDEBAR */

.module-section-two {
position: absolute; 
margin-top: 85px;  
width: 420px;
padding: 10px; 
color: #848484;
margin-left: 30px;
background: #FFFFFF; 
/* this must stay at the bottom of this code as in some circumstances
it closes one declaration and opens another one */
}

.module-section-two .module {  
}
 
. module-section-two .inner {
}

.module-calendar, .module-syndicate, .module-credit, .module-pagesummary {
display: none;
}

.module-userprofile {
display: none;
}

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

.module-section-one ul {
position: absolute;
color: #FFFFFF;
margin-top: 55px;
margin-left:20px;
padding: 10px;
text-align: left;
}

.module-section-one li a {
text-decoration: none;
padding-top: 0.5em;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 0.5em;
font-family: Goergia;
letter-spacing:1px;
text-transform:uppercase;
font-size: 7.6pt;
background-color: #FFFFFF;
line-height: 18px;
border-bottom: 0px dotted #bfcdd1;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
-webkit-transition: all 0.5s ease-out!important;
-moz-transition: all 0.5s ease-out!important;
color: #66aa77;
}

.module-section-one ul li a:hover, .module-section-one ul li.active a {
color: #4abaff;
background-color: #FFFFFF;
-webkit-transition: all 0.5s ease-out!important;
-moz-transition: all 0.5s ease-out!important;
}

.module-section-two h2 {
display: none;	
}

.module-typelist {
display: none;
}

.module-tags_list {
display: none;
}

.entry {

}

.entry-poster {
}

.entry, .text_noentries_day {
padding: 5px;
margin-top: 46px;
position: relative;
margin-bottom: 10px;
margin-left: 1px;
    }

.entry .userpic a {
display: block;
position: absolute;
right: 0px;
top: 0px;
padding: 5px;
}

.entry .userpic img, .comment .userpic img {
border: none;
width:80px;
height:80px;
}

.entry-title {
padding: 0.2em;
margin-top: -10px;
margin-left: -5px;
}

.comment-title {
padding: 0.2em;
}

.entry-title a, .comment-title a {
text-decoration: none;
}

.entry-wrapper-even {
min-height: 120px;
}

.entry-wrapper-odd {
min-height: 120px;
}

.entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day {
background-color: #FFFFFF;
color: #878787;
padding: 15px;
}

.entry-wrapper-odd .userpic a {
background-color: transparent;
}

.entry-wrapper-odd .entry-title {
border: solid 0px #E2DAB4;
color: #66aa77;
background-color: transparent;
font-family: Cinzel Decorative;
font-size: 18px;
line-height:22px;
font-weight:normal;
width:90%;
}

.entry-wrapper-odd .entry-title a {
border: solid 0px #E2DAB4;
color: #66aa77;
background-color: transparent;
font-weight: normal;
}

.entry-wrapper-even .entry, .comment-wrapper-even .comment {
background-color: #ffffff;
color: #878787;
padding: 15px;
}

.entry-wrapper-even .userpic a {
background-color: transparent;
}

.entry-wrapper-even .entry-title {
border: solid 0px #E2DAB4;
color: #66aa77;
background-color: transparent;
font-family: Cinzel Decorative;
font-size: 18px;
line-height:22px;
font-weight:normal;
width:90%;
}

.entry-wrapper-even .entry-title a {
border: solid 0px #E2DAB4;
color: #66aa77;
background-color: transparent;
font-weight: normal;
}

.entry .time, .entry .date {
padding: 0.2em;
display: inline-block;
}

.datetime {
}

.entry-content {
padding: 10px 0px;
}

.tag {
font-weight: bold;
text-align: left;
}

.tag a {
font-weight: normal;
}

.tag ul { 
display: inline; 
margin: 0; 
padding: 0; 
}

.tag li {
display: inline;
list-style: none;
padding: 0px;
}

.tag li:before {
content: " ";
}

.tag li:first-child:before {
content: " ";
}

*+html .tag li {
padding: 0 5px;
}

.entry .metadata ul {
margin: 0px;
padding: 0px;
}

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

.entry .footer .inner, .comment .footer .inner {
text-align: right;
}

.entry .footer a {
clear: both;
}

.entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {
text-align: right;
padding: 0;
display: inline;
font-size: 14px;
}

.entry-interaction-links a, .entry-interaction-links a:link, .entry-interaction-links a:visited {
color: #66aa77;
font-family: Georgia;
font-size:11px;
text-transform:uppercase;
}

.entry-management-links a, .entry-management-links a:link, .entry-management-links a:visited {
color: #66aa77;
font-family: Georgia;
font-size:11px;
text-transform:uppercase;
}

.entry-management-links a:hover, .entry-interaction-links a:hover {
color: #66aa77;
}

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

.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;
}

.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 {
background-image: url(http://s.dreamwidth.org/stc/transmogrified/memories.gif);
display: none;
}

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

.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,.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;
}

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

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

.entry .footer hr {
display: none;
}

.entry .metadata-label {
font-weight: bold;
}

.comment-poster {
display: inline-block;
}

#content > hr { 
display: none; 
}

.module-section-three {
display: none;
}

.module-section-three .module {
padding-left: 20px;
}

.hfeed .navigation {
}

.navigation {
margin-top: 20px;
padding: 10px;
text-align: right;
border: 0px solid #739adf;
background-color: transparent;	
color: #848484;	
}

.navigation ul {
margin: 0;
padding: 0;
text-align: right;
}

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

.navigation .page-back a:before {
content: " ";
font-size: 0.5em;
letter-spacing: 0px;
vertical-align: 40%;
padding-right: 1px;
}

.navigation .page-forward a:after {
content: " ";
font-size: 0.5em;
letter-spacing: 0px;
vertical-align: 40%;
padding-left: 1px;
}

.navigation.topnav{
display: none;
}

.page-tags #content h2 {
padding: 0.2em;
margin: 0;
color: #41B3D9;
font-size: 14px;
margin-bottom: 20px;
font-size: 16px;
font-family: Lucida Sans, Helvetica, Arial;
font-weight: normal;
}

.page-tags #content h2 {
margin-right: 10px;
}

.month-wrapper, #archive-month dl {
padding: 10px;
position: relative;
color: #878787;
margin: 20px 0px;
width: 100%;
border: solid 0px #739adf;
background-color: #ffffff;
}

.month-wrapper h3 {
padding: 0.2em;
margin: 0;
border: solid 0px #739adf;
color: #73B1C9;
font-size: 16px;
margin-bottom: 20px;
font-family: Trebuchet MS, Helvetica, Arial;
font-weight: normal;
}

.month caption {
display: none;
}

.month .day span, .month .day p {
padding: 0;
margin: 0;
}

.month .day p {
margin-top: 4px;
margin-bottom: -4px;
}

.month .day, .month th {
line-height: 2em;
vertical-align: text-top;
padding: 5px;
margin-top: 20px;
text-align: center;
}

/* IE only to line up the empty days neatly */
*+html .month .day span, *+html .month th span{
vertical-align: 100%;
}

.month .day-has-entries {
line-height: 1em;
}

.month .footer {
width: 100%;
text-align: center;
margin-top: 50px;
}

#postform {
background:#fff; 
border:1px solid #dfdfdf;
margin:20px 0; 
padding:20px;}

.text_noentries_day {
margin-top: 20px;
margin-bottom: 20px;
}
    
.comment {
border:1px solid #dfdfdf;
padding:4px;
position:relative;
margin-bottom:20px;
min-height: 180px; 
}

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

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

#comments {
padding: 8px; 
float: left;
margin: 3px;
min-height: 180px; 
background: #FFFFFF; 
width: 100%;
}

.comment-content { 
text-align: left;

}

#qrdiv table, #qrformdiv table, form #qrform{
border: 0px solid #000000!important;
}

.comment .userpic {
margin: 0 10px 10px 10px; 
float: left;
}

.comment-title {
text-transform: uppercase;
font: 13px;
}

.comment .footer {
margin: 20px 0 0 0; 
padding: 0; 
text-align: left;
}

.bottomcomment {
float: right;
}

Terms of use

-Comments are really appreciated.
-You must credit

inconformista on your profile if you use this layout. Please don't claim anything as your own.
-Feel free to edit the layout as you like as long as you: 1)Credit me in your profile (with a note that you edited the layout) and 2)Don't use my overrides to create and redistribute any layouts around the internet, they should be for your personal use only, thanks!

♥

Flat | Top-Level Comments Only

This looks like it'd be really great for roleplay journals actually. I'm definitely going to mem this for future use. <3

Great! Glad you like it :3

This looks amazing!! *A*

Thank you :3!

Love this one!

Thank you! :3

It looks like a tumblr layout! I like it.

and now i notice that you mention that, oops.

Haha yes! Don't worry :D

Glad you like it :3

This is really cool looking!

This is so beautiful, definitely going to use! <3

Thanks! :3

This is so beautiful; thank you for sharing! ;w;

Thanks, glad you like it! :3

By the way I am using this for my blog but I think there isn't a 'track this' button anywhere? Is it possible for me to add that?

Thank you~

Taking this, will credit <3

Glad you like it! :3

This is beautiful!

My only problem is that the sidebar tends to overlap the content in a lot of scenarios (iPad displays, any time browsers aren't maximized, etc.). But I think that's a necessary evil for the look (though I think it could be remedied by making it a fluid width layout + separated by percentages and just made to float relative; but though I can theorise all I want, I didn't do the hard work. >_<)

Originally it was coded with fluid width but when I started coding the menu, I encountered problems positioning it centered with the sidebar, so I decided it would be best to make it fixed width in order to be able to keep the original design I planned.

So sorry it's not fluid and looks weird on smaller resolutions and devices! I know it can be fixed, but I like the menu where it is and couldn't, for the life of me, find a way to make it flow with the rest when fluid because of the paddings and margins and also because each user has different words for the menu so... long story short, yeah, no fluid width xD

oh no, don't apologise! this is a labour of love.

This is really interesting layout. So using. Thanks for making it. ^_^

So beautiful, thank you for this.

Thank you, you are welcome and glad you like it! :3

So nice and clean~ Definitely using it! >3< Thanks a lot! ♥

Thank you :3

So, I've decided that I'll use this theme. It's so clean. :3

I'm glad you like it!! :3

Very lovely layout! Thank you so much for this; I used it with this journal.

I had another tab called Navigation, so I had to adjust the size of the secondary box. The new width I messed with is 492px.

Also I should mention that the 1024px width resolution really doesn't cut it! I'm not sure if it's because I tampered with coding, but the journal entries are quite wide. I don't even know if it'll clash at 1366 resolutions either; it looks fine at 1920px widths though, heh.

Edited 2014-02-02 23:46 (UTC)

Hi! Thanks for using it and I'm glad you like it!

Yes, the reason why the sidebar overlaps the entries is because you changed the sidebar width. Since it's wider now, the margin I left between sidebar and entries is no longer there. You could fix your layout by changing the width here:

To a higher %. 65 or 70 should be good.

Done and done. Thanks again. Looks absolutely fabulous. ♥

HAHA sorry, obviously I meant lower not higher %. I'm so tired I wrote that wrong but you noticed and managed to fix your layout so I'm happy about that! :3

Snagged and credited. Thank you!

I'm glad you liked it! ♥

Snagged! Credited! Thanks.

Account name:	Log in with OpenID?
Password:	Forget your password?
	Remember me

Kiki's Delivery Service

Instructions

Sidebar image

Images

Overrides

Terms of use

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

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject