dreamwidthlayouts | Layout: Abstractia

Also, if it means anything, I have a 22" monitor, with 1920x1080 resolution.

Nope! That shouldn't affect anything at all. You're just missing part of the updated CSS. Rather than try to track down which part, I want to go through it from the beginning together.

OK, cleared it and saved it. It is now completely empty.

You cleared the theme layer or you cleared the Custom CSS? We wanna do both, just to be safe.

Cleared and saved css, cleared theme layer but didn't compile it; the window is blank though.

And by "clear the theme layer", I guess I mean delete it. But you can just delete everything in it and then not save it, too. (Saving an empty theme layer causes all kinds of scary errors.)

Okay. Step 1: Create the theme layer. Paste THIS into it if you want tags at the top of the entry:

layerinfo "type" = "theme";
layerinfo "name" = "Edited Entry";

function Page::print_entry(Entry e)
"The meat of each new layout. Describes how each page will look. In nearly all cases, the logic and decision-making processes should come from pre-existing functions in core2, and should not get written here. If you limit the structure of the page to HTML, function calls, and attached CSS, then you will be able to pick up all of the enhancements  and accessibility requirements managed by core2."
{
    ## For most styles, this will be overridden by FriendsPage::print_entry and such.
    $e->print_wrapper_start();
    """<div class="header">\n""";
    $e->print_subject();
    $e->print_metatypes();
    $e->print_time();
    """</div>\n""";
    """<div>\n""";
    """<div class="contents">\n""";
    """<div class="inner">\n""";
    $e->print_tags();
    $e->print_poster();
    $e->print_userpic();
    if ($*entry_metadata_position == "top") { $e->print_metadata(); }
    $e->print_text();
    if ($*entry_metadata_position == "bottom") { $e->print_metadata(); }
    """</div>\n""";
    """</div>\n""";
    """</div>\n""";

"""<div class="footer">\n""";
    """<div class="inner">\n""";
    $this->print_entry_footer($e);
    "</div>\n</div>\n";

$e->print_wrapper_end();

}

Compiled with no errors.

(Though I'd really like to have tags and mood together, and I even submitted a request for it to DW; that's why I even started trying to do it in a theme layer. But I'm going to follow you first.)

(JUST mood, or all the metadata?)

If possible, just the mood. But I don't think I'd mind if it was all metadata. Well, maybe except crossposts. But it's just that I want as much control over placement of elements.

:|a Separating out the mood from the rest of the metadata is the tricky part. I have a partially-completed edit of Tabula Rasa that would let you choose where to put all the things and which put tags in with the other metadata to be styled the same way. But getting just the tags and the mood alone is a little wonky. I'll get back to you if I come up with anything!

(deleted comment)

Theme applied; Custom layer Edited Entry.

Step 3: Custom CSS. Paste THIS into the box, being sure to uncheck "use layout stylesheet" if that is checked somehow.

/* Resets */

html, body, div, p, span, h1, h2, h3, h4, h5, h6, img, ul, ol, dl, li, dt, dd, blockquote, pre, form, fieldset, label, input, table, th, td, a {
border: 0;
margin: 0;
padding: 0;
line-height: 150%;
vertical-align: baseline;
}
body {
line-height: 1;
}
ul, ol {
list-style: none;
}

/* General Styles */

html {
height: 100%;
}

body {
background-color: #000000;
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
padding-bottom: 20px;
}

body, form, fieldset, label, input, textarea, table, th, td {
font-size: 9pt;
font-family: verdana, tahoma, sans-serif;
}

input, textarea {
padding: 5px;
}

textarea {
font-family: "courier new", monospace;
}

a {
text-decoration: none;
}

a:hover, a:focus, a:active {
text-decoration: underline;
}

input, textarea,
#canvas #content #secondary .module,
#canvas #content #secondary .module-header,
#canvas #content #primary .entry,
#canvas #content #primary .comment,
body.page-tags #primary .inner,
#canvas #content #primary .entry .header, #canvas #content #comments .comment .header,
#canvas #content #primary .has-userpic .userpic,
body.page-archive #primary table,
body.page-month #primary .month,
body.page-tags #primary .inner .tags-container h2,
#canvas #content #secondary .module-calendar table,
#canvas #content #secondary .module-calendar table th,
#canvas #content #primary .entry .footer,
#canvas #content #comments .comment .footer,
#canvas #content #primary .bottomcomment,
#canvas .topnav li, #canvas .bottomnav li,
body.page-archive #primary table th, body.page-archive #primary table td,
body.page-month #primary dl dt a,
body.page-tags #primary .inner .tags-container .manage-tags-link a,
input, textarea,
#canvas #content #secondary .module,
#canvas #content #secondary .module-header,
#canvas #content #primary .entry,
#canvas #content #primary .comment,
body.page-tags #primary .inner,
#canvas #content #primary .entry .header, #canvas #content #comments .comment .header,
#canvas #content #primary .has-userpic .userpic,
body.page-archive #primary table,
body.page-month #primary .month,
body.page-tags #primary .inner .tags-container h2,
#canvas #content #secondary .module-calendar table,
#canvas #content #secondary .module-calendar table th,
#canvas #content #primary .entry .footer,
#canvas #content #comments .comment .footer,
#canvas #content #primary .bottomcomment,
#canvas .topnav li, #canvas .bottomnav li,
body.page-archive #primary table th, body.page-archive #primary table td,
body.page-month #primary dl dt a,
body.page-tags #primary .inner .tags-container .manage-tags-link a, blockquote {
border: 1px solid;
}

/* Header */

#canvas #header {
margin: 0 29% 0 6%;
margin-bottom: 15px;
}

#canvas #header #title {
font-size: 4em;
opacity: .5;
}

#canvas #header #subtitle {
font-size: 2.5em;
opacity: .2;
}

#canvas #header #pagetitle {
font-size: 2em;
text-align: right;
opacity: .2;
}

#canvas #content #primary, #canvas #content #secondary {
float: left;
}

/* Sidebar */

#canvas #content #secondary {
width: 20%;
min-width: 200px;
margin-left: 2%;
}

#canvas #content #secondary .module {
padding: 10px;
margin-bottom: 20px;
}

#canvas #content #secondary .module-header {
font-size: 1.5em;
font-weight: normal;
padding: 10px;
margin-bottom: 10px;
}

#canvas #content #secondary .module-userprofile .module-content, #canvas #content #secondary .module-syndicate .module-content, #canvas #content #secondary .module-search .module-content {
text-align: center;
}

#canvas #content #secondary .module-userprofile .userlite-interaction-links li {
display: inline;
}

#canvas #content #secondary .module-calendar table {
width: 98%;
margin: 0 auto;
padding: 3px;
}

#canvas #content #secondary .module-calendar table th, #canvas #content #secondary .module-calendar table td {
padding: 1px;
}

#canvas #content #secondary .module-tags_list ul, #canvas #content #secondary .module-pagesummary ul {
list-style-type: square;
list-style-position: inside;
}

#canvas #content #secondary .module-search input.search-box {
width: 50%;
}

#canvas #content #secondary .module-search input.search-button {
margin-left: 10px;
}

/* Content area */

#canvas #content #primary {
width: 65%;
margin-left: 6%;
}

/* Entries and Comments */

#canvas #content #primary .entry, #canvas #content #primary .comment {
padding: 10px;
}

#canvas #content #primary .entry .header, #canvas #content #comments .comment .header {
padding: 15px;
overflow: hidden;
}

#canvas #content #primary .entry .header .entry-title, #canvas #content #comments .comment .header .comment-title {
font-size: 1.85em;
}

#canvas #content #primary .entry .header .datetime, #canvas #content #comments .comment .datetime {
float: left;
clear: both;
font-size: .85em
}

#canvas #content #primary .entry .footer, #canvas #content #comments .comment .footer {
padding: 0 15px;
overflow: hidden;
clear: both;
}

#canvas #content #primary .has-userpic .userpic {
margin-right: 10px;
padding: 10px;
float: left;
clear: both;
}

#canvas #content #primary .entry .entry-poster, #canvas #content #comments .comment .comment-poster {
display: block;
font-size: .85em;
margin: 0 0 1em 0;
clear: both;
}

#canvas #content #primary .entry .metadata ul li {
font-size: .9em;
}

#canvas #content #primary .entry .metadata ul li .metadata-label {
font-weight: bold;
}

#canvas #content #primary .entry .entry-poster img, #canvas #content #comments .comment .comment-poster img {
width: 10px;
height: 10px;
}

#canvas #content #primary .entry .contents, #canvas #content #comments .comment .contents {
margin: 10px auto;
}

