style_system | S2 customizations and menu styling!

You're viewing

style_system
Create a Dreamwidth Account Learn More

Reload page in style: site light

jewelfox posting in

style_system

A few changes I'd like to make to jewelforge:

Right now the title and subtitle are not displaying at all. I'd like it to display the title and/or subtitle right before "Recent Entries," on the bar where it says that right now. How do I do that? Assume no prior knowledge of S2; I asked questions about this a long time ago on a different account, and forgot how to do it.
How do I put a banner image in between that title bar and the menu? Do I need to add it in a custom layer (or something) or can I like use off-centred CSS?
Is there any way to centre the menu the way that the posts are currently centred?

Thanks in advance!

Current customizations are viewable at https://gitorious.org/atomic-pink/atomic-pink/blobs/master/atomic-pink.css

Edit: Also, while I'm asking, is there any way to put the menu at the very top of everything, a la Anil Dash's site?

Flat | Top-Level Comments Only

From:

momijizukamori

1) Yep! Look for the code blocks for h1#title, and h2#subtitle and h2#pagetitle. Add display:inline to the CSS - should move those up next to each other, though you may have to fiddle with background colors.
(or theoretically you could add an override for those items with the same code)

2) If the layout has a header image option, you should just be able to do this there, though you might have to declare the header as being slightly taller than it actually is. Otherwise, h2#subtitle:after as a selector, with content:url(imageurlhere) might do the trick?

Oh, and as for your edit-question - yes, it's possible. That definitely requires s2 instead of just CSS, though. Again - will write it up after work if nobody else beats me to it :)
3) Theoretically this should be easy. I think there's a float or something in the layout making this less easy. I will poke at it if someone more awake than I am hasn't answered things by the time I get home from work.

Edited Date: 2013-04-12 02:49 pm (UTC)

From:

momijizukamori

And a super belated reply to your edit because Real Life happened and I forgot. I'm not sure what base you're using, but you'd have to make a new layer with the same base, and change Page::print to this:

function Page::print() {
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n<head profile="http://www.w3.org/2006/03/hcard http://purl.org/uF/hAtom/0.1/ http://gmpg.org/xfn/11">\n""";
    $this->print_head();
    $this->print_stylesheets();
    $this->print_head_title();
    """</head>""";
    $this->print_wrapper_start();
    $this->print_control_strip();
    """
    <div id="canvas">
        <div class="inner">
            """;
                    $this->print_module_section("header");
            """
            <div id="header">
                <div class="inner">
                    """;
                    $this->print_module_section("header");
                    $this->print_global_title();
                    $this->print_global_subtitle();
                    $this->print_title();
    """
                </div>
            </div>
            <div id="content">
                <div class="inner">
    """;
                if ($*layout_type == "one-column-split") {
    """
                    <div id="secondary"><div class="inner">
    """;
                        $this->print_module_section("one");
    """
                    </div></div>
    """;
                }
    """
                    <div id="primary"><div class="inner">
                        """;
                        $this->print_body();
    """
                    </div></div>
    """;
                if ($*layout_type != "one-column-split") {
    """
                    <div id="secondary"><div class="inner">
    """;
                        $this->print_module_section("one");
    """
                    </div></div>
    """;
                }
    """
                    <div id="invisible-separator" style="float: left; width: 1px;"></div> 
                    <div id="tertiary"><div class="inner">
                        """;
                        $this->print_module_section("two");
    """
                    </div></div>
                    <div id="content-footer"></div>
                </div>
            </div> 
        </div> 
    """;

"""
    <div id="footer">
        <div class="inner">
            """;
            print safe """
                <div class="page-top"><a href="#">$*text_page_top</a></div>
        </div>
    </div>

</div> 
    """;
    $this->print_wrapper_end();
    """</html>""";
}

That'll print the navlinks above the header container.

Edited (HTML fail) Date: 2013-04-26 12:44 am (UTC)

From:

jewelfox

Super-belated thanks. >_>b I'm sorry.

From:

momijizukamori

No worries!

From:

carene_waterman

To centre the nav menu:

.module-navlinks ul li {
    float: none;
    display: inline-block;
}

and

.module-navlinks ul {
    text-align: center;
}

Also, you already have a header image in this style, but you're causing it not to display in your custom CSS. You'll have to adjust that to get anything you add in options to actually appear on the page.

From:

jewelfox

Very belated thanks. >_>;;

Flat | Top-Level Comments Only

Profile

Dreamwidth style system discussion

January 2026

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	31

Page Summary

Style Credit

Style: Radiant Aqua for Venture by onlyembers

Expand Cut Tags

No cut tags

Page generated Jan. 28th, 2026 04:58 pm

Dreamwidth style system discussion

S2 customizations and menu styling!

S2 customizations and menu styling!

no subject

no subject

no subject

no subject

no subject

no subject

Profile

January 2026

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags