Editing Controls Via Class

[Kr3m1in]

Hello all,

I'm currently dabbling in NAML to try to align my forum's style with the appearance of my organization's website. Long story made short, I'm trying to change the appearance for the forum controls. The goal is to make the link look like more of a button rather than a basic link. Problem is, I have no clue how to give the controls a class that would call my CSS. I feel like I've approached this every single way including wrapping all of the code in a <div>, giving the macro a class, etc. Has anybody customized these controls? How did you do it?

For reference, please go to 552industries.com/forum.php to see our forum and have a look at our NAML.

[Hugo <Nabble>]

The link to the snapshot is broken, so I am not sure I understand which links you want to change. Please fix that link and I will take a look.

[Kr3m1in]

Link is fixed. You know "g-button" class I use on my forum, right? I'm trying to apply the CSS it uses to these controls.

[Hugo <Nabble>]

You need four tweaks to do this. Here is how it should look with the tweaks below.


The first tweak is in the new_topic_action_link. I just added the g-button class to the new_topic_link call (line 6).

<override_macro name="new_topic_action_link" parameters="text, class">
    <div class="[n.action_link_style/]">
        <n.page_node.>
            <n.new_topic_link>
                <class>
                    g-button
                </class>
                <title>
                    <t>Post new message in <t.location.subject/></t>
                </title>
                <text>
                    <img src="/images/icon_post_message.png" class="image16" />
                    <n.default. to="[t]New Topic[/t]"><n.text/></n.default.>
                </text>
            </n.new_topic_link>
        </n.page_node.>
    </div>
</override_macro>

The second tweak is in the topics_action_link macro. I added the g-button class to the node_link call (line 6 again):

<override_macro name="topics_action_link" parameters="only_if_has_subapps" requires="node_page,servlet">
    <n.if.either condition1="[n.is_empty.only_if_has_subapps/]" condition2="[n.page_node.has_subapps/]">
        <then>
            <n.returnable_action_link.>
                <div class="[n.action_link_style/]" style="margin-left:.6em">
                    <n.page_node.node_link href="[n.url template='view_topics'/]" text="[t]Topics View[/t]" class="g-button" />
                </div>
            </n.returnable_action_link.>
        </then>
    </n.if.either>
</override_macro>

The third tweak was in the people_action_link (see line 5):

<override_macro name="people_action_link" requires="node_page">
    <n.if.page_node.has_people_page>
        <then>
            <div class="[n.action_link_style/]" style="margin-left:.6em">
                <n.page_node.people_link class="g-button"/>
            </div>
        </then>
    </n.if.page_node.has_people_page>
</override_macro>

The last tweak was tricky because our dropdown is built with javascript. So I added more javascript code to add the g-button class to the link inside the dropdown (line 8). I also had to move the arrow icon under the link so that it can be displayed inside the button (line 9).

<override_macro name="options_action_menu" requires="node_page">
    <div class="[n.action_link_style/]" style="margin-left:.6em">
        <n.page_node.app_dropdown/>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            var $ddLink = $('#appdropdown > a');
            $ddLink.addClass('g-button');
            $ddLink.append($ddLink.next());
        });
    </script>
</override_macro>

Please let me know if you have questions.

[Kr3m1in]

Ah... My mind was elsewhere I guess. You can get lost in the NAML pretty easily... Thanks for your help, Hugo!