dreamwidthlayouts | Layout: Abstractia

Is this not what you want it to look like?

That's not what the tags look like on my Recent entries. The word "tags" is on one line, and the tags themselves are on another.

Also, on my reading page the tags are creating a problem with the .page-read .poster, .page-network .poster when placed before $e->print_poster(); and with the entry text when placed after$e->print_userpic();

I would prefer the tags in the entry, and .page-read .poster, .page-network .poster to be left above the userpic. (Or to the right of the userpic - there's another user editing Motion, and when using their preview, this is teh result: http://aidadesigns.dreamwidth.org/read?s2id=665976).

Yeah, I don't suggest you place it after the userpic. That's why I placed it before.

If you want it to look like in that screenshot, though, you need to follow my instructions exactly. I understand that you're trying, but I just did it from scratch with the code I gave you and came up with the screenshot.

Can you clear out all your Custom CSS for me and start from the beginning? I'll do it with you and we'll see if we can get this thing licked. Ready?

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.

(no subject)

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

(no subject)

rainfall - 2012-01-15 19:52 (UTC) - Expand

(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!

(no subject)

aidadesigns - 2012-01-15 19:04 (UTC) - Expand

(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!

no subject

no subject

/shhh you saw nothing /this is my business DW :)

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