Note: The following page outlines variables that are only found in the 2.0 version of the Store Editor. If you do not see this section of variables, you are using the 3.0 version of Store Editor and can focus on variables specific to Store Editor 3.0.

You can customize many aspects of navigation button appearance including:

• Button color
• Button text color
• Button text size
• Button text font
• Button padding
• Button spacing
• Button style

Most often you will edit button appearance using variables so changes are applied across all pages of your site. You can customize the button appearance of the Home button (linked to your Home page) or use a variable override to customize the appearance of buttons on a specific page. Note, however that since these buttons will be used for navigating your site, you should make their appearance and behavior consistent unless you have a specific reason not to do so.

Jump to:

• Change the appearance of buttons on all standard and Contents (section, item) pages
• Customizing button appearance in a specific page
• Customizing the Home button

Change the appearance of buttons on all standard and Contents (section, item) pages

1. Sign in to your My Services page.
2. Click the Store link.
   
3. Go to Store Editor.
   
4. Click Variables in the Editor toolbar.
   
5. In the Color and Typefaces section, edit one or more of the following fields to customize the button appearance to your liking:
   • Button Color - shows a color swatch of the current button color and allows for entering or selecting the color of standard and Contents buttons.
     • Enter an RGB (Red Green Blue) decimal value (for example 000 000 000 would represent the color black while 256 256 256 would represent the color white) or
     • Click the choose a color link and select a color from the Color Palette popup window.
       Tip: You can choose to use hexadecimal values for color fields. From the Store Editor, click the red arrow in the Editor toolbar to switch to Advanced mode. Next click the Controls button in the Editor toolbar. To use hexadecimal color values, select hex from the pull-down menu for the Color Code Input field.
   • Button Text Color - shows a color swatch of the current button text color and allows for entering or selecting the text color of standard and Contents buttons. Tip: Pick a color that contrasts with the button color so your text is readable.
     • Enter an RGB (Red Green Blue) decimal value (for example 000 000 000 would represent the color black while 256 256 256 would represent the color white) or
     • Click the choose a color link and select a color from the Color Palette popup window.
   • Button Font - displays a pull-down menu with over 100 fonts to choose from for your navigation button text.
     • Select a font from the pull-down menu
   • Button Font Size: allows you to set the font size of navigation button text. Note a larger font size will make your navigation buttons larger as well.
     • Enter a numerical value for the font size of button text. Font value is measured in points.
   • Button Padding - represents the space between the left and right edges of buttons and the button text.
     • Enter a numerical value in the text box to apply that number of pixels as padding within the left and right edges of the button.
   • Button Edge Width - represents the space between the left and right margins of the buttons and the top margin of each button (or top and bottom margin when the page format is set to top-buttons.
     • Enter a numerical value in the text box to apply that number of pixels as padding within the left and right edges of the button.
   • Button Edge Color - represents the color appearing behind the navigation bar (sidebar if page format is side-buttons). 
     • Enter an RGB (Red Green Blue) decimal value (for example 000 000 000 would represent the color black while 256 256 256 would represent the color white) or;
     • Click the choose a color link and select a color from the Color Palette popup window.
       Tip: You can choose to use hexadecimal values for color fields. From the Store Editor, click the red arrow in the Editor toolbar to switch to Advanced mode. Next click the Controls button in the Editor toolbar. To use hexadecimal color values, select hex from the drop-down menu for the Color Code Input field.
   • Button Style - represents the button styles ranging from text to solid or custom images.
     • Text - consists of only text with no button background
     • Solid - creates a beveled button with text on top
     • Incised - creates a beveled button with beveled text on top
     • Icon - uses custom images that you upload in the Variables page for standard buttons (Home, Information, Show Order, Privacy Policy, etc..) or on the Section or Item page for Contents. Select when using custom button images.
6. Click Update at the top of the Variables page. Your changes should appear.
   
7. Publish when ready. Note: Making changes in Variables will require a full publish. Learn more.
   

Customizing button appearance in a specific page

You can edit the appearance of buttons on a specific page by using variable overrides. This is not recommended as good web design dictates that navigation remains consistent across all pages of a site but you may have a reason to customize the menu on a specific page.

1. Sign in to your My Services page.
2. Click the Store link.
   
3. Go to Store Editor.
   
4. Navigate to the page on which you wish to change the button appearance.
5. Click Edit in the Editor toolbar.
   
6. Click the Override Variable button at the top of the page.
   
7. In the Override Variable dialog, select one of the following variables to override from the pull-down menu and click Update.
   • Button-color
   • Button-edge-color
   • Button-edge-width
   • Button-font
   • Button-font-size
   • Button-padding
   • Button-style
   • Button-text-color
     
8. In the Custom Properties section, select a color or font, or enter a value for color or spacing depending on the variable selected.
   
9. Click Update when complete.
   
10. Publish when ready.
    

Customizing the Home button

You can customize the appearance of the Home button so it has a different color, font, font size, and font color.

1. Sign in to your My Services page.
2. Click the Store link.
   
3. Go to Store Editor.
   
4. Click Variables in the Editor toolbar.
   
5. In the Color and Typefaces section, edit one or more of the following variables:
   • Home-button-color - Enter an RGB value or click choose a color to pick a color.
   • Home-button-text-color - Enter an RGB value or click choose a color to pick a color.
   • Home-button-font - Select one of over 100 different font styles from the pull-down menu
   • Home-button-size - Enter a value for the font size in points
6. Click Update at the top of the Variables page. Your changes should appear.
   
7. Publish when ready. Note: Making changes in Variables will require a full publish. Learn more.
   

See Also:

• Using custom button images
• Changing navigation button order
• Removing navigation buttons
• Editing button text
• Changing navigation bar position
• Removing the Yahoo Shopping logo