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

[rogin]

Very very Pretty :) I just snagged.

[milkymoon]

I'm glad you like it! (Although you're supposed to *uncheck* the 'use layout's stylesheet' option--there shouldn't be any blue or orange in the layout.)

[rogin]

Fixed it, thank you very much for the advice, I'm so clueless when it comes to stuff like this.

[milkymoon]

You're welcome!

(By the way, I like how you added your own touches with your header. ^^)

[ex_kyrie55]

can't help butting in but your icon - can you tell me where you got it and if it's snaggable ? i love it. it's the slogan for discovery, right ?

boom de yada boom de yada

[heart]

xkcd, a parody of the discovery song.

[ex_kyrie55]

thank you so much.

[ex_kyrie55]

i like it. i hope i can customize it right on dreamwidth. @_@
p.s : i followed you over from lj. your layouts are really good.

[milkymoon]

I'm glad you like it. :)

By the way, I'm *not* gossymer. On LJ, I am sporkins, and my graphics community is bonne_chose.

[ex_kyrie55]

i am sorry. i think i had two many windows and mixed them up. :( i'll go correct it now.
i am suah on lj ^^

[mythdriven]

Using. Will credit in moments.

I was wondering if you cared if I edited the text colours and such. It's not necessary. I love the layout as is, but I just wanted to get your "yea" or "nay" on the matter. Dying the top image, as well, to match possibly.

Feel free to say no, I'll continue to use the theme for a while either way, edited or no, it's a lovely little piece of work. :)

[milkymoon]

You can change it if you want. :)

[mythdriven]

Sweet. Thanks. :)

[bilyana]

This layout is awesome! I swapped the colours for reading comfort and made some minor changes in my journal, but I love how clear and simple it is. Thanks a lot!

One thing that I can't figure out though, and that I hope you can give me hint how to approach: I'd like to have the headers in the sidebar (profile, links etc.) to be right-aligned and thought all I had to do was change the corresponding part like this:

.module-section-two .module-header a {
text-align: right;
text-decoration: none;
}

But it doesn't work. Am I just in the wrong place?

[milkymoon]

That changes the text alignment. Have you tried changing it within the wizard? If that doesn't work, I'll try and get back to you in a few hours--I have to run, unfortunately.

[bilyana]

Ah, nevermind, I got it. Apparently it was just the wrong section. To have any effect, the line had to be added here:

.module-section-two h2

[cemetery_moon]

Awesome layout. Snagging, and have credited you in my userinfo. Thanks. :)

[beagle_agent]

Snagged and will credit!

Astrid

[evelyn]

Very nice, I was looking for something which has a wide reading page, thanks!

[iconoplast]

Thank you! I adapted it a touch and am using it (with credit) in digitalart. By the by, you might want to tweak the css a little -- since people are known to do strangely destructive things to their fonts, it's good to specify the font family as
font-family: Arial, sans-serif;
in case they don't have Arial available for some reason.

Lovely work, and thank you again for sharing it with everyone!

[itsanonyx]

Amazing.

[statr]

It's pretty :) Used it!
Thanks!

[takerzmuse]

Love it~♥ Not using right now, but definitely adding this post to my memories!

[dee_groovy]

snagged, thank you :D

[thisisarestaurantblog]

I snagged, thank you!

[dmz2112]

Thank you for the nice clean layout! I've used your code (with a few minor tweaks) and given you due credit.

[alizarin_nyc]

Great layout! I am using.

[elegantoinks]

Yay for a dark layout!! I'm going to try it. Thank you for making!

[stagnation13]

LOVE THIS!!!

Snagged and gave mad props in my profile.

Thanks!

[sakru909]

I like this a lot. Using with credit, may tweak it a little bit later.

[laugh_at_fish]

Used it! =) thanks! =)

[mrslightwood]

Using this. Yay for dark themes! Thank you!

[fangsandscones]

Nice layout. Going to use it for my RP journal here. Will credit! Thank you!