style_system | Add "back to top" link to Transmogrified with s2 custom theme layer?

marahmarie posting in

Many Dreamwidth s2/Core2 styles have the "back to top" link at the bottom of the Recent Entries view, but Transmogrified doesn't. I had the same problem on LJ, when I used the Bloggish layout with a custom style sheet and theme layer, but I couldn't solve it, not even by modifying s2 Mixit's code to fix the problem, because Bloggish lacked a "back to top" link in the HTML to hook the s2 to.

So my question is kind of two-fold:

Is there any way to get all the proper HTML (including the necessary but missing HTML links and the requisite s2 to make it all work) into Transmogrified, and if so, how?

Because my other problem is I cannot figure out how DW's s2 differs from LJ's version of it. So I would need someone to work out the code for me but hopefully someone who could also explain how s2 differs on DW from LJ's version (or at least point me in the right direction, if there's something I can read on that to make it more clear).

Because the way I figure it, if I can't read (that is, understand) the s2 on DW, I'll never be able to modify or write it. And I want to be able to do both.

Current Mood: confused

Tags:

Flat | Top-Level Comments Only

From:

foxfirefey

Easiest way to fix this probably is to override Transmogrified's Page::print() function in a theme layer:

function Page::print()
{
    """
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>""";
        $this->print_head();
        $this->print_stylesheets();
        $this->print_head_title();    
    println "</head>";
    $this->print_wrapper_start();
    $this->print_control_strip();
    """
            <div id="container">
            <div id="top"></div>
            <div id="header">
    """;
    """
                <a name="top">
    """;
    $this->print_global_title();
    """
                </a>
            </div>
    """;
    $this->print_module_section("one");
    """
            <div id="wrap">
            <div id="content">
    """;
    $this->print_body();
    """
            </div>
    """;
    $this->print_module_section("two");
    """
            </div><div style="clear:both;"></div>
        </div>
        <div id="footer">
    """;
    $this->print_module_section("three");
    """ <div class="top"><a href="#top">Top of Page</a></div>
        </div>
    """;
    $this->print_wrapper_end();
    """
    </html>
    """;
}

You can see the original function here, I only added two lines to it:

* One to add the <div id="top"></div> to make it use #top like the other layouts, above the #header div.
* One to add the <div class="top"><a href="#top">Top of Page</a></div> at the bottom of the footer, so you can style it how you like.

You can, of course, tweak with this--put the code in different places, etc.

Now, I realize you're probably going to need more information than just this, but I'll need to know where to start explaining-- Have you ever made a theme layer before and then used it in a style? If not, that is probably where to start!

From:

matgb

Don't appear to need to [div id="top"] bit, for some reason it's got coded [a name="top"] up there already, so only need to put the bottom link in there.

I can't see why it's not actually there though, very strange to have it in every other style, was transmog the first non tabula layout?

From:

foxfirefey

Ah, thanks!

Yeah, it was. Not sure if I shouldn't add it or if that would be TOO DISRUPTIVE or what.

From:

marahmarie

*laughs*

From:

marahmarie

I have a post pending in

dw_suggestions to do just this for every journal style, BTW.

The heck with DISRUPTIVE. :)

Oh, and I added it to the Suggestions queue just minutes after I wrote the OP these comments are attached to, so don't think it was your comment or anything - it wasn't - I just thought, heck, why not?

Edited (more info) Date: 2010-11-30 06:32 am (UTC)

From:

marahmarie

WORKED. Thank you!

It broke my footer a little but that's just CSS so I can probably fix that, no probs. :)

So here's the thing: I knew Bloggish was missing the top link altogether - so I used exactly the same code you just gave me, more or less (meaning LJ's version of it, with the head HTML and DOC type and all that in it) to fix the problem on LJ once I realized I need to hard-code that top link in.

And still it didn't work. I would have tried more or less the same code you just gave me for my DW but with how different the functions are from LJ's, and with my previous failure on LJ to pull this off at all even knowing the code and functions as well as I did there, I figured I needed help, so thank you very much for jumping in there for me with this code.

Beyond that, Mat's comment below cleared up a lot of this for me - apparently I'm playing around in the wrong Core. If I was using Core1 I could probably figure out much of what I need to know on my own, but apparently, thanks to the rewritten functions for Core2, it's kind of like...I feel like I'm starting all over again, and I don't feel like I know what I'm looking at.

So if I had...almost like a cheat sheet I could look at that says "For function A, write it this way instead, and call it Function A1" I think I could figure a lot of this out, but I need to start there, I think.

From:

matgb

I cannot figure out how DW's s2 differs from LJ's version of it

The S2 itself doesn't differ. The difference is in the basic core layer, which does have substantial changes to it, which overall make it a lot easier to understand, and negate the need to reinvent the wheel regularly, unlike on LJ where so many different layouts do the same thing in differing ways in a confusing manner.

The styles team put a lot of work into making the basics right so we can build on it much easier, I've found learnign S2 on DW a lot easier, so I can now look at LJ code and figure out what it's doing, whereas before 'twas all Greek.