#canvas #content #primary .entry .contents a, #canvas #content #comments .comment .contents a {
text-decoration: underline;
}

#canvas #content #primary .entry .entry-content, #canvas #content #comments .comment .comment-content {
min-height: 120px;
}

#canvas #content #primary .entry .entry-content h1, #canvas #content #primary .entry .entry-content h2, #canvas #content #primary .entry .entry-content h3, #canvas #content #primary .entry .entry-content h4, #canvas #content #primary .entry .entry-content h5, #canvas #content #primary .entry .entry-content h6, #canvas #content #primary .entry .entry-content p {
margin: 1em 0 0 0;
}

#canvas #content #primary .entry .entry-content h1:first-child, #canvas #content #primary .entry .entry-content h2:first-child, #canvas #content #primary .entry .entry-content h3:first-child, #canvas #content #primary .entry .entry-content h4:first-child, #canvas #content #primary .entry .entry-content h5:first-child, #canvas #content #primary .entry .entry-content h6:first-child, #canvas #content #primary .entry .entry-content, p:first-child {
margin-top: 0;
}

#canvas #content #primary .entry .entry-content ul, #canvas #content #primary .entry .entry-content ol {
list-style-position: inside;
}

#canvas #content #primary .entry .entry-content ul {
list-style-type: square;
}

#canvas #content #primary .entry .entry-content ol {
list-style-type: decimal;
}

#canvas #content #primary .entry .entry-content blockquote {
width: 80%;
margin: 1em auto;
padding: 10px;
}

#canvas #content #primary .entry .entry-content blockquote p:first-child {
margin-top: 0;
}

#canvas #content #primary .entry .tag, #canvas #content #primary .footer .multiform-checkbox {
width: 80%;
clear: both;
float: left;
}

#canvas #content #primary .footer .multiform-checkbox {
margin-top: 8px;
}

#canvas #content #primary .entry .tag .tag-text {
margin-right: .3em;
float: left;
}

#canvas #content #primary .entry .tag li, #canvas #content #primary .footer li {
display: inline
}

#canvas #content #primary .footer .entry-management-links, #canvas #content #primary .footer .comment-management-links {
padding-left: 0;
float: left;
clear: both;
}

#canvas #content #primary .footer .entry-management-links, #canvas #content #primary .footer .entry-interaction-links, #canvas #content #primary .footer .comment-management-links, #canvas #content #primary .footer .comment-interaction-links {
padding-top: 8px;
padding-bottom: 8px;
}

#canvas #content #primary .footer .entry-management-links li a, #canvas #content #primary .footer .entry-interaction-links li a, #canvas #content #primary .footer .comment-management-links li a, #canvas #content #primary .footer .comment-interaction-links li a {
vertical-align: middle;
}

#canvas #content #primary .footer .entry-interaction-links li, #canvas #content #primary .footer .comment-interaction-links li {
margin-left: .5em;
}

#canvas #content #primary .footer .commentpermalink,
#canvas #content #primary .bottomcomment .entry-interaction-links .entry-readlink {
margin-right: .5em;
}

#canvas #content #primary .footer .entry-interaction-links li.first-item, #canvas #content #primary .footer .comment-interaction-links li.first-item {
margin-left: 0;
}

#canvas #content #primary .footer hr {
display: none;
}

#canvas #content #primary .entry-interaction-links, 
#canvas #content #primary .comment-interaction-links {
float: right;
}
#canvas #content #primary .entry-interaction-links li, 
#canvas #content #primary .comment-interaction-links li, 
#canvas #content #primary .bottomcomment .entry-interaction-links li {
display: inline;
margin: 0;
}

#canvas #content #primary .bottomcomment {
text-align: center;
padding: 15px;
overflow: hidden;
}

#canvas #content #primary .bottomcomment .entry-management-links li {
display: inline;
float: left;
}

#canvas #content #primary .separator-after {
clear: both;
height: 20px;
}

/* Quick Reply */

#ljqrttopcomment {
clear: both;
}

#qrformdiv {
clear: both;
margin: 0 auto;
}

#qrformdiv form input, #qrformdiv form textarea {
margin: 3px;
}

#qrformdiv table tr td {
vertical-align: top;
}

/* Footer */

#canvas #content #tertiary, #canvas #footer .page-top {
margin-left: 6%;
margin-right: 29%;
opacity: .4;
}

