Explanation tray of sprites

From TNG_Wiki
Jump to: navigation, search

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):
Tng icon sprites.png

Mobile sprites (v11):
Tng mobile sprite.png
V9-version here
V10-version here


An example with more sprites (v11):
Tng icon sprites more.png
V9-version here
V10-version here



Add entry to TNG menu

Example for Tng map.gif:
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.
Tng icon sprites V10 more numbering.png

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;}


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