The Property inspector

Introduction

In this tutorial we're going to edit the existing "blue" menu in your website using the template Icons. We assume you've read the previous tutorials. Just click on the Fish Eye Menu in your design view to open the property inspector.

The edited menu

Settings in the Property Inspector

Using the Property Inspector

1. Editing the name
   Although this option is rarely used, you can change the name (that is used to identify the menu) in the Fish Eye Menu field in the property inspector, we leave the name unchanged.
   
   
   
   
2. Changing the Popup Location
   In most cases you might have set your popup on the top side of the screen, this is when the default Popup Loc (bottom) will do, but in some cases you want to set your menu to the bottom of the page. In this case it is wise to set your Popup Loc to top so your images zoom in upward so they won't disappear from the page.
   
   
   
   
   
   Popup Locset to Bottom (note that you need to have some free space below the menu).
   
   Popup Loc set to Top (note that you need to have some free space above the menu).
   
   
   


3. Modifying the Horizontal Alignment
   The Horz Align menu, allows you to set the position of the menu to Center, Left or Right .
   
   
   
   We demonstrate the results in the screenshots below.
   
   
   The menu above is the displays a menu with the Horz Align set to Left
   
   
    
   The menu above is the displays a menu with the Horz Align set to Right
   
    
   The menu above is the displays a menu with the Horz Align set to Center, we choose this value.
   
   
4. Editing the Icon Size
   You can change the Icon Size to set the size of the buttons.
   
   
   
   
   Icon Size set to 40.
   
   
   Icon Size set to 100, we set the Icon Size to this value.
   

5. Changing the Grow To option
   When you set the Grow To option, you'll determine the size of the zoomed Icon.
   
   
   
   Grow To set to 60.
   
   
   Grow To set to 120, we set the Icon Size to this value.
   
   
6. Changing the Padding
   As you can see the Icons have a lot of distance between them, especially since this image contains a little bit of transparent space around it, so let's decrease the padding from ten to three.
   
   
   
   
   Padding set to 10.
   
   Padding set to 3 (the space to the left and right side of the icons has decreased).
   
   
7. Changing the Text Positioning
   You can set the text above or below the icons by using the Text Pos variable.
   
   
   
   
   Text Pos set top Bottom, we use this value.
   
   
   Text Pos set to Top.
   
   
8. Setting the Smoothness
   You can determine how fluent the grow to animation should be by setting the Smoothness option, we'll leave it on High
   
   
   
   
9. Adjusting the Text Color
   Adjust the Text Color to change the color of the text that is displayed above or below the icons. We set the value to green (#006600).
   
   
   
   Text Color set to black (#000000)
   
   
   Text Color set to green (#006600), we use this value.
   
   
10. Setting the Background Height
    You can change the height of the background by setting the Background Height in the property inspector.
    
    
    
    
    Background Height not set.
    
    
    Background Height not set to 60 (the height is slightly higher), we use this value.
    
    
11. Changing the Background Border
    You can change the height of the background by setting the Background Height in the property inspector.
    
    
    
    
    When the Border is not set the background gets a 1px gray border.
    
    
    Border set to 2 (the height is slightly higher), we use this value.
    
    
12. Modifying the Background Border Style
    You can set the Style to set background border style. You can set the it to None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset. Note that we increased the border size sometimes to display the styles more clearly.
    
    
    
    
    Background Border Style set to None.
    
    
    Background Border Style set to Dotted.
    
    
    Background Border Style set to Dashed.
    
    
    Background Border Style set to Solid (we use this style).
    
    
    Background Border Style set to Double.
    
    
    Background Border Style set to Groove.
    
    
    Background Border Style set to Ridge.
    
    
    Background Border Style set to Inset.
    
    
    Background Border Style set to Outset.
    
    
13. Changing the Background Border Color
    You can change the border color of the background with the Color value in the property inspector. We set it to blue (#223C98).
    
    
    
    
    When the Color is not set the background gets a gray border.
    
    
    Color set to blue (#223C98) we use this value.
    
    
14. Changing the Background Background Color
    You can change the color of the background with the BG Color value in the property inspector.
    
    
    
    
    When the BG Color is not set the background gets a gray color, we use this default value.
    
    
    BG Color set to green, we don't use this value as we will use an image for our background.
    
    
15. Changing the Background Image
    You can change the background image in the IMG field.
    
    
    
    
    When the IMG field is not set the background gets a gray color.
    
    
    We choose a background image for the IMG field it is best to make the image as small as possible.
    
    
16. Editing the Icon options in the Fish Eye Menu
    If you wish you can open the fish Eye Menu again by pressing the Icons button in the property inspector.