#canvas #content #primary .day-date {
font-size: 1.5em;
text-align: right;
margin-bottom: 20px;
opacity: .4;
}

#canvas #content #tertiary {
text-align: center;
clear: both;
}

#canvas #footer .page-top {
font-size: 1.5em;
}

#canvas .topnav, #canvas .bottomnav {
margin-bottom: 20px;
}

#canvas .topnav li, #canvas .bottomnav li {
display: inline;
padding: 10px;
}

#canvas .topnav li.page-separator, #canvas .bottomnav li.page-separator {
display: none;
}

#canvas #content #comments .toppages {
margin-bottom: 1.5em;
}

#canvas #content #comments .bottompages {
margin-top: 1em;
margin-bottom: 1em;
}

/* Archive Page */

body.page-archive #primary .header {
position: relative;
left: -10em;
width: 40%;
margin: 0 auto;
opacity: .4;
}

body.page-archive #primary table {
width: 40%;
margin: 0 auto 10px auto;
border-collapse: separate;
border-spacing: 10px;
}

body.page-archive #primary table caption {
font-size: .90em;
font-style: italic;
margin-bottom: 10px;
opacity: .4;
}

body.page-archive #primary table th, body.page-archive #primary table td {
padding: 5px;
}

body.page-archive #primary table td p {
text-align: right;
}

body.page-archive #primary .footer {
text-align: center;
}

body.page-month #primary .month {
padding: 10px;
}

body.page-month #primary dl dt {
margin: 10px 0;
}

body.page-month #primary dl dt a {
font-size: 1.5em;
padding: 10px;
}

body.page-month #primary dl dd {
margin: 0 0 0 3em;
clear: both;
}

body.page-month #primary .datetime {
font-size: .90em;
margin-right: .5em;
float: left;
}

body.page-month #primary .entry-title {
margin-right: .5em;
float: left;
}

body.page-month #primary .tag {
font-size: .90em;
margin-left: 5.5em;
}

body.page-month #primary .tag .tag-text {
float: left;
margin-right: .3em;
}

body.page-month #primary .tag ul li {
display: inline;
}

body.page-month #primary .bottomnav {
margin-top: 20px;
}

/* Tags Page */

body.page-tags #primary .inner {
padding: 10px;
}

body.page-tags #primary .inner .tags-container h2 {
font-size: 1.85em;
padding: 15px;
}

body.page-tags #primary .inner .tags-container .tags_multilevel {
list-style-type: square;
list-style-position: inside;
margin: 1em 0 0 2em;
}

body.page-tags #primary .inner .tags-container .manage-tags-link {
margin: 1em 0;
text-align: right;
}

body.page-tags #primary .inner .tags-container .manage-tags-link a {
padding: 10px;
}

/* Images & Colors */

(It's already edited for your use)

Unchecked "use layout stylesheet", pasted the css and saved.

Step 4: Color scheme. Pick one and throw it in at the bottom. Save again and let me know if your problem persists!

It worked. :) There are still many things I want to change because I want the layout to look like something between what you did, and wiring's layout. But here's what I want to change now:

I need more padding between the tags and .page-read .poster, .page-network .poster, because right now it's too close to the tags. I presume I'd need o fix its margin and/or padding. Ideally, I want it to be to the right of the userpic, as shown here: http://aidadesigns.dreamwidth.org/read?s2id=665976

I much prefer your entry borders and entry backgrounds, but I want the fonts and link styles of the other Motion edit. I also want their ordered, unordered and definition lists and tables, but your blockquote.

And finally, where exactly did I make mistakes? Because copy/pasting is great, but I'd like to understand what I did wrong so I don't repeat that mistake in my other journals.

In any case, thank you so much for all the patience and hand-holding!

Issue the first: For the padding...

In the CSS, find:

#canvas #content #primary .entry .tag, #canvas #content #primary .footer .multiform-checkbox { width: 80%; clear: both; float: left; } #canvas #content #primary .footer .multiform-checkbox { margin-top: 8px; }

Below it, add:

#canvas #content #primary .entry .tag { margin-bottom: 8px; }

(Adjusting the 8px as needed.)

For the positioning of the ENTRY POSTER...

In the theme layer, find:

$e->print_poster(); $e->print_userpic();

and reverse the order. Save & compile.

In the CSS, find:

