How to add new or customize existing top header links in Magento?

Question

I want to change the existing top links AND add some new.I need them to be in larger font (not default one) with icons or images before them. I read some tutorials and came to know its done by writing XML but could not find where to write XML and where to add icons and CSS classes for styling. Also tell what else needs to be done apart from adding XML. For reference, see the example image attached with top links outlined in black line that's exactly what I am looking for. Please elaborate your answer as much as possible and mention all steps.

Please see this image for reference

Answer 1

<block type="page/template_links" name="top.links" as="topLinks">
 <action method="addLink" translate="label title">
 <label>Blog</label>
 <url>/blog</url>
 <title>Blog</title>
 <prepare/>
 <urlParams/>
 <position>1</position>
 <liParams>class-name</liParams>
 <aParams></aParams>
 </action>
</block>

place above code in app/design/front/[Your-Package]/[Your-Theme]/layout/local.xml in <default></default> element.

Style it using "class-name"

• Fabian Schmengler: Should be <reference name="top.links"> instead of <block ...> because the block already exists. Otherwise you create a new block and replace the existing one instead of adding the link to the existing one
• Tallal Hassan: Do we also have to add .phtml file for above xml.? Also please tell where to add css class definition.is it in main 'styles.css'?
• Prashant Valanda: No need to add phtml file.Yes in your current theme style.css file

Answer 2

You should create a block in

app/design/frontend/package/theme/newheader/new_header.phtml 

in new_header.phtml you put what you want icones, texts etc...

then in app/design/frontend/package/theme/layout/local.xml and put this:

<reference name="header">
 <block type="core/template" name="new.header" template="newheader/new_header.phtml"/>
</reference>

Answer 3

Top-links are managed in magento through layout xml files.

To add a link to top links, we need to add xml code to layout files

Adding More Links To The Top Links. -

Suppose we need to add a new link to top links, lets say a link for a CMS page called Terms and Conditions.

To do this open a layout file, let say customer.xml and add the below code:

<default>
<reference name="top.links">
 <action method="addLink" translate="label title">
 <label>Terms and Condition</label>
 <url>terms</url>
 <title>Terms and Condition</title>
 <prepare>true</prepare>
 <position>2</position>
 </action>
</reference>
</default>

This code should a new link to top links.

Answer 4

@tbiinfotech this code works

<default><reference name="top.links"><action method="addLink" translate="label title"><label>Terms and Condition</label><url>terms</url>
<title>Terms and Condition</title><prepare>true</prepare>
<position>2</position> </action></reference></default>

How do we add the store ID if we are running a multistore with a common theme?