dreamwidthlayouts | Layout: Abstractia

I'm not seeing any change with the tags. I made sure to change #canvas #content #primary .entry .tag but nothing happens. :(

No, I mean, grab my CSS from the original source.

You need to go back to the entry and re-get the initial CSS and re-tweak it. Then it will work! It's working now on my journal.

Additionally, you could also easily have the tags be in the header, underneath the date?

I actually moved the tags after userpic, but it's still creating problems with the entry text.

In the header? I presume in the theme layer? What would I need to change?

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!

Layout: Abstractia

no subject

no subject

no subject

no subject

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)

(no subject)

sorry i keep doing that orz

Re: sorry i keep doing that orz

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

no subject