Essentially, in the advanced layer browser, Core1 is LJs S2, Core2 is DWs S2, and reading Core2 with the stuff on the Wiki should get you most of the way.

From:

marahmarie

"Core1 is LJs S2, Core2 is DWs S2..."

I'm glad you said this, since that was the part I wasn't getting. So if Core1 is LJ's s2 I would still be able to read, write and modify DW's code if I used Core1. I'm using Core2 (I was wondering what made it all Greek to me, so now I know... which is a relief).

If I can give you an example, since I still own a copy of my s2 custom theme layer for LJ - here:

On LJ, I did this to make the journal title clickable for the Bloggish style:

### (For the following code, see: http://community.livejournal.com/s2_bloggish/40695.html)

function print_banner(Page p) {container_open("banner");
print safe """<h1 id="banner-header" id="#home">
<a href="http://anti-aol.livejournal.com/" title="Back to the Anti-AOL home page">Anti-Aol.</a></h1>""";
print safe """<h2 id="banner-description">
<a href="http://www.livejournal.com/tools/memories.bml?user=anti_aol&authas=anti_aol" 
title="Click Here For How-tos">$p.global_subtitle</a></h2>
<div id="banner-links">
<a href="http://anti-aol.livejournal.com/87670.html" title="What you need to know - Main FAQ">Leaving AOL</a>
<a href="http://anti-aol.livejournal.com/121369.html" title="How to manage your AOL email after you quit AOL">AOL Email FAQ</a>
<a href="http://anti-aol.livejournal.com/tag/reader%27s%20questions" title="You ask, I answer!">Questions</a>
<a href="http://anti-aol.livejournal.com/tag/reader-submitted%20content" title="My readers tell all">Stories</a>
<a href="http://www.livejournal.com/tools/memories.bml?user=anti_aol&keyword=How%20to&filter=all" title="All the how-tos">How-tos</a>    
</div>""";

close_module(); }

On Dreamwidth, I use this code to do the same thing for the title:

function Page::print_global_title() {
        if ($.global_title) {
                """<h1 id="title">
<span><a href="http://marahmarie.dreamwidth.org/" title="Back to the home page of Everything Else">Everything Else</a></span></h1>""";
        }
}
function FriendsPage::print_global_title() {
        var string title = $.friends_title ? $.friends_title : $.global_title;
        """<h1 id="title"><span><a href='""" + $.base_url + "'>$title</a></span></h1>";
}

function Page::print_head_title() 
{
    if ($this isa FriendsPage) {
        print """<title>""" + $this->view_title() + $*text_default_separator + $.global_title + """</title>n""";
    }
    elseif ($this isa RecentPage) {
        print """<title>""" + $.global_title + $*text_default_separator + $.global_subtitle + """</title>n""";
    }
    else {
        print """<title>""" + $this->view_title() + $*text_default_separator + $.global_title + """</title>n""";
    }
}

But I was not able to come up with DW's version of that mod on my own, since there was too many differences in the code. I thought it was down to "new sort of s2" (which admittedly sort of strained logic, since it's all Perl) - it just never occurred to me it was down to the Cores having major differences.

So what I need to figure out is....OK. In all honesty, I don't know where to start. I've thrown both layers up in tabs to see what I should be doing and intuiting differently, but ....I'm afraid it's too many things...*sigh*

Edited Date: 2010-11-30 06:07 am (UTC)

From:

matgb

See, I could never, ever, get my heqad around what was going on on LJ. And if I ever did, if I switched layout (from, say, Bloggish to Expressive), then you had to start again from scratch as each layout pretty much reinvented the wheel, LJ had a series of different layer engines, each getting semantically better as time went on, but all of them had a very cobbled together feel.

Start with Core2, read it through, the code is fairly good (for example, have a look at the base Tabula Rasa layer and see how little is needed to make a layout work). IF there's stuff that's not commented or clear, that sort of counts as a bug, but may be better solved in the how-tos.

BTB, I don't think you need to include the third function (given that the code looks Very familiar), it doesn't affect the page display.

Effectively, we have got a new sort of S2, but only because they went back to first principles, figured out what the thing could do, and made it much easier to do it. Some of the end results are, unfortunately, stylistic choices I disagree with (like the way header TITLEs are done by default), but they're all easily fixed.

Flat | Top-Level Comments Only

Profile

Dreamwidth style system discussion

April 2025

S	M	T	W	T	F	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Page Summary

Style Credit

Style: Radiant Aqua for Venture by onlyembers

Expand Cut Tags

No cut tags

Page generated Jun. 8th, 2025 01:59 am

Dreamwidth style system discussion

Add "back to top" link to Transmogrified with s2 custom theme layer?

Add "back to top" link to Transmogrified with s2 custom theme layer?

no subject

no subject

no subject

no subject

no subject

Oh my, it...

no subject

no subject

no subject

Profile

April 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags