How to customize the Super Hero skin

Contents

Overview

This is a responsive skin, meaning it has percentage widths and will adjust to device size. This skin features all Pressero functionality that can be customized through the admin interface, including an "account bar" at the top of the site and 87 different colors to customize.

The design features 4 navigation areas, a customizable rotating home page banner, a left sidebar and large product images throughout the site.

Live Super Hero Demo

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. Primary Background

    Background color for areas in skin labeled as primary, mainly the headers in the sidebar.

  6. Primary Text

    Text color for areas in skin labeled as primary, mainly the headers in the sidebar.

  7. Primary Border

    Border color for areas in skin labeled as primary, mainly the headers in the sidebar.

  8. Primary Button Background

    Background color for all primary buttons such as "Add to cart," "Save" and "Login" buttons.

  9. Primary Button Text

    Text color for all primary buttons such as "Add to cart," "Save" and "Login" buttons.

  10. Primary Button Border

    Border color for all primary buttons such as "Add to cart," "Save" and "Login" buttons.

  11. Primary Button Hover Background

    Background hover color for all primary buttons such as "Add to cart," "Save" and "Login" buttons.

  12. Primary Button Hover Text

    Text hover color for all primary buttons such as "Add to cart," "Save" and "Login" buttons.

  13. Primary Button Hover Border

    Border hover color for all primary buttons such as "Add to cart," "Save" and "Login" buttons.

  14. Secondary Background

    Background color for areas in skin labeled as secondary, mainly the headers in the sidebar.

  15. Secondary Text

    Text color for areas in skin labeled as secondary, mainly the headers in the sidebar.

  16. Secondary Border

    Border color for areas in skin labeled as secondary, mainly the headers in the sidebar.

  17. Secondary Button Background

    Background color for all buttons with secondary css (btn-secondary). Not currently used on this skin.

  18. Secondary Button Text

    Text color for all buttons with secondary css (btn-secondary). Not currently used on this skin.

  19. Secondary Button Border

    Border color for all buttons with secondary css (btn-secondary). Not currently used on this skin.

  20. Secondary Button Hover Background

    Background hover color for all buttons with secondary css (btn-secondary). Not currently used on this skin.

  21. Secondary Button Hover Text

    Text hover color for all buttons with secondary css (btn-secondary). Not currently used on this skin.

  22. Secondary Button Hover Border

    Border hover color for all buttons with secondary css (btn-secondary). Not currently used on this skin.

  23. Default Button Background

    Background color for all secondary buttons such as the cart button in header, edit buttons, and back to catalog.

  24. Default Button Text

    Text color for all secondary buttons such as the cart button in header, edit buttons, and back to catalog.

  25. Default Button Border

    Border color for all secondary buttons such as the cart button in header, edit buttons, and back to catalog.

  26. Default Button Hover Background

    Background hover color for all secondary buttons such as the cart button in header, edit buttons, and back to catalog.

  27. Default Button Hover Text

    Text hover color for all secondary buttons such as the cart button in header, edit buttons, and back to catalog.

  28. Default Button Hover Border

    Border hover color for all secondary buttons such as the cart button in header, edit buttons, and back to catalog.

  29. Muted Background

    Used on the checkout page for the billing, credit card and promo information.

  30. Muted Text

    Used in the calculator "per piece" price, calculator file upload heading and calculator job name heading.

  31. Muted Border

    Used on the checkout page for the billing, credit card and promo information.

  32. Info Background

    Use for instruction and information prompts throughout site.

  33. Info Text

    Use for instruction and information prompts throughout site.

  34. Info Border

    Use for instruction and information prompts throughout site.

  35. Account Bar Link

    Links for the top account bar.

  36. Account Bar Link Hover

    Links hover for the top account bar.

  37. Account Bar Dropdown Background

    Used in the drop down on the account bar only shown on small screens.

  38. Account Bar Dropdown Border

    Used in the drop down on the account bar only shown on small screens.

  39. Vertical Nav Background

    Used in the sidebar navigation areas.

  40. Vertical Nav Border

    Used in the sidebar navigation areas.

  41. Vertical Nav Text

    Used in the sidebar navigation areas.

  42. Vertical Nav Text Hover

    Used in the sidebar navigation areas.

  43. Vertical Nav Bg Hover

    Used in the sidebar navigation areas.

  44. Danger Background

    Use for all alerts with (alert-danger) css selector. By default these alerts are red.

  45. Danger Text

    Use for all alerts with (alert-danger) css selector. By default these alerts are red.

  46. Danger Border

    Use for all alerts with (alert-danger) css selector. By default these alerts are red.

  47. Success Background

    Use for all alerts with (alert-success) css selector. By default these alerts are green.

  48. Success Text

    Use for all alerts with (alert-success) css selector. By default these alerts are green.

  49. Success Border

    Use for all alerts with (alert-success) css selector. By default these alerts are green.

  50. Danger Button Background

    Use for all buttons with (btn-danger) css selector. Used for all buttons that will delete data.

  51. Danger Button Text

    Use for all buttons with (btn-danger) css selector. Used for all buttons that will delete data.

  52. Danger Button Border

    Use for all buttons with (btn-danger) css selector. Used for all buttons that will delete data.

  53. Danger Button Hover Background

    Use for all buttons with (btn-danger) css selector. Used for all buttons that will delete data.

  54. Danger Button Hover Text

    Use for all buttons with (btn-danger) css selector. Used for all buttons that will delete data.

  55. Danger Button Hover Border

    Use for all buttons with (btn-danger) css selector. Used for all buttons that will delete data.

  56. Warning Background

    Use for all alerts with (alert-warning) css selector. By default these alerts are yellow.

  57. Warning Text

    Use for all alerts with (alert-warning) css selector. By default these alerts are yellow.

  58. Warning Border

    Use for all alerts with (alert-warning) css selector. By default these alerts are yellow.

  59. Top Nav Background

    Main background color for the top nav, navigation menu 1.

  60. Top Nav Link

    Main link color for the top nav, navigation menu 1.

  61. Top Nav Border

    Main border color for the top nav, navigation menu 1.

  62. Top Nav Link Hover

    Main link hover color for the top nav, navigation menu 1.

  63. Top Nav Active

    Main active background color for the top nav, navigation menu 1.

  64. Price Text

    Used for the price number on the product detail calculator.

  65. Basic Borders

    Used as the basic border color for many elements over the site. Such as the banner, tabbed areas, page CAPTCHA, suggested selling and featured product area.

  66. Sidebar Content Background

    Main background color for all non-navigation items in the sidebar.

  67. General Content Background

    Used in many panels across the site including the login panel and settings page user info areas.

  68. Sidebar Heading Primary

    Sidebar header text color for navigation and featured product.

  69. Sidebar Heading Secondary

    Sidebar header text color for contact block, recent history, twitter and RSS.

  70. Account Bar Background

    Background color for the top account bar.

  71. Account Bar Border

    Border color for the top account bar.

  72. Sidebar Nav Secondary Background

    Background color for contact block, recent history, twitter and RSS.

  73. Sidebar Nav Secondary Border

    Border color for contact block, recent history, twitter and RSS.

  74. Product and Category Background

    Background color for each product and category listed on category pages.

  75. Product and Category Border

    Border color for each product and category listed on category pages.

  76. Product and Category Text

    Text color for each product and category listed on category pages.

  77. Breadcrumb Area Background

    Background color for breadcrumb area on category and product detail pages.

  78. Breadcrumb Link Text

    Link color for breadcrumb area on category and product detail pages.

  79. Breadcrumb Active Text

    Active area color for breadcrumb area on category and product detail pages.

  80. Footer Background

    The main footer background color behind the navigation and footer content that extends the full width of the page.

  81. Account Bar Link Background

    Background color for the links in the top account bar.

  82. Account Bar Link Bg Hover

    Background hover color for the links in the top account bar.

  83. Main Content Background

    The main content is the area of content that is not the sidebar header or footer and usually contains specific page details.

  84. Customize iFrame Background

    Used to color background of forms based eDocbuilder iFrame templates.

  85. Payment Method Tab Background

    The payment method area on the checkout page.

  86. Payment Method Form Background

    The payment method form on the checkout page.

  87. Payment Method Form Border

    The payment method form border on the checkout page.

