Tutorial: How to work with icons and images in Dolphin (for v7.0.x)(some parts may not apply to 7.1.x)

Dolphin image storage has it's own internal logic, but when you first encounter it you may feel as though the images you are looking for are hiding from you. This Tutorial will help you find the images and the ways to edit and replace them. This is only for the actual images and icons on the site. The formatting images (such as backgrounds) aren't included here - you can find these at ​http://www.boonex.com/trac/dolphin/wiki/TutorialHowToFormatImagesAndFonts

INDEX

• Images throughout the site: header and menus
  • Finding the image
  • To replace the logo
  • To edit and replace the top menu icons
  • To edit and replace the member menu icons
  • To edit and replace the submenu icons
• Images on a page-by-page breakdown
  • Front Page
  • Dashboard
  • Profile
  • Members
• Module Icons & Images

Images throughout the site: header and menus

• Finding the image you need to edit or replace:
  • For some images, you can simply right click and view the image info, but for many images in Dolphin this isn't possible. Many images are coded as the background or otherwise coded so that they aren't selectable.
  • The most effective method to find your images is to get Firebug from ​http://getfirebug.com/ and use it. For example, if you want to find out where the Home icon in the top navigation menu resides,
    1. You would right click the home icon and choose the option "Inspect Element"
    2. In the Firebug box that appears with the code, you will see highlighted code that refers to what you are seeking information on - the element you're looking at will highlight as well
    3. If you don't see the image code, you may need to click on the arrow of the section that is highlighted to see the sub-information in order to find the image source
    4. Hover your mouse over the image source code to see a pop up of the original image along with the image dimensions
    5. Click on the image source code to select the actual code itself to highlight it, and copy if needed
  • Image Map - I have found it handy to have an image map that lists all images on the site in order to keep track. For example, if you edit an action block item on one module and want to find all similar action block images used throughout the site, you can just scan through the image map for them or use the find function of your browser to find similarly named items.
    1. I have created a full image map found at ​http://www.boonex.com/trac/dolphin/wiki/DolphinImageMap and ​http://www.boonex.com/trac/dolphin/wiki/DolphinImageMapPage2 (This is from version 7.0.9, check for updated image files/locations for other versions)
    2. To create your own image map, you can download the txt doc here: ​http://www.boonex.com/trac/dolphin/attachment/wiki/TutorialHowToFormatImagesAndFonts/image_map.txt and simply follow the instructions included to insert your site name into the entire document using find & replace. Save as an .html document and upload and you'll have your own map for your site, useful for tracking all changes that you make to images. Or create a new .html document and cut and paste the contents of your edited image_map.txt into the new html doc and save - and you have your own map. (This is from version 7.0.8, check for updated image files/locations for other versions)

• To replace the logo
  • Option 1: The logo is stored here; /media/images/big_logo.png - replace the image by uploading a new image saved as big_logo.png (the default logo is 309x60 but the header will adjust to fit a different size image).
  • Option 2: Admin panel>Settings>Basic Settings>Logo.
    1. Use the upload box to browse your computer for the image to upload as your new logo, it will automatically be placed in the header.
    2. Deselect the "enable resizing" option if your image is sized correctly. Select the "Enable resizing" option and
    3. enter the dimensions to resize. NOTE: It's always better to size your image correctly before you upload it to your server, it will slow down page loads if your server has to resize your images each time before displaying. However, this feature is handy for testing your logo display at various sizes & dimensions before finalizing.
    4. Click the Upload button. Your logo will be stored in /media/images/

