dw_styles | So you don't want to have to write your own sidebar code*

* Or header code or footer code....

And who can blame you! Fortunately, Core v2 is here to help :) Yes, you can now get a whole batch of juicy sidebar modules for free along with some EXTREMELY SHINY wizard options to go with them (and then you will bow down and kiss the ground under

afunas feet). The process is simple, assuming you know the basics of what S2 is and what writing your own layout layer involves. If you do and you want to get in on the action, read on and I will explain it herein:

Step 1

What segments do you want? Are you going to stick the userpic in the header and everything else in the sidebar? Then you only need those (obviously). Don't feel obliged to use all of the ones I have. I recommend that you put a "none" option in so that people using the wizard can take out the modules they just don't care about.

Once you've decided that, you need to set the module_layout_sections property in your layout layer

set module_layout_sections = "none|(none)|one|Sidebar|two|Header|three|Footer";

As you can see, my style is going to have a header, a footer and a sidebar. What looks like six entries in this list is actually three pairs of entries. The first part of each pair is the name you're going to use to refer to that bit of your style in your layer code - it'll go in the CSS and things. Don't put spaces or any interesting characters in it. The second one is the friendly name that users using the wizard will see. That can say whatever you like. So for example, my code will use module section one when it wants the sidebar, and users will see Sidebar when selecting it from the wizard.

Step 2

Now you have to decide what's going to go in these segments. You do that by setting the following properties:

set module_userprofile_section = "two"; # the module that contains userpic, name & website set module_navlinks_section = "one"; # module listing the links to Recent, reading, etc. set module_pagesummary_section = "one"; # page summary module set module_tags_section = "one"; # tags module (can be cloud or list) set module_calendar_section = "one"; # calendar showing the current month set module_time_section = "three"; # shows when the page was generated set module_poweredby_section = "three"; # prints out a "powered by dreamwidth" message set module_links_section = "none"; # links list set module_syndicate_section = "none"; # links to your RSS & atom feeds

Step 3

Of course, you may have one view of this (I don't want a links list, for example) but users of your style may have another. How can you get the magical wizardy goodness that the system styles have? Easy! Just include the following:

propgroup modules {
    property use module_userprofile_group;
    property use module_navlinks_group;
    property use module_calendar_group;
    property use module_pagesummary_group;
    property use module_tags_group;
    property use module_links_group;
    property use module_syndicate_group;
    property use module_time_group;
    property use module_poweredby_group;
}

Try to resist the urge to be tyrannical and take away the option to have a link list all together :) Also, make sure you don't put a capital letter for modules when declaring the propgroup as if you do it won't get recognized.

Step 4

Now you're ready to write your style code. Basically, when you get to the spot where you want the HTML for your header to be output, you just stick in

$this->print_module_section("two");

And that magically outputs you lots of lovely HTML all ready for you to class with CSS! So, for example, I might have a Page::print function that looks as follows...

function Page::print () {
    """<html>
            <head>
    """;
    $this->print_head();
    $this->print_stylesheets();
    $this->print_head_title();
    """
            </head>
            <body>
            <div id="content">This is where your page content would go...  Call Page::print_body()</div>
    """;
    $this->print_module_section("two");
    $this->print_module_section("one");
    $this->print_module_section("three");
    """
            </body>
        </html>
    """;
}

I've put my header and my sidebar section underneath the page content because it's always better to do that if you can for accessibility purposes but you are of course welcome to move it around to suit yourself if you're writing a style for personal use. You could even have a left sidebar and a right sidebar if you wanted. That's the beauty of it.

And you're done! I've actually compiled the above code into a layer so that you can see what the output is like (the things I do for you :D). See how the layer source, here is translated into lovely css classed code here

Flat | Top-Level Comments Only

Oh my god, this is fantastic. *gleeeeee* Now I'm not so sorry I dragged my heels on putting my style together, because this is brilliant. :D

Oh, cool! Thanks for writing this up. I was fiddling with the code and wasn't sure why the modules were both numbered and named, but of course it's really useful to be able to group them even further! I see now that my layer has some extra code in that it doesn't need.

Thanks for this explanation! It sounds cool. :) I'll have to do a re-write of my layout at some point...I wrote it way back when S2 first was in beta, and I haven't updated it much since, so the code is way ugly. ;)

A neat organised way to code the page segments. Thanks - this is clearly written and makes sense. (Even with my limited javascript).

My problem is I wouldn't have known how to start on writing this stuff myself.
I know CSS and HTML, but have never got the basics of this stuff from the LJ S2 documentation.
I guess the module_layout_sections property is listed with core properties? And the functions are javascript?

If you want to test out any 'S2 Documentation for Dummys'. I would be a good 'guinea pig'. It's never been clear to me, and I'd really like to get my head round it.

I believe there's going to be some, but I don't think I'm going to be the one writing it. It'll almost certainly get posted here though.

Took a look at Core2 Transmogrified and it was missing three things that I really liked in the original Transmogrified and was assuming would be in the Core2 System styles.

1) A permanent "entry" at the top of the journal page (but not the reading page.) This wasn't a real entry, it didn't have a URL or let one use a cut tag, but I thought it was a little more elegant than a future dated entry and, bonus, it still showed on a tag view.

2) A freetext sidebar module which permitted the use of HTML.

3) Ability to add text to the profile box.

Are any or all of those going to be available in the core2 system styles, or am I going to have to actually learn enough core2 to roll my own?

Edited 2009-04-18 21:21 (UTC)

We will be adding some form of free text in the future (and when we do, it will be available to all layouts), but at the moment the push to open beta means that we're concentrating on porting new layouts / fixing bugs as they are discovered, rather than adding new modules.

I don't know about one and three, but I'm pretty certain there are plans for two. I'll pass it on to

aveleh and see if it's on the list.

In terms of rolling your own, 3 would be fairly easy to do. 1 would be more fiddly.

I'm playing around with Transmogrified which is very pretty but I can't find the "Previous #" and "Next #" links. Am I blind or has browsing backwards and forwards become rather difficult on the main journal and reading pages?

Looks like that was overlooked. We've opened up a bug and will be looking into that ASAP. Thanks!

Doh! I'm pretty sure I know what's causing that - it's a one line fix to take out something that was a workaround I shouldn't have been using and replaced the rest of.

Aha, I was meaning to ask you whether we need that.

draigwen found and fixed, and it's already been committed.

Fantastic. Nope - no need for it at all! I notice the little icons don't show up on the live site - have they been put in live?

OH. I forgot about those. Could you zip them up in the proper directory structure (htdocs/img...) and attach them to zilla? Mark will have to do it, since Transmo is dw-nonfree.

So you don't want to have to write your own sidebar code*

no subject

no subject

no subject

no subject

no subject

Core2 Transmogrified :(

Re: Core2 Transmogrified :(

Re: Core2 Transmogrified :(

no subject

no subject

no subject

no subject

no subject

no subject