Explanation tray of sprites

Language:

English

Language:

English

Custom Sprites

To add your own custom sprites involves a few steps:

1.) Add the image to the larger sprites image (for example, tng_icon_sprites.gif, which holds all the public menu icons).

2.) Add a CSS identifier to mytngstyle.css. Here's an example:

#photos-icon {background-position: -342px 0px;}

So your custom entry would look like this:

#mynewsprite-icon {background-position: -555px 0px;}

The first number there is the number of pixels that your new image is removed from the left side of the large image.
The second number here is the vertical displacement (in this case, they're all zero, but this would be important in a vertical row of sprites).

3.) Make sure you use the sprite identifier in the "class" of your image.
For example, creating a new row in one of the dropdown menus would mean calling this function:

$menu .= tngddrow("yourpageurl.php", "mynewsprite-icon", "", "My New Menu Item");

Source: Tng9testers mailing list (Darrin)

Current sprites (v11):

Mobile sprites (v11):

V9-version here
V10-version here

An example with more sprites (v11):

V9-version here
V10-version here

---

---

Add entry to TNG menu

Example for :
for a page "worldmap2.php"

1. genlib.php
insert after

$menu .= tngddrow(getURL( "browserepos", 0 ), "repos-icon", "", $text['repositories']);

this

$menu .= tngddrow(getURL( "worldmap2", 0 ), "worldmap-icon", "", $text['worldmap']);

2. .../templates/templateX/css/mytngstyle.css

#worldmap-icon {background-position: -646px 0px;}

3.1. .../languages/English-UTF8/cust_text.php

$text['worldmap'] = "Worldmap";

3.2. .../languages/German-UTF8/cust_text.php

$text['worldmap'] = "Weltkarte";

4. Refresh your cache, otherwise you may not see your new sprite immediately. See Bypassing_Browser_Cache for how to do this.

Icon Overview

These code you will find in the genstyles.php-file in the 'css' folder.

number = Icon-number

1. #admin-icon {background-position: -19px 0px;}
2. #albums-hdr-icon, #albums-icon {background-position: -38px 0px;}
3. #bookmarks-hdr-icon, #bookmarks-icon {background-position: -57px 0px;}
4. #contact-hdr-icon, #contact-icon {background-position: -76px 0px;}
5. #dates-hdr-icon, #dates-icon {background-position: -95px 0px;}
6. #documents-hdr-icon, #documents-icon {background-position: -114px 0px;}
7. #fsearch-hdr-icon, #fsearch-icon {background-position: -133px 0px;}
8. #help-icon {background-position: -152px 0px;}
9. #histories-hdr-icon, #histories-icon {background-position: -171px 0px;}
10. #home-icon {background-position: -190px 0px;}
11. #headstones-hdr-icon, #headstones-icon, #cemeteries-hdr-icon, #cemeteries-icon {background-position: -209px 0px;}
12. #unlock-icon, #unlock-hdr-icon {background-position: -228px 0px;}
13. #lock-icon {background-position: -247px 0px;}
14. #media-hdr-icon, #media-icon {background-position: -266px 0px;}
15. #surnames-hdr-icon, #surnames-icon {background-position: -285px 0px;}
16. #whatsnew-hdr-icon, #whatsnew-icon {background-position: -304px 0px;}
17. #notes-hdr-icon, #notes-icon {background-position: -323px 0px;}
18. #photos-hdr-icon, #photos-icon {background-position: -342px 0px;}
19. #places-hdr-icon, #places-icon {background-position: -361px 0px;}
20. #recordings-hdr-icon, #recordings-icon {background-position: -380px 0px;}
21. #repos-hdr-icon, #repos-icon {background-position: -399px 0px;}
22. #reports-hdr-icon, #reports-icon {background-position: -418px 0px;}
23. #search-hdr-icon, #search-icon {background-position: -437px 0px;}
24. #sources-hdr-icon, #sources-icon {background-position: -456px 0px;}
25. #stats-hdr-icon, #stats-icon {background-position: -475px 0px;}
26. #videos-hdr-icon, #videos-icon {background-position: -494px 0px;}
27. #mw-hdr-icon, #mw-icon {background-position: -513px 0px;}
28. #trees-hdr-icon, #trees-icon {background-position: -532px 0px;}
29. #calendar-hdr-icon, #calendar-icon {background-position: -551px 0px;}
30. #branches-hdr-icon, #branches-icon {background-position: -570px 0px;}
31. #para-hdr-icon, #para-icon {background-position: -589px 0px;}
32. #heraldry-hdr-icon, #heraldry-icon {background-position: -608px 0px;}
33. #profil-hdr-icon, #profil-icon {background-position: -627px 0px;}
34. #worldmap-hdr-icon, #worldmap-icon {background-position: -646px 0px;}
35. #card-hdr-icon, #card-icon {background-position: -667px 0px;}
36. #famtree-hdr-icon, #famtree-icon {background-position: -686px 0px;}
37. #parishreg-hdr-icon, #parishreg-icon {background-position: -705px 0px;}
38. #memorialcards-hdr-icon, #memorialcards-icon {background-position: -724px 0px;}
39. #temple-hdr-icon, #temple-icon {background-position: -743px 0px;}
40. #anote-hdr-icon, #anote-icon {background-position: -762px 0px;}
41. #faq-hdr-icon, #faq-icon {background-position: -781px 0px;}

• Download: 39 single icons for template 8

Use Custom Menu Hook

With TNG V9, you can also save your site menu in the customconfig.php file. See Custom Menu Hook for documentation on manually coding the entry or using the Site Menu Mod to put your custom site menu in customconfig.php rather than in genlib.php

Related Links

Custom Menu Hook