Transmogrified layout customization

May. 28th, 2010 07:00 pm
valiha: watercolor painting of my cat Lola (Default)
[personal profile] valiha posting in [community profile] style_system
Hello, I was hoping you'd be able to help me customize this layout further since the layout maker wasn't able to help. Once it's done, the layout will be changed significantly. I'm having trouble figuring some things out.

- There's a blank space to the right of the entries and I can't find out what's causing it. I changed the body background color so that it can be seen better.
Photobucket

- I originally thought I would need to change the width of the entries, and the maker suggested changing the following piece of code:

#content {
margin: 0 0;
position: relative;
width: 80%;
float: right;
padding-bottom: 20px;
}

from 80% to 100%, but that pushes the entries to the right and sidebar down. Entries are also narrower on the comment pages and I would like to at least reduce the size of the comments. I'm viewing this on my laptop and 1280x768 resolution, but would like the layout to work on a 1024x768 and 1289x1024 resolutions as well.

- The original css has even and odd entry and comment wrapper etc; are these necessary or redundant??

- I'd like to be able to style the multilevel tags which are not styled in the css, but was unable to find the proper ids/classes; it might be I just don't know where to search.

- Userpics don't look quite as intended in the original, which doesn't have Previous/Next links; since I do, they overlap and I had to lower them down. They really bother me, especially in the comments! I'd much rather have them inside the upper right corner.

- And I'd like to remove the underline for entry management links, as well as tags (both in entries and sidebar, but have a dotted underline for links in actual entries.

Original CSS:

Customized:

And you're probably thinking, Demanding, isn't she?
  • Current Mood: frustrated
Tags:
  • Add Memory
  • Share This Entry
Flat | Top-Level Comments Only

Date: 2010-06-06 03:27 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
No, I knew I was going to get the black background, I just wanted to see how everything would look because it was hard to visualize with the same color for everything. Web developer helped, but it only lasts while I hover my cursor over the elements. I didn't get to play with padding/margins because of several interruptions and decided to leave that for later.

I did edit my layer twice, I think, following instructions in porting an LJ style, and the second time to try out something from [site community profile] dw_styles. If I remember correctly, I need to go to http://www.dreamwidth.org/customize/advanced/layers (I've got the Advanced Customization page open in another tab). So, once I edit the layer, will I need to make the css modifications there, or would I be able to use the css customization box for further edits? My previous experience with layers was copy, paste and leave as is, but I'll be happy to learn more.

Date: 2010-06-06 03:38 pm (UTC)
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)
From: [personal profile] afuna
Okay, that sounds cool then!

This is the code to reorder your currents/tags. It moves the tags text out of the entry footer, and to above the other metadata. (That means that the previous sample CSS I gave you will no longer work, btw *g*)

You'll need to make sure to create a new theme layer and add it to your style (if you use an existing wizard layer, the changes will be lost when you next use /customize/options). Just copy and paste it in:


## reorder metadata and tags in 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_userpic();
    $e->print_poster();
    if ($*entry_metadata_position == "top") { $e->print_tags(); $e->print_metadata(); }
    $e->print_text();
    if ($*entry_metadata_position == "bottom") { $e->print_tags(); $e->print_metadata(); }
    """</div>\n""";
    """</div>\n""";
    """</div>\n""";
    """<div class="footer">\n""";
    """<div class="inner">\n""";
    $e->print_management_links();
    if ($this isa EntryPage) {
        """<hr class="above-entry-interaction-links" />""";
        $e->print_interaction_links("topcomment");
        $this->print_reply_container({ "target" => "topcomment" });
        """<hr class="below-reply-container" />""";
    }
    else {
        $e->print_interaction_links();
    }
    "</div>\n</div>\n";
    $e->print_wrapper_end();

}

function Entry::print_metadata() {
    if (size $.metadata) {
        var string position = ($*entry_metadata_position == "top") ? " top-metadata" : " bottom-metadata";
        """<div class="metadata$position">\n<ul>\n""";
        foreach var string m (["music", "mood", "groups", "xpost", "location"]) {
            if ($.metadata{$m} == "") { continue; }

            var string metadata_name = lang_metadata_title($m);
            """<li><span class="metadata-label metadata-label-$m">$metadata_name: </span>""";
            if ($m == "mood") {
                " $.mood_icon ";
            }
            """<span class="metadata-item metadata-item-$m">$.metadata{$m}</span></li>\n""";
        }
        "</ul>\n</div>\n";
    }
}



To edit the text, go here:
http://www.dreamwidth.org/customize/options?group=text

Click on the "Entry" header; that will open up, and you'll see the "Current Music/Mood/Location"



To add some spacing, use this CSS (you can put it where you usually do *g*) (Note that this adds some space, even if there's no metadata on the entry)
.entry .footer { margin-top: 1em; }

To style the entry metadata and tags, for color and stuff, start with this code:

.entry .tags { /* stuff goes here */}
.entry .metadata { /* stuff goes here*/}

And let me know if you run into any other issues!

Date: 2010-06-06 04:21 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
OK, so I need to go to Create a layout-specific layer, for Theme choose Type, and for Layout choose Transmogrified? (And I'll re-read the instructions first to remind myself.) Will editing the layer remove the customization that's currently pasted into the css box?

Date: 2010-06-06 04:24 pm (UTC)
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)
From: [personal profile] afuna
Yup, that's how to create a theme layer.

That won't remove the stuff in the CSS box (those are all saved in a wizard layer -- which you shouldn't ever need to touch )

Date: 2010-06-06 04:30 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
It's done, but I have an error:

S2 Compiler Output at Sun Jun 6 16:28:58 2010
Error compiling layer:

Compile error: line 22, column 9: Unknown property
S2::NodeVarRef, S2/NodeVarRef.pm, 171
S2::NodeTerm, S2/NodeTerm.pm, 174
S2::NodeTerm, S2/NodeTerm.pm, 66
S2::NodeEqExpr, S2/NodeEqExpr.pm, 49
S2::NodeExpr, S2/NodeExpr.pm, 46
S2::NodeIfStmt, S2/NodeIfStmt.pm, 79
S2::NodeStmtBlock, S2/NodeStmtBlock.pm, 108
S2::NodeFunction, S2/NodeFunction.pm, 230
S2::Checker, S2/Checker.pm, 374
S2::Compiler, S2/Compiler.pm, 34


Context

18: """
\n""";
19: """
\n""";
20: $e->print_userpic();
21: $e->print_poster();
22: if ($*entry_metadata_position == "top") { $e->print_tags(); $e->print_metadata(); }
23: $e->print_text();
24: if ($*entry_metadata_position == "bottom") { $e->print_tags(); $e->print_metadata(); }
25: """
\n""";
26: """
\n""";

Date: 2010-06-06 04:33 pm (UTC)
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)
From: [personal profile] afuna
Oh dear, hmmm. Oh *yeah* that's new code! Sorry about that, you just got a glimpse of the future >_>

Remove this line:
if ($*entry_metadata_position == "top") { $e->print_tags(); $e->print_metadata(); }


Change this line:
if ($*entry_metadata_position == "bottom") { $e->print_tags(); $e->print_metadata(); }

to:


$e->print_tags();
$e->print_metadata();

Date: 2010-06-06 04:38 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
Corrected that, but there's another one now:

S2 Compiler Output at Sun Jun 6 16:36:28 2010
Error compiling layer:

Compile error: line 47, column 32: Unknown property
S2::NodeVarRef, S2/NodeVarRef.pm, 171
S2::NodeTerm, S2/NodeTerm.pm, 174
S2::NodeTerm, S2/NodeTerm.pm, 66
S2::NodeEqExpr, S2/NodeEqExpr.pm, 49
S2::NodeExpr, S2/NodeExpr.pm, 46
S2::NodeTerm, S2/NodeTerm.pm, 85
S2::NodeTerm, S2/NodeTerm.pm, 66
S2::NodeCondExpr, S2/NodeCondExpr.pm, 50
S2::NodeExpr, S2/NodeExpr.pm, 46
S2::NodeVarDeclStmt, S2/NodeVarDeclStmt.pm, 54
S2::NodeStmtBlock, S2/NodeStmtBlock.pm, 108
S2::NodeIfStmt, S2/NodeIfStmt.pm, 92
S2::NodeStmtBlock, S2/NodeStmtBlock.pm, 108
S2::NodeFunction, S2/NodeFunction.pm, 230
S2::Checker, S2/Checker.pm, 374
S2::Compiler, S2/Compiler.pm, 34


Context

43: }
44:
45: function Entry::print_metadata() {
46: if (size $.metadata) {
47: var string position = ($*entry_metadata_position == "top") ? " top-metadata" : " bottom-metadata";
48: """
\n
    \n""";
    49: foreach var string m (["music", "mood", "groups", "xpost", "location"]) {
    50: if ($.metadata{$m} == "") { continue; }
    51:

Date: 2010-06-06 04:40 pm (UTC)
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)
From: [personal profile] afuna
pesky variable!

Okay, I think this should catch it:

var string position = ($*entry_metadata_position == "top") ? " top-metadata" : " bottom-metadata";

Then look for somewhere where it says "metadata$position" and change that to just "metadata".

Date: 2010-06-06 05:14 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
Yay, it now compiled with no errors! And I'm sorry for all the trouble! I'll go play on my own now and see what I can do. Thank you so much for all the help!

Gosh, I went to do all the customizations and left this open without posting. :facepalm: In any case, I am extremely pleased with the result. ♥ I would really like to learn all this, but it's a challenge finding enough time to sleep right now. You guys aren't going anywhere, right?

Date: 2010-06-06 05:15 pm (UTC)
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)
From: [personal profile] afuna
Nope! We'll be right here! Have fun, and you're welcome *g*
  • Add Memory
  • Share This Entry
Flat | Top-Level Comments Only

Profile

Dreamwidth style system discussion

April 2025

S M T W T F S
  12345
6 78910 1112
13 141516171819
2021 2223242526
27282930   

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags

No cut tags
Page generated Jun. 9th, 2025 12:36 am
Powered by Dreamwidth Studios