Moving tags to before entry text

[aidadesigns]

Hello all, I have a question about metadata and tags in Tabula Rasa brought on by trying out a brand new layout called Motion.

I see that someone's already asked about moving tags and mood to the top of the entries in Tabula Rasa, but there were no answers then (this was 2009). I am hoping someone will know the answer now.

I managed to move mood to the top by using the option in the Presentation section of Customize style (Place of metadata in entries = Before entry text), but I can't find how to do the same with tags. Can someone advise me how?

The layout I'm using also had .page-read .poster located below userpic, but it would break the entry text and its background would stretch all the way to the right side of the entry. It is possible to move it up by removing float:left, width:100% properties, but that doesn't align it with the left side of entries, and it overlaps it with mood. Is it possible to flush it all the way to the left, so that it sits above the userpic?

Thank you in advance for any help you can offer.

Comments

[stormy]

As far as moving metadata (mood, music, etc. and not including tags as far as I know). There's an option in Tabula Rasa that's built in on http://www.dreamwidth.org/customize/options under Additional Options. It reads:

Place of metadata in entries:

With the options of: Before Entry Text or After Entry Text

[aidadesigns]

Hi, yes, as I said above, I managed to move mood to the top by using the option in the Presentation section of Customize style (Place of metadata in entries = Before entry text), but I can't find how to do the same with tags.

