Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email

Magento Forum

nobody knows how to assign styles only to top links?!! 
Sr. Member
Total Posts:  92
Joined:  2010-03-25

This forum leaves much to be desired .  is the third message I post on the subject .. but only one person answered me . Three days I\’ve been struggling with this issue ... I read the forums, the little existing documentation, and can not find a solution.

I changed the position of the top links by page.xml file:

<block type=\"core/text_list\" name=\"right\" as=\"right\" translate=\"label\">
label>Right Column</label>                
block type=\"page/template_links\" before=\"-\" name=\"top.links\" as=\"topLinks\"/>
But this line of code really calls to links.phtml file, so if I change the style of the top links also change the style of the footer links.
I have done many tests ... I changed the line above with the following:
<block type=\"page/html_top.links\" before=\"-\" name=\"top.links\" template=\"page/html/top.links.phtml\"/>
but nothing, the top links are not published.
I duplicate and rename top.links file, and I\’ve referenced in the file page.xml .....without success ... not published the damn top.links
I duplicate and rename links file, and I\’ve referenced in the file page.xml...nothing…
I tried applying a style directly in the top.links ... nothing happens ... because reviewing the page with Firebug the top links are referenced as links.
I can not think of anything else .
Please ... what I can do? ... I need a solution
Magento Community Magento Community
Magento Community
Magento Community
Jr. Member
Total Posts:  7
Joined:  2010-04-27
Boise, Idaho

If all you are trying to achieve is to apply different styles to the same menu which you have multiple instances of on the same page, in your CSS file you can simply use context based targeting of the menu class name. ID names won’t work for styling multiple copies of a menu since ID names can only be used once on a page.

Here is an example of context based CSS targeting:

#header {}
#right-sidebar {}

So “#header {}” would target only the menu with a class name of “top-links” that is inside of the header div. Then “#right-sidebar {}” would only affect the menu with the name of “top-links” that is located inside the right sidebar.

If you have any styles that are targeting the menu without any context such as: {}

Then those styles are not specifically targeting a particular location such as the header or sidebar so those styles will apply to all instances of the “top-links” menu. So to overcome that just include the containing box id or class name in front of the style declarations for your menu.

Hope that helps!

Magento Community Magento Community
Magento Community
Magento Community
Sr. Member
Total Posts:  92
Joined:  2010-03-25

Thanks Snord, your message was like a light at the end of tunnel.
I think I understood your clear explanation.
The top links I’ve placed in the right column correspond to the class “links” not to the class “top-links”, like the footer links. (I am using the Magento Default theme). In fact the change of position in page.xml file is done by calling the file /template/links.phtml and not the file /html/top.links.phtml, because if we call this last file the links are not even published.
As I am not an expert on style sheets, I have proceeded as follows:
I copied the lines referenced to the top menu links in the header, specifically these:

.header .links { float:rightmargin:0 0 6pxfont-size:11px}
.header .links li { float:leftfont-size:11pxbackground:url(../images/bkg_pipe1.gif10060no-repeatpadding:0 8px 0 7px}
.header .links a { color:#ebbc58; }
And in the Sidebar section I pasted the above lines and I modified like this:
.block .links { float:rightmargin:0 0 6pxfont-size:11px}
.block .links li { float:leftfont-size:11pxbackground:url(../images/bkg_pipe1.gif10060no-repeatpadding:0 8px 0 7px}
.block .links a { color:#ebbc58; }
As you told me this should apply these styles to the module links that position is in the right-sidebar column. I have checked making changes in these styles (font, border, colors, etc ...), but the changes do not apply (the cache is disabled) ...
I made the same test but with the lines of the footer. I have copied in sidebar section:
.footer ul { display:inline}
.footer ul.links { display:block}
.footer li { display:inlinebackground:url(../images/bkg_pipe2.gif10060no-repeatpadding:0 7px 0 4px}
.footer li.last { background:none !importantpadding-right:!important}
, and I changed as follows:
.block ul { display:inline}
.block ul.links { display:block}
.block li { display:inlinebackground:url(../images/bkg_pipe2.gif10060no-repeatpadding:0 7px 0 4px}
.block li.last { background:none !importantpadding-right:!important}

But, if I make chages (the same: color, border, etc), the change are not applied.

What am I doing wrong?

thanks again

Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top