#canvas #content #primary .entry .entry-poster, #canvas #content #comments .comment .comment-poster { display: block; font-size: .85em; margin: 0 0 1em 0; clear: both; }

and remove clear: both;. This should do what you want it to; let me know if it doesn't.

If you also want the TAGS to be to the right of the userpic, the steps are similar.

In the theme layer, find:

$e->print_tags(); $e->print_userpic(); $e->print_poster();

and put tags either before or after poster. Save & compile.

In the CSS, find:

#canvas #content #primary .entry .tag, #canvas #content #primary .footer .multiform-checkbox { width: 80%; clear: both; float: left; }

And remove clear: both.

IMPORTANT NOTE: IF YOU WANT THE ENTRY_POSTER TO COME FIRST, LEAVE clear: both ON THE TAGS. IF YOU WANT TAGS TO COME FIRST, LEAVE clear: both ON THE ENTRY_POSTER.

Issue the second: I wish you the best of luck! My CSS should be a little easier to read, but our organization structure doesn't match up. I spread out the lists / definition lists / tables, doing it a little differently in each section but leaving things within entries mostly alone so that users can make their own tables / lists without interference from my theme.

Issue the third: If I could be sure, I would have had you just fix that. But I know you didn't have my tweak to make the tags inline, so I assume we missed each other somehow when I was updating the text on my journal.

It's almost there, but not quite: just removing clear: both throws poster to the right of the entry, adding float: left puts it to the right of the userpic, but pushes the entry text to the right. Any ideas?

I will leave tags where they are at the moment, but it's good to know it's possible if I want to try it later.

As for the lists, can I have them go back to the defaults? You have the style set to square, which I dislike, and I want to be able to nest the lists. I tried them before, but I couldn't get the numbered uppercase and lowercase lists to show up. I'll add them back to my test post for, well, testing.

I also need more space in the tables; right now the table I have here is all squeezed together. Also, it has bullets, which I don't want.

As for the CSS, I must admit I'm more used to having colors together with other selectors, but I understand it makes more sense to keep them separate for a multi-colored theme. I'm just having some trouble finding the fonts and their colors to change.

Yeah, probably just a question of posting at the same time, and missing edits within a fraction of a second. :)

First, for the bullets: Those are there because you have a list inside your table.

This is the source code when I view source:

Additionally, the "spacing" and "padding" declarations aren't going to work. You want "cellspacing" and "cellpadding".

If you look for "square" and just delete the lines that refer to them, it'll go back to bullets. The nesting problem is caused by removing all the padding and margins on them. In the finished version, I won't be "resetting" so many things.

And yeah, sorry for doing the colors that way. I think I'm gonna work it up as a real theme layer now and that should solve a lot of the remaining problems. ♥

Edited 2012-01-15 19:55 (UTC)

(no subject)

aidadesigns - 2012-01-15 20:07 (UTC) - Expand

(no subject)

chiming - 2012-01-15 20:17 (UTC) - Expand

(no subject)

aidadesigns - 2012-01-15 20:30 (UTC) - Expand

sorry i keep doing that orz

chiming - 2012-01-15 20:35 (UTC) - Expand

Re: sorry i keep doing that orz

aidadesigns - 2012-01-15 20:47 (UTC) - Expand

I just noticed you don't have .page-read .poster, .page-network .poster but #canvas #content #primary .entry .entry-poster, #canvas #content #comments .comment .comment-poster and changing margin: 0 0 1em 0; to margin: 1em 0 1em 0; didn't make any difference. Would adding padding change it?

It won't make any difference there, because the tags are coming first. It's one of those things about floats.

Add the margin as a margin-bottom to the #canvas #content #primary .entry .tag declaration and it should work much better!

Actually adding padding: 1em 0 1em 0; to that did work, but I'll take your advice since you have more experience in this than I do.

(no subject)

chiming - 2012-01-15 19:08 (UTC) - Expand

Totally random bug:

#canvas #content #primary .entry .tag, #canvas #content #primary .footer .multiform-checkbox { margin-top: 8px; width: 80%; clear: both; float: left; }

change to

#canvas #content #primary .entry .tag, #canvas #content #primary .footer .multiform-checkbox { margin-top: 8px; width: 98%; clear: both; float: left; }

so that the tags span the full width of the entry!

I mean, I know you are, because I've caused your exact problem. But I've overcome it and you can too!