n this tutorial you will learn how to add images to your tab menu.

Results:


Ok let's start off - Go to ACP => Look & Feel => Manage Skins Sets & Templates


Choose a skin that you want to add images to.
Once you've chosen the skin, go to CSS => ipb_style.css
Once you are in ipb_style.css press CTRL+F and type in

#more_apps_menucontent li:hover a, .submenu_container li:hover a { background: #202020; color: #fff; }
Once you find that code - under it paste:

#nav_app_forums a:before{content:"";display:inline-block;margin:-6px 8px -5px 0;background:url(yourimageurl.png) no-repeat top left;width:16px;height:16px;}

If you would like to add images to Members tab or Donate tab add the same code but change the apps name.
Example:

#nav_app_members a:before{content:"";display:inline-block;margin:-6px 8px -5px 0;background:url(yourimageurl.png) no-repeat top left;width:16px;height:16px;}

OR


#nav_app_donate a:before{content:"";display:inline-block;margin:-6px 8px -5px 0;background:url(yourimageurl.png) no-repeat top left;width:16px;height:16px;}


Make sure each tab has it's own separate code stacked.
Example:


#nav_app_members a:before{content:"";display:inline-block;margin:-6px 8px -5px 0;background:url(yourimageurl.png) no-repeat top left;width:16px;height:16px;}#nav_app_forums a:before{content:"";display:inline-block;margin:-6px 8px -5px 0;background:url(yourimageurl.png) no-repeat top left;width:16px;height:16px;}

Save Changes Use Full Editor or Cancel