How to add css to login,register and logout link separately? - magento

Question

I am trying to have different css for login register and login links. But as they are being added using template_links block and they are automatically rendered and no template file for specific one, I am unable to achieve this.
<block type="page/template_links" name="account.links" as="accountLinks"/>
At the moment I tried changing the css but obviously css rules are getting assigned to all of it at the same time.
How can I achieve this please suggest something. Thank you
can I do that using layout?
<customer_logged_in>
<reference name="account.links">
<action method="addLink" translate="label title" module="customer"><label>Log Out</label><url helper="customer/getLogoutUrl"/><title>Log Out</title><prepare/><urlParams/><position>2</position></action>
<action method="removeLinkByUrl"><url helper="customer/getRegisterUrl" /></action>
</reference>
</customer_logged_in>
<!--
Load this update on every page when customer is logged out
-->
<customer_logged_out>
<reference name="account.links">
<action method="addLink" translate="label title" module="customer"><label>Login</label><url helper="customer/getLoginUrl"/><title>Login</title><prepare/><urlParams/><position>1</position></action>
<action method="removeLinkByUrl" ifconfig="enterprise_invitation/general/registration_required_invitation"><url helper="customer/getRegisterUrl" /></action>
<!-- <action method="addLink" translate="label title" module="customer"><label>register</label><url helper="customer/getRegisterUrl" /><title>register</title><prepare/><urlParams/><position>100</position><li/><a/><before_text> or </before_text><after_text>.</after_text></action> -->
</reference>
<remove name="wishlist_sidebar"></remove>
<remove name="reorder"></remove>
<remove name="top.menu" />
</customer_logged_out>
<!--
Layout for customer login page
-->
<customer_account_login translate="label">
<label>Customer Account Login Form</label>
<!-- Mage_Customer -->
<remove name="right"/>
<remove name="left"/>
<reference name="head">
<action method="addJs"><script>jquery/jquery.js</script></action>
</reference>
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
<reference name="content">
<block type="customer/form_login" name="customer_form_login" template="customer/form/login.phtml"/>
</reference>
</customer_account_login>
current theme links look like this
------EDIT-----
After placing class in aparam It is still applying same old css rules as in the html showing no class element. I have place the .logout-link class in the same theme in custom and style.css but still no luck. It is not finding this class and not even it is showing in chrome developer tools.
<customer_logged_in>
<reference name="account.links">
<action method="addLink" translate="label title" module="customer">
<label>Log Out</label>
<url helper="customer/getLogoutUrl"/>
<title>Log Out</title>
<prepare/>
<urlParams/>
<position>2</position>
<aParams>class="logout-link"</aParams>
</action>
<action method="removeLinkByUrl"><url helper="customer/getRegisterUrl" /></action>
</reference>
<div class="header-links-wrapper">
<ul class="links">
<li class="first last">Log Out</li>
</ul>
</div>

Answer 1

You can apply a class with the addLink method using the following:
<liParams/>
<aParams>class="My Class Name"</aParams>
<beforeText/>
<afterText/>
So for example, to add a class to your logout link, you can do this:
<action method="addLink" translate="label title" module="customer">
<label>Log Out</label>
<url helper="customer/getLogoutUrl"/>
<title>Log Out</title><prepare/>
<urlParams/>
<position>2</position>
<liParams/>
<aParams>class="logout-link"</aParams>
<beforeText/>
<afterText/>
</action>
Then you just add a css definition for logout-link