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

The Global Variables appear at the top of the Variables page in the Store Editor. Global Variables allow you to control the look of text (font size, color) link text, and background color throughout your pages. Global Variables include:

• Background-color
• Background-image
• Text-color
• Link-color
• Visited-link-color
• Text-font
• Display-font
• Display-font-size
• Emphasis-color
• Emphasis-color-background
• Global-font-size
• Template-background-color
• Template-background-image
• Page-border-color
• Html-text-color

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, 255 255 255 makes the color black, while 0 0 0 makes it white.
• You can click "choose a color" next to the text box to open a pop-up window with a color palette, as shown in figure 2 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 in the Editor toolbar. To use hexadecimal color values, select "hex" from the drop-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 (see a figure 2).

• 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).

Background-image: Click "Upload" to upload an image to appear as the page background. This image will appear behind the page container and will repeat (tile) vertically and horizontally. You can edit the body rule in the css-base file if you do not wish your background image to repeat.

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. Note: Many text elements have specific variables to control the color of the font such as Specials header and Message header. The text-color variable controls the text color for text that is notset by a specific variable such as product text.

• 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).

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 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).

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 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).

Text-font: Select a font family from the drop-down menu. Use of sans-serif recommended for readability.

The drop-down menu offers the following choices in terms of specific fonts to general (the web browser will look for the first font specified, and move on to the next if not found).

• Arial, Helvetica, sans-serif
• Helvetica, Arial, sans-serif
• Verdana, Tahoma, Helvetica, sans-serif
• Tahoma, Geneva, Verdana, sans-serif
• Century Gothic, Avant Garde, sans-serif
• Arial Black, Arial, sans-serif
• Arial Narrow, Arial, sans-serif
• Trebuchet MS, Verdana, sans-serif
• Bookman, Bookman Old Style, serif
• Garamond, Times New Roman, serif
• Georgia, Times New Roman, Times, serif
• Times New Roman, Georgia, Times, serif
• Palatino Linotype, Book Antiqua, serif
• Andale Mono, Courier New, monospace
• Courier New, Courier, monospace
• Lucida Console, Monaco, Courier, monospace
• Impact, Charcoal, fantasy
• Copperplate Gothic Bold, Capitals, fantasy
• Comic Sans MS, cursive

Display-font: displays a drop-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 drop-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.

Emphasis-color: Enter or choose the color of emphatic text (sales-price) and the add-to-cart button. Note: A contrasting color is recommended so as to stand out from your page design.

Emphasis-color-background: Enter or select a color for the background of emphasis text (appears behind sale-price). Also used as the text color for the standard add to cart button. Note: You should select a color that contrasts with the emphasis-color variable value.

Global-font-size: Enter the size of screen text in pixels. Note: You can also choose other units for text sizes such as ems or points.

Template-background-color: Enter or select a color to appear in the background witin the body of the page.

Template-background-image: Click the "Upload" button to upload an image to appear in the background within the body of the page. This variable is only used for certain pre-designed themes by default:

• theme 01
• theme 02
• theme 06
• theme 08
• theme 09

You can use this variable for any template but you would also need to do the following:

• update your CSS file to call this variable as shown in the code below (learn more)
• edit your CSS to make any content regions transparent so your background image will appear rather than a large block of white background color

You can access the Design Wizard and choose one of the pre-designed themes that use this feature if you wish.

CSS Edit--insert the following line to your css-edits file
#bodycontent {float:right; width:610px; background: url('$Template-background-image') ;}

Page-border-color: Enter or select a color to be used for the border surrounding the page (see A figure 6).

HTML-text-color: Enter or select a color to be used for any text appearing in the HTML-above-left-nav or HTML-below-left-nav (side navigation templates only). Note: If you do not specify a color, the font color for navigation links will be used. You can make other edits to these regions in the css-base file for the #htmltop and #htmlbottom IDs.