I can't stand the Transmogrified borders; I don't know why, some rage just comes upon me when I see them. So here's my borderless contribution to the cause - pretty simple, clean, easily customizable, and (mostly) fluid.
Instructions:1) Go to
Customize and choose Transmogrified
2) Copy the code from the box below and paste it into the Custom CSS box
3) Make sure "Use Layout's Stylesheet" is checked
4) Save, and you're done!
/* basic blue by unamaga*/
* { box-sizing:border-box; -moz-box-sizing:border-box }
body {
background-color: #ffffff;
font-family: Verdana;
font-size: 10pt;
margin: 0;
padding: 0;
}
#container {
background-color: #ffffff;
}
#header {
background-color: #AAD0F1;
background-image: url('');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: #ffffff;
margin: 0;
padding: 40px;
}
#header a {
color: #ffffff;
text-decoration: none;
}
#header h1 {
display: none;
margin: 0px;
padding: 20px;
}
#header h2 {
padding: 0 20px 20px 20px;
}
#wrap {
color: #666666;
padding-right: 230px;
padding-top: 20px;
padding-left: 20px;
}
#content {
margin: 0 0 0 20%;
position: relative;
width: 80%;
float: center;
padding-bottom: 20px;
}
.page-tags #content{
border: 0px solid #739adf;
padding: 10px;
margin-top: 10px;
}
.page-tags #wrap {
margin-left: 20px;
}
.module-section-two {
position: absolute;
top: 260px;
width: 80%;
float: center;
/* 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 {
display: none;
border: solid 0px #fc7f3f;
color: #666666;
background-color: #FAFAFA;
margin-right: 0;
margin-left: 20%;
padding: 10px;
}
.module-section-one li {
display: inline;
list-style: none;
}
.module-section-one ul {
background-color: #AAD0F1;
background-image: url('http://pics.livejournal.com/unamaga/pic/0040dt7s');
background-repeat: no-repeat;
background-position: top center;
color: #ffffff;
margin: 0;
padding-top: 1%;
text-align: center;
}
.module-section-one li a {
text-decoration: none;
padding-top: 2px;
padding-right: 25px;
padding-bottom: 0.5em;
padding-left: 14px;
background-color: transparent;
color: #666666;
}
.module-section-one ul li a:hover, .module-section-one ul li.active a {
background-color: transparent;
color: #000000;
}
.module-section-two a {
color: #73A3CC;
}
.module-section-two .module-header a {
text-decoration: none;
}
.module-section-two h2 {
display: none;
margin: 0;
text-align: center;
margin-bottom: 7px;
font-size: 1.1em;
padding: 0.2em;
background-color: #FAFAFA;
color: #f3f3f3;
border: 0px solid #73A3CC;
}
.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: none;
margin: 20px;
}
.module-userprofile .userpic {
text-align: center;
}
.module-userprofile ul {
margin: 0px;
padding: 10px;
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: 0px;
position: relative;
margin-bottom: 10px;
}
.entry .userpic a, .comment .userpic a {
display: block;
position: absolute;
right: 10px;
top: 10px;
padding: 5px;
}
.entry .userpic img, .comment .userpic img {
border: none;
}
.entry-title, .comment-title {
padding: 15px;
margin: 0;
margin-right: 110px;
}
.entry-title a, .comment-title a {
text-decoration: none;
}
.entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day {
border: solid 0px #739adf;
background-color: #ffffff;
color: #666666;
}
.entry-wrapper-odd .userpic a, .comment-wrapper-odd .userpic a {
background-color: #73A3CC;
border: solid 0px #739adf;
}
.entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title {
border: solid 0px #739adf;
color: #ffffff;
background-color: #AAD0F1;
}
.entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a {
color: #ffffff;
}
a, .entry-wrapper-odd a, .comment-wrapper-odd a {
color: #73A3CC;
}
.entry-wrapper-even .entry, .comment-wrapper-even .comment {
border: solid 0px #fc7f3f;
background-color: #ffffff;
color: #666666;
}
.entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a {
background-color: #73A3CC;
border: solid 0px #fc7f3f;
}
.entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {
border: solid 0px #fc7f3f;
color: #ffffff;
background-color: #AAD0F1;
}
.entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a {
color: #ffffff;
}
.entry-wrapper-even a, .comment-wrapper-even a {
color: #73A3CC;
}
.entry .time, .entry .date {
padding: 0.2em;
display: inline-block;
}
.entry-content, .comment-content {
padding: 10px 115px 20px 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: #AAD0F1;
color: #73A3CC;
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: 0px solid #739adf;
background-color: #ffffff;
color: #000000;
}
.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: solid 0px #739adf;
color: #666666;
background-color: #AAD0F1;
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: solid 0px #739adf;
background-color: #ffffff;
}
.month-wrapper h3 {
padding: 0.2em;
margin: 0;
border: solid 0px #739adf;
color: #666666;
background-color: #AAD0F1;
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 0px #fc7f3f;
}
.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;
}Notes:- Right now, I'm hosting the round navigation image on my livejournal scrapbook, but I can't guarantee I'll have a paid account forever, so if you'd like to host it yourself,
here it is (I promise it's actually there, it's just white! Highlight the space if you need to and you'll see it). Replace the old URL under
.module-section-one ul with yours.
- The two main colors in this layout are #73A3CC (the darker blue of the links and around the userpics) and #AAD0F1 (the main light blue). Your best bet for changing colors is to put the code into Notepad and do a sweeping find & replace with your hex numbers of choice.
- If you add a header image (for example, see
my dw journal), you'll probably have to play with the padding under #header to make it fit.
ETA: In order for the navigation links to fit, you'll have to shorten "Recent Entries" by going to your customization page and finding it under
the Text tab.
ETA2: If anyone wants the userinfo under the userpic on their reading page, add this code to your Custom CSS. It's not perfect, but it can pass:
span.poster {width: 120px; margin-top: 50px; padding: 0; float: right; text-align: center;}Otherwise, there shouldn't be any problems. If you come across a snag, please comment and I'll try to help. :D
![[profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif){kind=small}