• To edit and replace the top menu icons
  • The default Dolphin install has icons only for the a few items, everything else is text. The following are the default locations, to change them you save them by the same file name below and upload them into your custom template folders along the same path as the default: for example: /templates/base/images/icons becomes /templates/your_template/images/icons/ folder (if you aren't using a custom template, you'll need to create one. This prevents problems when you upgrade)
    • The Home icon is found in /templates/base/images/icons/bx_home.png (32x32 resized to 16x16 - evidently dolphin doesn't mind resizing images)
    • The Profile icon is found in /templates/base/images/icons/user.png (16x16)
    • The Mail icon is found in templates/base/images/icons/mails.png (16x16)
    • The "More" icon is found in /templates/base/images/icons/tm_item_more.png (16x16)
    • The search icon is /templates/base/images/icons/tm_item_search.png (16x16)
  • You can leave it that way, or do all icons, or do all text, or any combination of the two. Although you can't have an icon and text for the same menu item - you must choose one or the other.
  • If you want to have images/icons instead of text for your other menu items,
    • Format and save your image according to the top menu conventions:
      • they are 16x16 pixels
      • they are generally named "/tm_item_(name).png"
      • they go into your custom template folders along the same path as listed. For example: /templates/base/images/icons/ becomes /templates/your_template/images/icons/
    • To place the icon on the menu:
      • go to Admin Panel>Builders>Navigation Menu
      • click the top level name of the menu item you want
      • enter the name of your icon into the "Icon:" box.
      • Save Changes.
      • To reorder the menu icons, click the gray-grabber side of the item and drag it to where you want it to go.

• To edit and replace the member menu icons
  • status icons:
    • /templates/base/images/icons/sys_status_away.png 12x12,
    • /templates/base/images/icons/sys_status_busy.png 12x12,
    • /templates/base/images/icons/sys_status_offline.png 12x12,
    • /templates/base/images/icons/sys_status_online.png 12x12
  • status msg: /templates/base/images/icons/status_text.png 16x16
  • mail: /templates/base/images/icons/memeber_menu_mail.png 16x16
  • cart: /modules/boonex/payment/templates/base/images/icons/tbar_item_cart.png 16x16
  • notifications: /modules/boonex/spy/templates/base/images/icons/spy_notify.png 16x16
  • friends: /templates/base/images/icons/memeber_menu_friends.png 16x16
  • profile: /templates/base/images/icons/memeber_menu_profile.png 16x16
  • dashboard: /templates/base/images/icons/memeber_menu_dashboard.png 16x16
  • admin: templates/base/images/icons/member_menu_admin.png 16x16
  • settings: /templates/base/images/icons/memeber_menu_settings.png 16x16
  • logout: /templates/base/images/icons/memeber_menu_logout.png 16x16
• If you want to add or change images/icons in the Member Menu,
  • Format and save your image according to the member menu conventions:
    • they go into your custom template folders following the path as the default: for example /templates/base/images/icons folder becomes /templates/your_template/base/images/icons; and
    • are generally named "/memeber_menu_(name).png" and
    • are 16x16 pixels.
  • Place them in the menu using the Menu Builder.
    • go to Admin Panel>Builders>Member Menu
    • click the top level name and enter the name of your icon into the "Icon:" box.
    • Save Changes.
    • There are two choices on this builder: Top & Top Extra. Top is for the left side of the menu, while top extra is for the right side of the menu.
    • To reorder the menu icons, click the gray-grabber side of the item and drag it to where you want it to go.

• Submenu icons

These are the images in the submenu header on each internal page of the site. They are 32x32 by default, but this is one of the places where the formatting will adjust to the size of your image. As near as I can tell from playing with it, you can go as large as 64x64 with the submenu icons before the formatting of your page body is distorted and pushed down lower. I make no guarantees about that, though, ymmv!

To replace this image, go to Admin panel>Builders>Navigation Menu and click on the name of the top level menu name of the page that you are wanting. Change it in the box labeled "Picture:". Save all changes. If you overwrite existing images through uploads, remember to follow the same path but into your template folder instead of base. For example /templates/base/images/icons/ becomes /templates/your_template/images/icons/.

Here's a page by page breakdown of the various modules that come standard with Dolphin. For any extensions or modules that create new pages, you will follow similar paths to find them via /modules/"module brand"/"module name"/templates/base/images/icons/, just do a little searching.

• Home has no icon in the submenu.
• profile pulls the user avatar resized to 32x32
• about /templates/base/images/icons/bx_n_about_us.png 32x32
• ads /modules/boonex/ads/templates/base/images/icons/bx_ads.png 32x32
• articles /modules/boonex/articles/top_menu_icon.png 32x32
• boards /modules/boonex/board/templates/base/images/icons/bx_boards.png 32x32
• categories /templates/base/images/icons/bx_n_categories.png 32x32
• chat /modules/boonex/chat/templates/base/images/icons/bx_chat.png 32x32
• dashboard /templates/base/images/icons/dashboard.png 32x32
• events /modules/boonex/events/templates/base/images/icons/bx_events.png 32x32
• files /modules/boonex/files/templates/base/images/icons/bx_files.png 32x32
• forums /modules/boonex/forum/templates/base/images/icons/bx_forums.png 32x32
• groups /modules/boonex/groups/templates/base/images/icons/bx_groups.png 32x32
• help /templates/base/images/icons/bx_n_help.png 32x32
• mail /templates/base/images/icons/bx_mymail.png 32x32
• news /modules/boonex/news/templates/base/images/icons/top_menu_icon.png 32x32
• photos /modules/boonex/photos/templates/base/images/icons/bx_pictures.png 64x64
• polls /modules/boonex/poll/templates/base/images/icons/bx_polls.png 32x32
• search /templates/base/images/icons/bx_n_search_comm.png 32x32
• sites /modules/boonex/sites/templates/base/images/icons/bx_sites.png 32x32
• sounds /modules/boonex/sounds/templates/base/images/icons/bx_music.png 32x32
• spy /modules/boonex/spy/templates/base/images/icons/spy.png 32x32
• store /modules/boonex/store/templates/base/images/icons/bx_store.png 32x32
• videos /modules/boonex/videos/templates/base/images/icons/bx_videos.png 32x32

Images on a page-by-page breakdown

• Front Page
  • Rotating Promo Banners
    • These are stored: /media/images/promo/ & /media/images/promo/original/
    • These are 994x262 pixels. This is one of those spots where you want your image to be exactly the right size.
    • To change the promo banners:
      • Admin panel>Settings>Basic Settings>Promo.
      • Use image reloader to upload new banners to appear in the Promo box.
      • You can also delete the ones that you don't want to show here.
      • There is, as you'll see, also a "Use custom HTML block" for further customization.
  • Site Stats Box Images
    • ads: /modules/boonex/ads/templates/base/images/icons/ads.png 16x16
    • blog posts: /modules/boonex/blogs/templates/base/images/icons/blogs.png 16x16
    • files: /modules/boonex/files/templates/base/images/icons/shf.png 16x16
    • discussions: /modules/boonex/forum/templates/base/images/icons/comments.png 16x16
    • photos: /modules/boonex/photos/templates/base/images/icons/phs.png 16x16
    • sounds: /modules/boonex/sounds/templates/base/images/icons/music_beam.png 16x16
    • videos: /modules/boonex/videos/templates/base/images/icons/pvi.png 16x16
    • events: /modules/boonex/events/templates/base/images/icons/events.png 16x16
    • groups: /modules/boonex/groups/templates/base/images/icons/groups.png 16x16
    • sites: /modules/boonex/groups/templates/base/images/icons/sites.png 16x16
    • stores: /modules/boonex/store/templates/base/images/icons/store.png 16x16
    • members: /templates/base/images/icons/mbs.png 16x16
    • members online: /templates/base/images/icons/mbs_online.png 16x16
    • new today: /templates/base/images/icons/mbs.png 16x16
    • this month: /templates/base/images/icons/mbs.png 16x16
    • tags: /templates/base/images/icons/tgs.png 16x16
    • this year: /templates/base/images/icons/mbs.png 16x16
    • polls: /modules/boonex/poll/templates/base/images/icons/pls.png 16x16
  • Download: The app download images, these are set as background images.
    • Desktop: /modules/boonex/desktop/templates/base/images/icons/desktop.png 56x56
    • Iphone App: /templates/base/images/icons/iphone.png 56x56
    • Android App: /templates/base/images/icons/android.png 56x56
    • 

• Dashboard:
  • Avatars
    • Dimensions: 64x64
    • found in the folder: /modules/boonex/avatar/data/images
    • If no avatar is chosen: /templates/base/images/icons/woman_medium.gif 64x64 and /templates/base/images/icons/man_medium.gif (These are also 64x64)
    • default avatars are found in the folder: /modules/boonex/avatar/data/ready (You may add images to this folder, remove images from this folder and/or overwrite the existing images in this folder)
    • Status buttons on avatar are 12x12 and are found here: /templates/base/images/icons/sys_status_online.png and /templates/base/images/icons/sys_status_online.png
  • Gender icons are 16x16 found here: /templates/base/images/icons/female.png and /templates/base/images/icons/male.png
  • Country flags are 18x12 gifs and found in the folder: /media/images/flags/
  • Quick Links Box icons:
    • Ads: /modules/boonex/ads/templates/base/images/icons/bx_ads.png 32x32 resized to 16x16
    • Blogs: /modules/boonex/blogs/templates/base/images/icons/bx_blogs.png 32x32 resized to 16x16
    • Events: /modules/boonex/events/templates/base/images/icons/bx_events.png 32x32 resized to 16x16
    • Files: /modules/boonex/files/templates/base/images/icons/bx_files.png 32x32 resized to 16x16
    • Forums: /modules/boonex/forum/templates/base/images/icons/bx_forums.png 32x32 resized to 16x16
    • Subscriptions: /modules/boonex/forum/templates/base/images/icons/bx_forums.png 32x32 resized to 16x16
    • My Topics: /modules/boonex/forum/templates/base/images/icons/bx_forums.png 32x32 resized to 16x16
    • Search: modules/boonex/forum/templates/base/images/icons/bx_forums.png 32x32 resized to 16x16
    • Groups: /modules/boonex/groups/templates/base/images/icons/bx_groups.png 32x32 resized to 16x16
    • Photos: /boonex/groups/templates/base/images/icons/bx_groups.png 32x32 resized to 16x16
    • Polls: /modules/boonex/poll/templates/base/images/icons/bx_polls.png 32x32 resized to 16x16
    • Sites: modules/boonex/sites/templates/base/images/icons/bx_sites.png 32x32 resized to 16x16
    • Sounds: /modules/boonex/sounds/templates/base/images/icons/bx_music.png 32x32 resized to 16x16
    • Spy: modules/boonex/spy/templates/base/images/icons/spy.png 32x32 resized to 16x16
    • Store: /modules/boonex/store/templates/base/images/icons/bx_store.png 32x32 resized to 16x16
    • Videos: /modules/boonex/videos/templates/base/images/icons/bx_videos.png 32x32 resized to 16x16
  • Mailbox -
    • Inbox -  templates/base/images/icons/mailbox_inbox32.png 32x32
    • Sent -  templates/base/images/icons/mailbox_sent32.png 32x32
    • Write - templates/base/images/icons/mailbox_write32.png 32x32
    • Trash -  templates/base/images/icons/mailbox_trash32.png 32x32
    • Contacts - templates/base/images/icons/mailbox_contacts32.png 32x32
  • My Membership -
    • Standard member badge: /media/images/membership/member.png 110x110
    • Non-member badge: /media/images/membership/non-member.png 110x110
    • Promotion badge: /media/images/membership/promotion.png 110x110
    • Any other memberships you create and upload a badge for will found in this folder: /media/images/membership/

• Profile
  • Avatars
    • Dimensions: 64x64
    • found in the folder: /modules/boonex/avatar/data/images
    • If no avatar is chosen: /templates/base/images/icons/woman_medium.gif 64x64 and /templates/base/images/icons/man_medium.gif 64x64
    • Status buttons on avatar are 12x12 and are found here: /templates/base/images/icons/sys_status_online.png and /templates/base/images/icons/sys_status_online.png
  • Header Privacy Key: /templates/base/images/icons/ps_view_block.png 16x16
  • Action Block:
    • Edit: /templates/base/images/icons/edit.png 16x16
    • Share: /templates/base/images/icons/action_share.png 16x16
    • Subscribe: templates/base/images/icons/action_subscribe.png 16x16
    • Customize: /modules/boonex/profile_customize/templates/base/images/icons/bx_action_customize.png 16x16
  • Country flags: /media/images/flags/ 18x12 gifs

• Members
  • People images: Since these are user-chosen avatars, there should be no reason to edit these, but just f.y.i.
    • user uploaded avatars: /modules/boonex/avatar/data/images/ resized to 64x64
    • No avatar chosen: /templates/base/images/icons/woman_small.gif 32x32 and /templates/base/images/icons/man_small.gif 32x32
    • Status button on avatar: /templates/base/images/icons/sys_status_online.png 12x12 and /templates/base/images/icons/sys_status_online.png 12x12
  • Sex icons: /templates/base/images/icons/female.png 16x16 ands/templates/base/images/icons/male.png 16x16
  • Age icon: /templates/base/images/icons/birthday.png
  • Country flags: /media/images/flags/ 18x12 gifs

Module Icons & Images

The following lists the folders where most of the images for each module are kept, but this is not absolute. There are also instances of cross-use of images, most frequently these will be found in /templates/base/images/icons. To find specific images for each module - I highly recommend firebug for firefox, although occasionally you will be able to right-click to get the image info. VERY occasionally. Remember that if you are going to replace/overwrite an image, they go into your custom template folders along the same path: for example /templates/base/images/icons/ becomes /templates/your_template/images/icons/ folder (if you aren't using a custom template, you'll need to create one. This prevents problems when you upgrade)

In addition, many of the modules w/ images (esp. photos) have settings for controlling how images are displayed in admin panel>Modules>"Module Name".

• Ads Module -
  • /modules/boonex/ads/templates/base/images/icons/
  • /modules/boonex/ads/templates/base/images/simple_tree/
  • Ad category images are found in Admin Panel>Modules>Ads>Manage Categories Form. Select Category Manager on the right. In the pop up box that opens find the Category you're looking for and click "edit" and enter the picture in the box labeled "Picture".
• Articles Module -
  • /boonex/articles/templates/base/images/icons/
• Avatar Module -
  • /modules/boonex/avatar/data/images/
• /modules/boonex/avatar/templates/base/images/icons/

• Blogs Module -
  • /modules/boonex/blogs/templates/base/images/icons/
• Board Module -
  • /modules/boonex/board/templates/base/images/icons/
• Chat Module -
  • /modules/boonex/chat/templates/base/images/icons/
• Data_Migration Module -
  • /modules/boonex/chat/templates/base/images/icons/
• Events Module -
  • /modules/boonex/events/templates/base/images/icons/
• Facebook Connect Module -
  • /modules/boonex/facebook_connect/templates/base/images/icons/
• Feedback Module -
  • /modules/boonex/feedback/templates/base/images/icons/
• Files Module -
  • /modules/boonex/files/templates/base/images/icons/
• Forum Module -
  • /modules/boonex/forum/layout/base/img/
  • /modules/boonex/forum/layout/base_en/img/
  • /modules/boonex/forum/templates/base/images/icons/
• Google Search Module -
  • /modules/boonex/google_search/templates/base/images/icons/
• Groups Module -
  • /modules/boonex/groups/templates/base/images/icons/
• Map Profiles Module -
  • /modules/boonex/map_profiles/templates/base/images/icons/
• Membership Module -
  • /modules/boonex/membership/templates/base/images/icons/
• Messenger Module -
  • /modules/boonex/messenger/templates/base/images/
  • /modules/boonex/messenger/templates/base/images/icons/
• News Module -
  • /modules/boonex/news/templates/base/images/icons/
• Open Social Module -
  • /modules/boonex/open_social/integration/html/images/
  • /modules/boonex/open_social/shindig/javascript/samplecontainer/examples/
  • /modules/boonex/open_social/shindig/php/external/PHPUnit/Util/Report/Template/
• Payment Module -
  • /modules/boonex/payment/templates/base/images/
  • /modules/boonex/payment/templates/base/images/icons/
• Photos Module -
  • /modules/boonex/photos/templates/base/images/icons/
• Poll Module -
  • /modules/boonex/poll/templates/base/images/icons/
• Profile_Customize Module -
  • /modules/boonex/profile_customize/templates/base/images/
  • /modules/boonex/profile_customize/templates/base/images/icons/
  • /modules/boonex/profile_customize/data/images/
• Profiler Module -
  • /modules/boonex/profiler/templates/base/images/icons/
• Shoutbox Module -
  • /modules/boonex/shoutbox/templates/base/images/icons/
• Simple Messenger Module -
  • /modules/boonex/simple_messenger/templates/base/images/icons/
• Sites Module -
  • /modules/boonex/sites/templates/base/images/
  • /modules/boonex/sites/templates/base/images/icons/
• Sounds Module -
  • /modules/boonex/sounds/templates/base/images/icons/
• Spy Module -
  • /modules/boonex/sounds/templates/base/images/icons/
• Store Module -
  • /modules/boonex/store/templates/base/images/
• Videos Module -
  • /modules/boonex/videos/templates/base/images/icons/
• Wall Module -
  • /modules/boonex/wall/templates/base/images/
  • /modules/boonex/wall/templates/base/images/icons/
• For additional modules and extensions that you install, they pretty much follow these same conventions, look for your images in the
  • /module /(designername)/(modname)/templates/base/images/icons/.
• You will also find images for various modules listed in /templates/base/images/icons/. Refer to the Image Map for more details.