Shutterbug Storefront has its own, user-friendly, style-sheet interface to assist you in customizing the color of your galleries.  You can create and save your own, unique color combinations that let you modify the colors of the pages, graphics, borders and text.

While logged in, you go on the menu to "Layout > Create a new style sheet".  Or... to modify an existing style sheets, select "Edit a style sheet".

Each choice lets you select a color to use by either using:

1. The color palette - visually choose a color from the color box.  Or...
2. The hex color field.  In this field you would put the exact hexadecimal color equivalent.  If you wish to know more about using hex colors, click here:  Hex Colors or here: More Hex Color info

We suggest that you start by creating your own, saved style sheet and name it.  Then, using the guides below, go in and make changes on your own.  It is usually best if you make just one change at a time, save it and see the difference, and if you don't like it, it is easy to change it back or change it to something else.

You initially get this "colors" screen:

Clicking on the "fonts" link yields this screen:

Here is what each field means.  Each number has a corresponding visual reference number on the gallery example shown below:

Colors screen:

1) Background
       The overall page color (white in the example below)
2) Background Color 1
        The background color of the gallery / menu bar  (maroon in the example below)
3) Background Color 2
        The 2 lines that surround the top gallery title bar (blue in the example below)
4) Background Color 3
        The top gallery title bar (gray in the example below)
5) Main Frame
        Surrounds the main display area of the page.  Does not display if width is "0" or if it is the same color as the page. Style choices effect how this looks.
6) Frame Show Image
        Is used only on the individual Photo display page.  Is the frame that surrounds the photo on that page. Style choices effect how this looks.
7) Frame Thumbnails
        Is the frame surrounding thumbnails.  Does not display if width is "0"  Style choices effect how this looks.
8) Frame Thumbnails (on mouse-over)
        Is the frame when someone hovers over that thumbnail.  Does not display if width is "0"  Style choices effect how this looks.  If same as #7 (above) then will show no difference.

Fonts screen:

11) Header
        This is the text that indicates the title of the current gallery
12) Header 2
        This is the sub-header text that says either "photos" or "galleries"
13) Menu Text
        In the navigational bar, this is the last menu item that shows the current gallery
14) Menu Links
        In the navigational bar, these are the preceding menu links that show the current gallery's parent gallery links.
15) Regular Text
        All the other regular supporting text on the page (See notes below regarding headers/footers)
16) Links
        These are all the active links on the page, other than the navigational bar.  This would include thumbnail links, page navigation links, etc.
17) Links (on mouse over)
        Same as #16 (above) except this is when the link is being hovered over by a user.

NOTE: Regarding Headers / Footers

Any text typed into the custom header/footer areas will not be effected by the style sheet settings shown here and will require separate HTML customization.

Please note that the generic text color of headers and footers is black and, as such, will not show up if the page background is black.

See notation from #6 (above)... Green border is example of "Frame Show Image" choice: