How to customize the Legacy skin

Contents

• Overview
• Customize Skin Images
• Customize Skin Colors
• Customize Skin Feeds
• Additional Skin Options
• Skin Elements and Locations
• Related Articles

Overview

This is a standard skin, meaning it has a fixed width and will not adjust to device size. This skin does NOT feature all Pressero functionality. This is a design carried over from the first iterations of Pressero hence "Legacy."

The design features a very large logo area that also functions as a banner, 1 navigation area, no sidebar and large product/category images in grid format throughout the site product lists.

Customizations include 32 different colors to customize.

This skin does NOT use any widgets from Pressero admin.

Live Legacy Demo

Customize Skin Images

This skin allows for 2 image changes.

• Header 1000px X 300px

  This large header image functions as a combination of logo and banner. It is advised that you design this banner to feature your logo and any other marketing imagery. The exact width and height must be used here to work best with the design.

  Be careful of the file size for this image. It is recommended that you keep the image file size at or below 100kb.

• Footer 1000px X 35px

  A simple footer image at the bottom of the site right above nav menu 4. The exact width and height must be used here to work best with the design.

Before clicking "Upload Images," make sure to save any changes.

Customize Skin Colors

1. Body Background

   The main background color.

2. General Text

   All basic text throughout the site.

3. General Links

   All basic links in content areas, may not change the links withing navigation areas.

4. General Links Hover

   All basic links hover state in content areas, may not change the hover state of navigation links.

5. Top Nav Links

   The default color of the top navigation links.

6. Top Nav Links Hover

   The default color of the top navigation links hover state.

7. Side Bar Links

   The default links for all sidebar areas including two navigation areas, featured product, Twitter and RSS feeds.

8. Side Bar Links Hover

   The default links hover state for all sidebar areas including two navigation areas, featured product, Twitter and RSS feeds.

9. Footer Links

   The default color of the footer navigation links.

10. Footer Links Hover

    The default color of the footer navigation links hover state.

11. Product Image Borders

    These borders wrap all product and category images within product/category lists in the content area.

12. Product Image Shadows

    The box shadow color behind product and category images.

13. Product and Category Links

    The default color of all product and category links.

14. Product and Category Links Hover

    The default color of all product and category links hover state.

15. Page titles

    All content page title.

16. Major Buttons Background

    All call to action buttons backgrounds throughout the site, such as the "Add to Cart" buttons.

17. Major Buttons Background Hover

    All call to action buttons background hover states throughout the site, such as the "Add to Cart" buttons.

18. Major Buttons Text

    All call to action buttons text colors throughout the site, such as the "Add to Cart" buttons.

19. Central Page Content Background

    Different from the body background this controls the central area background where product/category lists are held along with all other page content.

20. Category and Product Image Background

    The background color of the box wrapping every product and category.

21. Category and Product Wrapper Border

    This controls the border wrapping product/category images, title and other elements within category pages.

22. Login Form Box Background

    The background of the form on the login page.

23. Central Page Content Shadow

    The drop shadow color on either side of the main site container.

24. Top Nav Background

    The main color of the top nav background. There is also an image that overlays this color creating a gradient.

25. Cart Background

    The background behind the cart preview area. Note, that this area also has a 50% opacity set so the logo/banner area will show through.

26. Cart Text and Links

    The text color of the cart preview area.

27. Cart Links Hover

    The link hover color of the cart preview area.

28. Search Background

    The background behind the search input. Note, that this area also has a 50% opacity set so the logo/banner area will show through.

29. Content Area Heading Text

    This color selection is not used within the skin.

30. Headings

    The baisc html heading used throughout the site content areas, such as h1, h2, h3, etc...

31. Main Content Background

    The background of the main content, will be seen within the rich text editor in admin.

32. Customize iFrame Background

    The color of the eDocbuilder iframe background if used for any product.

33. Instructions Background #d9edf7

    The background color for instructions areas provided on multiple pages throughout the site. Instructions are added through admin site settings.

34. Instructions Border #bce8f1

    The border color for instructions areas provided on multiple pages throughout the site. Instructions are added through admin site settings.

35. Instructions Text #31708f

    The text color for instructions areas provided on multiple pages throughout the site. Instructions are added through admin site settings.

Customize Skin Feeds

The feed areas, Twitter and RSS are not used for this skin.

Note: Pressero only supports UTF-8 encoded RSS feeds.

Additional Skin Options

The subscriber logo is not used for this skin.

Skin Elements

Related articles

• Ch. 042 Customizing Default Site Skins