Customize Skin Feeds

Add your twitter handle or RSS feed link here if you want them to appear in the sidebar. Or leave blank to remove them from the site.

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

Additional Skin Options

  • Show Your Company Logo (B2B sites only).
  • Display product list as a vertical list by default. By default the product and category list will show in a grid format, by checking this the list will default to a horizontal list format.
  • Always display product short description. This will show the product descriptions in both the grid and list layout, by default the short descriptions will always show in the list layout.
  • Header logo size. An easy way to limit the size of your logo if your logo is very tall. Empty this text box to remove all height limits on the logo.
  • Subscriber logo size. An easy way to limit the size of your logo if your logo is very tall. Empty this text box to remove all height limits on the logo.
  • Hide history panel. If you don't want the users navigation history to show in the sidebar check this box.

Skin Elements

O Account Bar

The account bar is specific to some responsive skins and features normal functionality that exists on all Pressero sites. This area cannot be customized through Pressero admin beyond color changes. But, this area will adjust depending on options made available in the site admin area.

A Logo

The logo area is formatted to fit horizontal logos best. See this article for best practices in customizing the logo area

B Navigation Menu 1

There is limited space for this menu, in order to not have the menu items move to two lines you should nest navigation items or reduce the amount of items. Be mindful that this navigation will try to adjust to device sizes also and will look different depending on the device.

C Banner

A multi image rotating banner customized in Pressero admin through the widgets area of the site.

D Cart Preview

Once there are items in the cart a preview of those items will show on mouse hover of this area.

E Search

Will search the site for products, categories and pages.

F Navigation Menu 2

If no items exist in this navigation area it will not display. Customizing the heading of this navigation area is only possible through custom skinning.

G Featured Product

This area is random, on page load a random produce will be chose from the list of products that are indicated as featured. To remove this area you must have no products marked as featured.

H Navigation Menu 3

If no items exist in this navigation area it will not display. Customizing the heading of this navigation area is only possible through custom skinning.

I Twitter Feed

If there is no twitter handle present in the skin options area the twitter feed will not show. Customizing the heading of this area is only possible through custom skinning.

- RSS Feed

Not shown in image but will appear below Twitter feed when an RSS feed url is provided in skin options. Customizing the heading of this area is only possible through custom skinning.

- Subscriber Logo

Not shown in this image. The subscriber logo will show in the sidebar if the site is B2B and the skin options has the "Show Subscriber Logo" option enabled.

J Contact Block

This area will not show if the contact block content is empty. To customize this area go to Site > Settings > Content > Contact Block.

K Tagline

If there is no tagline present this area will not show. You can add a site tagline through the site settings area.

- Content Share Links

This area will not show if the share links content is empty. To customize this area go to Site > Settings > SEO/HTML > Share links.

L Navigation Menu 4

If no items exist in this navigation area it will not display. There is limited space for this menu, in order to not have the menu items move to two lines you should nest navigation items or reduce the amount of items.

M Footer Content

This area will not show if the footer content is empty. To customize this area go to Site > Settings > Content > Footer Content.

N Featured List

A list of all featured items which can be scrolled left and right. In order to remove this area you must not have any products set as featured.