Note: A new feature in Variables and all Edit pages will let you filter variables by name, making it easier to find them. Learn more.

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.

The Variables in the Colors and Typefaces section regulate the display of page backgrounds, navigation bar buttons, screen text fonts, and display text fonts:

• Background-color and Background-image control the background color and optional image for use as page background.
• Variables such as Text-color, Text-font, and Text-size control the way most screen text looks. Screen text is text that is rendered using fonts (as opposed to images with display text). Emphasis-color controls the color of text used for sales-price and sales-price-text.
• Link-color and Visited-link-color control the color of active and visited links.
• Variables such as Display-color, Display-font, and Display-font-size control the way all display text looks (with the exception of Banner-font-size which controls the size of the Title display-text.. Display text is text that is converted into GIF format images which allows you to use more decorative fonts that a visitor might not have installed on their computer and thus would not display in the correct font.
• Variables such as Button-color, Button-text-color, Button-font, Button-font-size, Button-edge-width, Button-edge-color and Button-padding control the appearance of navigation bar buttons.
• Variables specific to the Home page include Home-button-color, Home-button-text-color, Home-button-font, and Home-button-font-size.
• Label-color, Label-font, and Label-font-size control the color and size of text of specials appearing on the Home page.

 There are two ways to change the color Variables that control page element colors:

• You can type an RGB (Red-Green-Blue) color value in its text box. For instance, 0 0 0 makes the color black, while 255 255 255 makes it white.
• You can click choose a color next to the text box to open a pop-up window with a color palette. When you click a color on the palette, the text box for the color field on the Variables page updates to the correct RGB value, and the pop-up window disappears.

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. To use hexadecimal color values, select hex from the pull-down menu for the Color Code Input field.

Background-color: shows a color swatch of the current background color and allows for entering or selecting the color of the page background.

• Enter an RGB (Red Green Blue) decimal value ( for example 000 000 000 would represent the color black while 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

Background-image: Click Upload to upload an image to appear as the page background. Be careful not to use an image the interferes with visitors being able to easily read your site content.

Text-color: shows a color swatch for screen text and allows for entering or selecting the color of screen text. Screen text is any text rendered with a font (as opposed to images). Defaults to black.

• Enter an RGB (Red Green Blue) decimal value ( for example 000 000 000 would represent the color black while 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

Link-color: shows a color swatch for link text color and allows for entering or selecting the color of active links (links that have not been visited). Default depends on browser: usually blue.

• Enter an RGB (Red Green Blue) decimal value ( for example 000 000 000 would represent the color black while 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

Visited-link-color: shows a color swatch for visited link color and allows for entering or selecting the color of visited links (links that the visitor has already used). Default depends on browser: usually purple.

• Enter an RGB (Red Green Blue) decimal value ( for example 000 000 000 would represent the color black while 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

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 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

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 255 255 255 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. Defaults to Helvetica Bold.

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. Defaults to 11 points.

Button-padding: represents the space between the left and right edges of buttons and the button text in pixels. When page-format set to top-buttons, this affects the total page width. 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 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

Home-button-color: represents the color of the home button in the navigation bar.

• Enter an RGB (Red Green Blue) decimal value ( for example 000 000 000 would represent the color black while 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

Home-button-text-color: represents the color of the home button text in the navigation bar.

• Enter an RGB (Red Green Blue) decimal value ( for example 000 000 000 would represent the color black while 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

Home-button-font: displays a pull-down menu with over 100 fonts to choose from for your home navigation button text. Select a font from the pull-down menu. Defaults to Helvetica Bold.

Home-button-font-size: allows you to set the font size of the home navigation button text. Note a larger font size will make your home navigation button larger as well. Enter a numerical value for the font size of button text. Font value is measured in points. Defaults to 11 points.

Display-text-color: represents the color of the fields that use display text (such as Titles) to generate images.

• Enter an RGB (Red Green Blue) decimal value ( for example 000 000 000 would represent the color black while 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

Display-font: displays a pull-down menu with over 100 fonts to choose from for your display-font used in display-text images (such as those for Titles). Select a font from the pull-down menu. Defaults to Helvetica Bold.

Display-font-size: allows you to set the font size of display-text (with the exception of the Title which is set with the Banner-font-size). Enter a numerical value for the font size of display text (which render images). Font value is measured in points. Defaults to 15 points.

Text-font: allows you to set the font/s used in screen text. Enter the names of fonts separated by commas (for example: arial, helvetica, sans-serif). The visitor's browser will first try to use the font you have specified and if that font is not found on the system, then the next font in the list will be used (if possible). There are a limited number of web-safe fonts - fonts that can be rendered properly by most web browsers regardless of platform.

Text-size: allows you to set the size of screen text. Use the pull-down menu to select a size with 1 representing the smallest size and 7 the largest (3 is normal size).

Label-color: represents the color of text for label images linking to specials from the home page. Defaults to black. For example, if you have an item widget01 that you make a special, then widget01 is rendered as an image on the home page and linked to the item page. The label-color variable controls the color of that image.

• Enter an RGB (Red Green Blue) decimal value ( for example 000 000 000 would represent the color black while 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

Label-font: displays a pull-down menu with over 100 fonts to choose from for your specials. Select a font from the pull-down menu. Defaults to Helvetica Bold. For example, if you have an item widget01 that you make a special, then widget01 is rendered as an image on the home page and linked to the item page. The label-font variable controls the font used to generate that image.

Label-font-size: allows you to set the font size of images used for specials on the home page. For example, if you have an item widget01 that you make a special, then widget01 is rendered as an image on the home page and linked to the item page. The label-font-size variable controls the size of that image.

Banner-font-size: allows you to set the font size used to generate the Title display-text field, if no name-image is supplied. Enter a number to represent the font-size in points of the text. Default depends on the length of the site name.

Emphasis-color: represents the color of emphatic text such as sales price (set at the Item level) and sales-price-text (set in the Store Properties Variables). Defaults to black.

• Enter an RGB (Red Green Blue) decimal value ( for example 000 000 000 would represent the color black while 255 255 255 would represent the color white) or
• Click the choose a color link and select a color from the Color Palette popup window.

See Also:

---

• Variables Overview
• Account variables
• Image Dimension variables
• Page Layout variables
• Button Properties variables
• Page Properties variables
• Store Properties variables
• Custom variables
• Overriding a variable