Venus as a Boy [Transmogrified]

[milkymoon]

Here's my first (public) theme for Dreamwidth! It's a CSS layer for the Transmogrified style. The preview is over at imagination.



1. Go to Organise/Customise Style.
2. Choose the Transmogrified theme.
3. Click on 'Custom CSS'.
4. Untick 'use layout's stylesheet' and paste the code in!
Here is the link to the repeating header image; please host it yourself if at all possible.
http://i11.photobucket.com/albums/a176/indusztri/ouricons/476300.png


/* Cleaned CSS: */

/* Cleaned CSS: */

/* believe me, this style is much easier to deal with if you
just leave this here. It says "lets use the IE box model" for
non IE browsers */
* { box-sizing:border-box; -moz-box-sizing:border-box }

body {
background-color: #000000;
font-family: Arial , ;
font-size: 10pt;
margin: 0 10%;
padding: 0;
}

#container {
background-color: #000000;
}

#header {
background: #000000 url('http://i11.photobucket.com/albums/a176/indusztri/ouricons/476300.png') repeat scroll;
margin: 0;
padding: 0;

}

#header a {
color: #ffffff;
text-decoration: none;
}

#header h1 {

margin:0px;
padding:40px;
color:#000000;
}

#header h2 {
padding: 0 20px 20px 20px;
}

#wrap {
color: #666666;
padding-right: 230px;
padding-top: 20px;
padding-left: 20px;
}

#content {
margin: 0 0;
position: relative;
width: 100%;
float: left;
padding-bottom: 20px;
}

.page-tags #content{
border: 1px solid #000000;
padding: 10px;
margin-top: 10px;
}

.page-tags #wrap {
margin-left: 20px;
}

.module-section-two {
position: relative;
width: 230px;
float: left;
/* this must stay at the bottom of this code as in some circumstances
it closes one declaration and opens another one */
margin-right: -230px;;
}

.module-section-two .module {
border: solid 1px #000000;
color: #666666;
background-color: #000000;
margin: 20px;
margin-left: 10px;
padding: 10px;

}

.module-section-one li {
display: inline;
list-style: none;
}
.module-section-one ul {
background-color: #A6A1A1;
color: #000000;
margin: 0;
padding: 0.5em 20px;
}

.module-section-one li a {
text-decoration: none;
padding-top: 0.5em;
padding-right: 20px;
padding-bottom: 0.5em;
padding-left: 20px;
background-color: #A6A1A1;
color: #000000;
}

.module-section-one ul li a:hover, .module-section-one ul li.active a {
background-color: #000000;
color: #ffffff;
}

.module-section-two a {
color: #696464;
}
.module-section-two .module-header a {
text-decoration: none;
}
.module-section-two h2 {
margin: 0;
margin-bottom: 7px;
font-size: 1.1em;
padding: 0.2em;
background-color: #000000;
color: #A6A1A1;
border-bottom: 1px solid #A6A1A1;
}

.module-section-two ul {
list-style-type: none;
margin-left: 0.5em;
padding: 0;
}
.module-section-two ul ul {
list-style-type: none;
margin-left: 0.5em;
padding: 0.5em;
}

.module-userprofile .userpic img {
border: 8px solid #A6A1A1;
margin: 20px;
}
.module-userprofile .userpic {
text-align: center;
}
.module-userprofile ul {
margin: 0px;
padding: 0px;
text-align: center;
margin-top: 5px;
}
.module-userprofile p {
margin-top: 0px;
margin-bottom: 0px;
}
.module-userprofile li {
display: inline;
padding: 5px;
list-style: none;
}
.module-calendar {
text-align: center;
}
.module-calendar table {
margin-left: auto;
margin-right: auto;
}

.entry, .comment, .text_noentries_day {
padding: 10px;
margin-top: 76px;
position: relative;
margin-bottom: 10px;
}
.entry .userpic a, .comment .userpic a {
display: block;
position: absolute;
right: 10px;
top: -66px;
padding: 5px;
}
.entry .userpic img, .comment .userpic img {
border: none;
}
.entry-title, .comment-title {
padding: 0.2em;
margin: 0;
margin-right: 120px;
}
.entry-title a, .comment-title a {
text-decoration: none;


}

.entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day {
border: solid 1px #000000;
background-color: #000000;
color: #666666;
}
.entry-wrapper-odd .userpic a, .comment-wrapper-odd .userpic a {
background-color: #000000;
border: solid 1px #696464;
}
.entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title {
border-bottom: solid 1px #696464;
color: #A6A1A1;
background-color: #000000;
}
.entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a {
color: #A6A1A1;
}
a, .entry-wrapper-odd a, .comment-wrapper-odd a {
color: #696464;
}

.entry-wrapper-even .entry, .comment-wrapper-even .comment {
border: solid 1px #000000;
background-color: #000000;
color: #666666;
}
.entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a {
background-color: #000000;
border: solid 1px #696464;
}
.entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {
border-bottom: solid 1px #696464;
color: #A6A1A1;
background-color: #000000;
}
.entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a {
color: #A6A1A1;
}
.entry-wrapper-even a, .comment-wrapper-even a {
color: #696464;
}

.entry .time, .entry .date {
padding: 0.2em;
display: inline-block;
}
.entry-content, .comment-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 {
white-space: nowrap;
}
.entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {
text-align: right;
margin: 0;
padding: 0;
display: inline;
}
.entry-management-links li, .entry-interaction-links li,
.comment-management-links li, .comment-interaction-links li {
display: inline;
list-style: none;
margin: 0;
padding: 5px;
}
/* lets have a default */
.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, .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;
}
.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;
min-width: 40%;
}

#content > hr { display: none; }

.module-section-three {
clear: both;
width: 100%;
background-color: #A6A1A1;
color: #000000;
margin: 0;
padding: 0.5em 0px;
}
.module-section-three a {
color: #ffffff;
}
.module-section-three .module {
padding-left: 20px;
}

.hfeed .navigation {
}

.navigation {
margin: 0;
padding: 10px;
text-align: center;
border: 1px solid #000000;
background-color: #000000;
color: #ffffff;
}

.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.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;
}

.page-tags #content h2 {
padding: 0.2em;
margin: 0;
border-bottom: solid 1px #A6A1A1;
color: #A6A1A1;
background-color: #000000;
font-size: 1.2em;
margin-bottom: 20px;
}

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

.month-wrapper, #archive-month dl {
padding: 10px;
position: relative;
margin: 20px 0px;
border: display-none;
background-color: #000000;
}

.month-wrapper h3 {
padding: 0.2em;
margin: 0;
border-bottom: solid 1px #A6A1A1;
color: #666666;
background-color: #000000;
font-size: 1.2em;
margin-bottom: 20px;
}

.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;
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: 250px;
text-align: center;
margin: 10px 0px;
}

#postform {
margin-top: 20px;
border: solid 1px #A6A1A1;
}

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

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


Comments

[stagnation13]

LOVE THIS!!!

Snagged and gave mad props in my profile.

Thanks!