Search Help:  
 
Enter keywords to search help.
Yahoo! Small Business > Yahoo! Small Business Help > Merchant Solutions > Store Editor Help

Changing Navigation Button Appearance

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.

Customizing Button Appearance for Standard and Contents Buttons

To change the appearance of buttons on all standard and Contents (Section, Items) pages:

  1. From the Store Editor, click "Variables" in the Editor toolbar on any page.
  2. Scroll to the "Color and Typefaces" section of the "Variables" page (see figure 1).
  3. Edit one or more of the following fields to customize the button appearance to your liking and then complete steps 4 and 5:
Figure 1: Store Editor Variables page highlighting button color, font and spacing variables.

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 (see figure 2).
Figure 2: Store Editor Variables page and "Choose a Color" window where you can select from web-safe color palette.

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 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 (see figure 2).

Button Font: displays a drop-down menu with over 100 fonts to choose from for your navigation button text.

  • Select a font from the drop-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 (see figure 3).
Figure 3: Side-button style navigation bar with 30 pixels of button padding. Note: The pixels are added to the largest button which in this example is the "Wooden Widgets" section. All other buttons are sized the same as the largest button plus any padding.

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 (see figure 4).
Figure 4: Side-button style navigation bar with 10 pixel button edge width. Note: The spacing is added to the left and right margins of the button but only the top margin for vertical spacing (if side-button is page format) or top and bottom if page format is top-buttons).

Button Edge Color: represents the color appearing behind the navigation bar (sidebar if page format is side-buttons). See figure 6 for an example.

  • 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 (see figure 5).
Figure 5: Store Editor Variables page and "Choose a Color" window where you can select from web-safe color palette.

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.

Figure 6: Home page of sample store with side-button style navigation bar with bright green edge-width color. The color entered in the button-edge-width-color field is applied as a "sidebar" when the page format is set to "side-buttons". When set to top, the button edge-width color appears behind the top navigation bar whose size is determined by the button edge width variable.

Button Style: represents the button styles ranging from "text" to solid or "custom images". See figure 7 for examples of each.

  • 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.
Figure 7: Button styles compared. The "Solid" and "Incised" styles are identical except that the text for the Incised style has a dark shadow underneath giving the text a beveled appearance. The "text" style shows an example where the "button color" field and "edge color" field have the same color value giving the appearance of no buttons—only text.
  1. Click "Update" at the top of the "Variables" page. Your changes should appear.
  2. When ready, click "Publish" in the Editor toolbar to push your changes to your live site.

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.

To change the appearance of standard and Contents buttons on a specific page:

  1. From the Store Editor, navigate to the page on which you wish to change the button appearance.
  2. Click "Edit" in the Editor toolbar.
  3. Click the "Override Variable" button at the top of the page (see A figure 8).
Figure 8: Store Editor Section page edit view with "Override Variable" button called out.

The Override Variable page loads.

4. Select one of the following variables to override from the drop-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
Figure 9: Override Variables page which allows you to select a variable to override. The selected variable override will be added to the page under Custom Properties in the Edit view.

The "Edit" view of the page loads again and the "Nav-buttons" variable override appears in the "Custom Properties" section.

5. Select a color or font, or enter a value for color or spacing depending on the variable selected.
6. Repeat steps 3-5 to add additional variable overrides to customize the appearance of the navigation buttons and click "Update" when complete.
7. When ready, click "Publish" in the Editor toolbar to push your changes to your live site.

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.

To change the appearance of the Home button on all pages:

  1. From the Store Editor, click "Variables" in the Editor toolbar on any page.
  2. Scroll to the "Color and Typefaces" section of the Variables page (see figure 10).
  3. 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 drop-down menu
    • Home-button-font-size: enter a value for the font size in points
Figure 10: Store Editor Variables page Colors and Typefaces section with Home button variables highlighted.

4. Click "Update" at the top of the "Variables" page.
Your changes should appear.
5. When ready, click "Publish" in the Editor toolbar to push your changes to your live site.

See Also

Email this page   Print this page  

Was this article helpful?

Yes   No
Click to contact Customer Care for further assistance.

Top 5 Questions

Related Links