How to style custom menu items using CSS?

[feathertail]

Okay ... I can style all the navmenu items using .module-navlinks ul li a, but I'm trying to only style one of them. Like, say, the last one on the right on becomeyourfursona, with the custom1 class, that was added using a custom layer.

I've tried .module-navlinks .custom1 ul li a and various other permutations, including just straight .custom1 a, but none of it works. (It doesn't work on the other, non-custom menu items, either.) Firebug doesn't even show the rules as having been overridden; they just aren't there.

Is this is something I need S2 for -- and if so, where I can find out how to do CSS using S2? Because I remember earlier I tried changing the names of the menu items, and it only worked for "Recent Entries" and didn't work for "Reading." I suspect that menu items that have been modded in some way using a custom layer can't be customized further using the front-end.

Comments

[afuna]

*looks* .custom1 is the class on the link itself, so try something like:

.module-navlinks a.custom1

[feathertail]

Whoo, that worked! Many thanks. Sorry, I'm a CSS noob.

[afuna]

Hey, that's what we're here for *G* Glad I could help.

[feathertail]

Um ... if it's not too much to ask, do you know any way I could make that menu entry appear all the way at the right instead of in line with the other list items?

[afuna]

Hmm. I think it might be better if you moved it out of the module_navlinks section, in that case, and then style it from there (float: right probably)

[feathertail]

Ah, okay ... I'm not actually sure how to do that. I was linked to some S2 code that populated the navlinks menu, and that's what I've been hacking, but I don't know how to add independent elements or where I'd go to look that up.

[afuna]

Oh! Okay, can you show me your layer?

Edit it and add this line:

layerinfo "source_viewable" = 1;

And then give me the link, and I'll take a look.

[feathertail]

Okay, um ... here!

[afuna]

Okay, hmm. Try using this:

function print_module_navlinks() {
    var Page p = get_page();
    open_module("navlinks", "", "");
    var string[] links = [];
    foreach var string k ($p.views_order) {
        var string css = """ class="$k" """;
        if ($p.view == $k) { $css = """ class="current $k" """; }
        $links[size $links] = """<a href="$p.view_url{$k}"$css>"""+lang_viewname($k)+"""</a>""";
    }
    print_module_list($links);

    """<div id='websitelink'><a href=""http://becomeyourfursona.com">Become Your Fursona</a></div>""";

    close_module();
}

And then this in your css:

#websitelink {
float: right;
padding: 0.5em 10px;
line-height: 38px;
}

It's kinda rough, but hopefully gets you started in the right direction!

[feathertail]

It took me a minute, but I figured out that I only needed the line

"""<div id='websitelink'><a href="http://becomeyourfursona.com">Become Your Fursona</a></div>""";

And that it had two ""s after a href= in the original. But I fixed that and worked out the styling, and it works now! Many thanks. ^.^

[afuna]

Oh oops! Glad you figured it out *G*