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-05-28 06:56 pm (UTC)
tyger: An unidentified person-shape from Detective Conan. Text: LURKER (Lurker)
From: [personal profile] tyger
I'm little more than a newbie myself, but here's what I know:

• the odd/even CSS is for if you want to have entries/comments in alternating colours. It's not necessary at all, but I think it's pretty awesome.

• You'll want a {text-decoration:none} to remove the underline, but I can't find dotted underlines on the W3, though I have seen them around. ^^;; Sorry.

Date: 2010-05-28 07:10 pm (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)
From: [personal profile] adalger
Not just alternating colors; anything can be alternated. You could, for example, have userpics alternate between left-side and right-side.

Date: 2010-05-28 07:36 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
That does sound like an interesting feature. I'll try it out and see how it looks. Thank you!

Date: 2010-05-28 09:11 pm (UTC)
tyger: (KH!)Cid, smirking. Text: ...well damn. (Cid - Well damn)
From: [personal profile] tyger
I hadn't thought about it like that, but that does make sense! :D Shiny!

Date: 2010-05-28 07:15 pm (UTC)
foxfirefey: A fox colored like flame over an ornately framed globe (Default)
From: [personal profile] foxfirefey
I think some people might use a dotted bottom border instead of underlining the text.

Date: 2010-05-28 07:40 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
Thank you!

Date: 2010-05-28 07:40 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
That does sound like it would be an interesting effect.
Thank you for the other piece of code; I knew it was "none" but not what came before it. And I see that the dotted bottom line question was answered in a post below.

Date: 2010-05-28 09:13 pm (UTC)
tyger: FFVII!Yuffie, grinning. Text: Yuffie (Yuffie - :D)
From: [personal profile] tyger
*nods*
95% of what I know comes from the W3 tute site; it's really a pretty handy resource! :D

I wondered if it might be that, but I didn't know, so~ ^^;

Date: 2010-05-28 08:10 pm (UTC)
owl: Stylized barn owl (Default)
From: [personal profile] owl
The dotted underline is actually a border. Something like border-bottom: 1px dotted #000000;

Date: 2010-05-28 08:35 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
Yep, just tried that now, but it's now applied to all the links, and I want to apply it only to entry management links and tags. But now my navigation links are also underlined and lowercase. :( I have to figure out how to separate the two.

Got it, had to apply it only to .entry .footer .inner, .comment .footer .inner
Lowercase fixed too.
Edited Date: 2010-05-28 08:44 pm (UTC)

Date: 2010-05-29 04:33 am (UTC)
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)
From: [personal profile] afuna
entry width:

There's a width set on the .entry, if you just remove 

    .entry {
    width: 690px;
}


then that should make it take up the full space.




multilevel tags:

You'll probably need to target something like:

.module-tags_multilevel > ul.module_list > li (top-level)
.module-tags_multilevel > ul.module_list > li > ul.module_list > li (second-level),
etc

Hmm, I'm not sure where the userpics are supposed to be, or have you fixed them already?

Date: 2010-05-30 10:55 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
Sorry for taking this long to respond, I was away for the weekend and had no net access.

Thank you for the entry and tags suggestions, I'll try them out and see how they go.

As far as icons are concerned, my main issue with them is in the comments. I'd like to push them into the body of the comment, since they're on the outside now and there's a blank space where it seems they're supposed to go. I think I tried changing both the margins and the padding, but ended up with the icons all the way to the left, with their blue background stretching to the right (which was clickable, by the way). (I don't know if I'm making sense in trying to describe this:)

Basically, I'd like to have a simple choice of choosing their location and whether the entry wraps (the customization wizard doesn't have that option), plus basic styling like changing color and border.

ETA the entries are fixed, and I discovered that there was a right margin of 125px in the comment entry subject; now that that's removed, the background is connected to the icon.

I'm afraid I can't figure out exactly how to style the tags. :( Do I put that code all on one line, combine it or...?

All figured out, after hours of trying various permutations.




And what I hope is the final question: is there a way to visually separate the currents from the entry links? I had tried both padding and margins, but no matter what I did it always stays a big blue block. I'd like to have a different background for each and some padding between them.
Edited Date: 2010-05-31 08:27 pm (UTC)

Date: 2010-06-06 09:26 am (UTC)
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)
From: [personal profile] afuna
Oops, my turn to apologize now. Got lost in my inbox.

Anyway, three lines of code for the currents:

.entry .metadata { background-color: #000; } /* for the currents */
.entry .footer .tag { background-color: #fff; } /* for the tag */
.entry .footer .inner { padding-top: 0;} /* to remove a leftover strip of blue in between the tag and the currents*/

Date: 2010-06-06 12:38 pm (UTC)
valiha: watercolor painting of my cat Lola (Default)
From: [personal profile] valiha
That's alright, I wouldn't have been able to do something about it.

I just tried the code, and I think I didn't express myself clearly enough. The effect I was going for was separating the currents and tags (which I think of as belonging to the same group) from the entry management links; I was thinking about having separate backgrounds for the two, or a border or white strip (achieved by padding/margins??) in between if I went with the same color.

Here's an image of what I have right now (I didn't change the black background for the metadata in order to make everything clearly visible:


I guess what I'm trying to do is make it similar to what I have on LJ right now, where the separation is achieved with margins and padding (this post for example has tags, mood, and music, and they're clearly distinct from the entry links).

OK, I just made a new post to see how an entry would look with all the trappings (tags, mood etc.), and I find I want to rearrange all of them. Location, for example, which I almost never use - can I push that to the last position? It's basically 1. tags, 2. mood, 3. music, 4. location. Is this something that has to be done through layers or can it be achieved with css? And, um... :blushes: sorry for piling this up after thinking I'd be done with requests, I'm just a control freak when it comes to things like these, and I don't know enough yet to do it on my own.

ETA1 OH! and can I change the names of the currents, and have just Mood, Music without the word "Current"?

ETA2 And this is an entry from my reading page with only tags and nothing else:


It... bothers me. :(
Edited Date: 2010-06-06 01:48 pm (UTC)

Date: 2010-06-06 02:45 pm (UTC)
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)
From: [personal profile] afuna
Oops, I didn't really mean for that to be used as the CSS on the page *g* just put that out there as examples for which elements to be targetting with padding and margins.

Okay, if you're going to rearrange, then you will need to edit layers *g*

I can give you the code! But before we begin, do you know where to go to edit layers and such? Do you need instructions for that part, or can I just toss code at you and tell you to paste it into your user/theme layer?

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. 5th, 2025 03:25 am
Powered by Dreamwidth Studios