Add Icons To The Portal Tabs

Adding Icons to the Portal-Tabs is actually quite easy, you only have to get the hang of it how it is done (well OK, a CSS Guru will tell you this is obvious but it was not for me).

This howto will show also that you can use a little logic in the CSS usind DTML.

Add to your ploneCustom.css:

 #portaltab-index_html a  {
    background: transparent url(&dtml-portal_url;/<dtml-var expr="  portal_actionicons.getActionIcon('portalTabs_actions', 'index_html',None)">) center left no-repeat;    
 }

 #portaltab-news a  {
    background: transparent url(&dtml-portal_url;/<dtml-var expr=" portal_actionicons.getActionIcon('portalTabs_actions', 'news',None)">) center left no-repeat;    
 }

 #portaltab-Members a  {
    background: transparent url(&dtml-portal_url;/<dtml-var expr=" portal_actionicons.getActionIcon('portalTabs_actions', 'Members',None)">) center left no-repeat;   
 }

 #portaltab-complete_login_history a  {
    background: transparent url(&dtml-portal_url;/<dtml-var expr=" portal_actionicons.getActionIcon('portalTabs_actions', 'complete_login_history',None)">) center left no-repeat;
 }

 #portaltab-sitemap a  {
    background: transparent url(&dtml-portal_url;/<dtml-var expr=" portal_actionicons.getActionIcon('portalTabs_actions', 'sitemap',None)">) center left no-repeat;   
 }

Add the Icons you want to display to your portal_actionicons in the ZMI:

portalTabs_actions news News 0 news.png

portalTabs_actions Members Members 0 members.png

portalTabs_actions complete_login_history Login History 0 login.png

portalTabs_actions index_html Home 0 home.png

portalTabs_actions sitemap Sitemap 0 sitemap.png

Thats it. Your Portaltabs will now display your newly defined icons.

If you do not want to use the portalactionicons you can simply hardcode the images in the CSS of course. Just add:

 #portaltab-index_html a  {
    background: transparent url(&dtml-portal_url;/home.png) center left no-repeat;    
 }