So I got that fixed, but there are other things I'd like to tweak, such as the .page-read .poster that overlaps with mood and I can't get it aligned with the left side of the entry text (it's floated now). If you check my reading page you will see that it's all borked. I'd like .page-read .poster, mood and tags to all be below entry title (or more precisely, below datetime). Any ideas?

[stormy]

It'll probably have too many variables to do with CSS (problems with alignment, overlapping, etc. if you end up trying to use margins). That's the reason I never moved my own tags in my current layout. Perhaps submit a suggestion to have it added as an option?

[aidadesigns]

Most likely, though I'm willing to experiment a bit with the suggestion branchandroot gave me. I'll also submit a suggestion to have it as an option (dreamwidth.org/support, yes?), thank you!

[rainfall]

For overlaps caused by floats -- I set my metadata and footer blocks to both have clear: left or clear: right (whichever was relevant, so that the entry would have to stretch appropriately and have them below an icon. But some use of clear seems like it would also help you with the overlaps?

[branchandroot]

Moving the tags to the top is /possible/ to do with css, but it would be really kludgy. If you're willing to mess around with S2 layers, it would be a lot surer to actually put the line of code that says "generate tags here" in a different place within the entry-generating function. Not sure if you want to try that?

For .poster, it might actually be easiest to absolutely position it. If you give that container "position: absolute; top: 0; left: 0;" that should slot it in fairly neatly above the userpic. Give .contents "position:relative;" to make sure .poster is contained properly. You might then have to give .metadata a left margin, but I can't say for sure yet how that will stack up once .poster is taken out of the float equation. Currently you have two floated elements plus one unfloated one all stacking up on top of each other.

[aidadesigns]

Sure, I'm willing to give S2 layers a try, if instructed.

I'll try your other suggestion for .poster and see how that will work. Thank you!

[branchandroot]

All right! This page will tell you about what layers are and how to make one. I think the best thing to do would be to make a theme layer as a child of Tabula Rasa. Into that, you should paste:

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();
"""

\n""";
$e->print_subject();
$e->print_metatypes();
$e->print_time();
"""

\n""";
"""

\n""";
"""

\n""";
"""

\n""";
$e->print_userpic();
$e->print_poster();
if ($*entry_metadata_position == "top") { $e->print_metadata(); }
$e->print_text();
if ($*entry_metadata_position == "bottom") { $e->print_metadata(); }
"""

\n""";
"""

\n""";
"""

\n""";

"""

\n""";
"""

\n""";
$e->print_tags();
$this->print_entry_footer($e);
"

\n

\n";

$e->print_wrapper_end();

}


and move the line $e->print_tags(); into the location you want it in. Maybe above or below the metadata "top" line. If you then name the theme something useful and select it as your Tabula Rasa theme, the tags will show up where you want them.

You'll either have to paste the Motion css into the user css box in the Customize section or else add this to your theme layer:

function Page::print_theme_stylesheet () {
"""

""";
}

And paste all the css in between those triple quote lines.

[aidadesigns]

OK, I created a theme layer, and I'm not sure what I did wrong, but everything is not quite right. :) Help?

[branchandroot]

*fiddles some* Huh. It's working for me, so I'm thinking something must be off in the css processing. Make sure your layer is a child of Tabula Rasa, and try replacing what you have with this. This is the layer that's working for me: http://www.dreamwidth.org/customize/advanced/layersource?id=263310. Oh, and make sure you /don't/ uncheck "Use layout's stylesheet(s)".

[aidadesigns]

Right, it just occurred to me that if I created anew theme I should check that box, but it didn't seem to make a difference. Let me see what I get with your layer.


OK, seems to be working. I'll have to edit the width, because this is too narrow for my monitor, and that should be it, hopefully. Thank you for the help!

Oh, before I forget: will I have to paste the entire css into the Edit CSS box or just the sections I want to change? If so, I can save a file with the original css pasted into the layer and add changes into the css box under customizations, and keep track of what I've changed.

[branchandroot]

Yes; whatever alterations you would make to a normal theme, you can make to this one. Width and columns and sidebar modules and so forth.

Once the css is part of the layer, you only need to put things you want to change into the Custom css box. You could also edit the css in the layer, but it's probably safer to put the changes in the Custom css box first to make sure they're what you want!

[aidadesigns]

Thank you so much for all the advice! I'm now slowly going through the changes I had made and putting them back in. I still need help with the sidebar, though, because it's been flushed all the way to the right for me, to the edge of my monitor - any suggestions for that? (I don't know if I should make my layer public?).

[branchandroot]

No problem!

To change the width, what you need to change is this line: "#canvas { width: 60em; }". Try something like "#canvas { width: auto; }" in your custom css. Don't change the width of #content, that will mess with the sidebar the way you're seeing.

You don't need to make the layer public if you don't want; that just means that other people can see it. You might want to keep it public for a little, in case you need more trouble-shooting, though!

[aidadesigns]

"#canvas { width: auto; }" is too much; it takes up the entire width of my monitor (22" widescreen), so I set it to 80% instead. That still leaves me with quite a lot of padding between the entries ad the sidebar. I'm not sure what percentage I should put there.

[branchandroot]

Yeah, it looks like #primary also has a width. You can set #primary to width:auto, too, and that should make everything take up the space it has.

[aidadesigns]

Whoa, that took it way off the page! Changing it to width:10% did the trick, though, and it resizes nicely to a 1024x768 resolution.

[aidadesigns]

And for some reason, the navlinks in the sidebar all have bullets that I'm sure weren't supposed to be there.

[branchandroot]

Yes, I do wonder there have been a few typos between her working copy and the shared copy recently If you add .module ul { list-style: none; } that will fix it.

[aidadesigns]

It did, though the left padding still stayed, and I still can't change the width of the sidebar no matter what I use (em, px, or %). And I just noticed that there's #secondary .module-search .search-box in te css, but I can't set search in the customization area neither in the main module section, nor in the section module section. (And I meant to say 100% instead of 10% above!)

But I need to look into that tomorrow as it's getting quite late in my part of the world. Thank you again, you definitely made all these customizations easier for me.

[rainfall]

Try adding !important to your width declaration -- like this: width: 25em !important;

For the padding, .module ul, .module ul li { padding-left: 0 !important; margin-left: 0 !important; }

That should knock the padding on its ass.

[aidadesigns]

Oh hi, new suggestions! Let me go back to using my layer theme, then, because I'm now back to the original layout with a few minor edits.

[rainfall]

♥ Let me know if it helps!

[aidadesigns]

Extremely weird behavior when I check Use layout's stylesheet(s): sidebar is pushed down, the last entry on the page overlaps second to last, .entry-interaction-links have lost some of their background, .page-read .poster, .page-network .poster have jumped to the upper left corner of the window, and while the padding and margin for .module ul, .module ul li worked, for some reason there's still a disc even though it shouldn't be there (it's only supposed to appear in .contents ul li). Some of this is still true even if I uncheck Use layout's stylesheet(s).

I'm going through the css to see if I deleted a curly bracket or a quote or added something that doesn't belong, but I'm not seeing anything at the moment. A fresh set of eyes to point out what I've missed would be very much appreciated!

[rainfall]

Okay. It's currently up on your journal? Can you link me to what it's supposed to look like and maybe the original (LJ, I assume) code post?

[aidadesigns]

Yes, right now I'm using my theme layer with the css included; I have the Use layout's stylesheet checked and I have no extra css in the Customize css box.

Sure: the layout (a port of a WordPress theme Motion) was originally posted at dreamwidthlayouts, and the original css can be found at penemue's journal. A screencap of the layout is here. I had asked about the layout there as well. branchandroot suggested that this should be converted to one of the official DW themes.

Hope this helps!

[rainfall]

Orrr, looking at your post more clearly... Haha. Okay. NOT LJ. And you already linked it. Give me a sec.

[aidadesigns]

Sure, no problem! Also, if you want to see the issue with the .page-read .poster, checking the reading page of some of the users posting comments in penemue's entry might show you what it does.

[aidadesigns]

This is driving me crazy. Just when I thought I got the sidebar fixed, the entire layout went berserk, and I don't know what I did wrong. I tried going back to the original css, not using the layout style, using it, having css both in the theme layer and css customization box then just in one of them, but nothing looks the way it's supposed to. I'm tempted to delete the layer and start from scratch. I need some help here. :(

[branchandroot]

*rueful* I've just gotten caught up in a big revision of submission guidelines for our official theme/layout comm, dreamscapes, and I won't have enough brain to help for a few days. You might want to make a new post here, and ask for help from someone else. Sorry!

On the bright side, I do have permission from the author to convert this to be an official theme, so it might be available with most of this stuff fixed soonish. The queue for layouts is awfully backed up, though, so don't hold out for that.

[aidadesigns]

No worries; I've switched over from my theme layout to a regular Tabula Rasa layout with modified Motion and will use that for the time being. I totally forgot it's Christmas and people might have other things to do as I'm not Christian and don't celebrate it. Whenever you get around to it is perfectly fine by me. :) It's just good to know these things are possible even though I might not know them yet.

[branchandroot]

Oh, and I just thought! If you use a layer, you can also just put print->poster above the userpic in the layer and not have to mess with the css at all for that

[aidadesigns]

I just tried to get the effect by using css, there's still some overlap, and padding and margin I tried did not seem to work. I'll go read about layers ad try the code you gave me; hopefully that will be a better solution.