How to customize the Responsive #8 skin

PRESSERO > *Pressero FAQs

Contents

Overview

This is a responsive skin, meaning it has percentage widths and will adjust to device size. This skin features most, but not all, Pressero functionality that can be customized through the admin interface. Including 74 different colors to customize.

The following items are not available for this skin.
  • Twitter Feed
  • Rss Feed

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

Live Responsive #8 Demo

Customize Skin Colors

Below there are some color selections that are not used with Pressero default HTML. But we have added these basic color selections so they can be used when customizing HTML within the rich text area through admin. For our more advanced users, some simple HTML changes to their content can take advantage of these palette selections.

Example: To take advantage of #5 "Primary BG" the following HTML can be used.

<p class="bg-primary">Here is some content.</p>

For a page full of all Bootstrap 3 elements and how they are effected by the current pallette see this page on the demo site.

  1. Body Background

    The main background color.

  2. General Text

    All basic text throughout the site, this does not include navigation areas or links.

  3. General Links

    All basic content links throughout site, this does not include naivgation.

  4. General Links Hover

    All basic content links throughout site, this does not include naivgation.

  5. Primary Bg

    Mainly for future Bootstap customization this will effect all elements with the 'bg-primary' CSS selector. Not currently used.

  6. Primary Text

    Mainly for future Bootstap customization this will effect all elements with the 'bg-primary' CSS selector. Not currently used.

  7. Primary Button Bg

    This will effect all elements with the 'primary' CSS selector. Mainly the most important buttons on each page. Such as 'Add to Cart' or 'Checkout' buttons.

  8. Primary Button Text

    This will effect all elements with the 'primary' CSS selector. Mainly the most important buttons on each page. Such as 'Add to Cart' or 'Checkout' buttons.

  9. Primary Button Border

    This will effect all elements with the 'primary' CSS selector. Mainly the most important buttons on each page. Such as 'Add to Cart' or 'Checkout' buttons.

  10. Primary Button Hover Bg

    This will effect all elements with the 'primary' CSS selector. Mainly the most important buttons on each page. Such as 'Add to Cart' or 'Checkout' buttons.

  11. Primary Button Hover Text

    This will effect all elements with the 'primary' CSS selector. Mainly the most important buttons on each page. Such as 'Add to Cart' or 'Checkout' buttons.

  12. Primary Button Hover Border

    This will effect all elements with the 'primary' CSS selector. Mainly the most important buttons on each page. Such as 'Add to Cart' or 'Checkout' buttons.

  13. Default Button Bg

    This will effect all elements with the 'default' CSS selector. Mainly the secondary buttons on each page. Such as 'View Items' on teh products list page or the 'continue shopping' button on the cart page.

  14. Default Button Text

    This will effect all elements with the 'default' CSS selector. Mainly the secondary buttons on each page. Such as 'View Items' on teh products list page or the 'continue shopping' button on the cart page.

  15. Default Button Border

    This will effect all elements with the 'default' CSS selector. Mainly the secondary buttons on each page. Such as 'View Items' on teh products list page or the 'continue shopping' button on the cart page.

  16. Default Button Hover Bg

    This will effect all elements with the 'default' CSS selector. Mainly the secondary buttons on each page. Such as 'View Items' on teh products list page or the 'continue shopping' button on the cart page.

  17. Default Button Hover Text

    This will effect all elements with the 'default' CSS selector. Mainly the secondary buttons on each page. Such as 'View Items' on teh products list page or the 'continue shopping' button on the cart page.

  18. Default Button Hover Border

    This will effect all elements with the 'default' CSS selector. Mainly the secondary buttons on each page. Such as 'View Items' on teh products list page or the 'continue shopping' button on the cart page.

  19. Muted Text

    Mainly for future Bootstap customization this will effect all elements with the 'text-muted' CSS selector. Not currently used.

  20. Info Bg

    This will effect all elements with the 'alert-info' CSS selector. These info areas are throughout the site and can bee seen when specific page instructions are customized through Pressero admin. Site > Settings > Instructions.

  21. Info Text

    This will effect all elements with the 'alert-info' CSS selector. These info areas are throughout the site and can bee seen when specific page instructions are customized through Pressero admin. Site > Settings > Instructions.

  22. Info Border

    This will effect all elements with the 'alert-info' CSS selector. These info areas are throughout the site and can bee seen when specific page instructions are customized through Pressero admin. Site > Settings > Instructions.

  23. Danger Bg

    This will effect all elements with the 'alert-danger' CSS selector. These alert areas are throughout the site and can bee seen when specific errors happen on a page.

  24. Danger Text

    This will effect all elements with the 'alert-danger' CSS selector. These alert areas are throughout the site and can bee seen when specific errors happen on a page.

  25. Danger Border

    This will effect all elements with the 'alert-danger' CSS selector. These alert areas are throughout the site and can bee seen when specific errors happen on a page.

  26. Success Bg

    This will effect all elements with the 'alert-success' CSS selector. These alert areas are throughout the site and can bee seen when actions are completed successfully. A good example is on the order complete page when a user finishes checkout successfully.

  27. Success Text

    This will effect all elements with the 'alert-success' CSS selector. These alert areas are throughout the site and can bee seen when actions are completed successfully. A good example is on the order complete page when a user finishes checkout successfully.

  28. Success Border

    This will effect all elements with the 'alert-success' CSS selector. These alert areas are throughout the site and can bee seen when actions are completed successfully. A good example is on the order complete page when a user finishes checkout successfully.

  29. Danger Button Bg

    This will effect all elements with the 'btn-danger' CSS selector. These are buttons around the site that will delete data. Such as the delete button on the cart page for each product added to the cart.

  30. Danger Button Text

    This will effect all elements with the 'btn-danger' CSS selector. These are buttons around the site that will delete data. Such as the delete button on the cart page for each product added to the cart.

  31. Danger Button Border

    This will effect all elements with the 'btn-danger' CSS selector. These are buttons around the site that will delete data. Such as the delete button on the cart page for each product added to the cart.

  32. Danger Button Hover Bg

    This will effect all elements with the 'btn-danger' CSS selector. These are buttons around the site that will delete data. Such as the delete button on the cart page for each product added to the cart.

  33. Danger Button Hover Text

    This will effect all elements with the 'btn-danger' CSS selector. These are buttons around the site that will delete data. Such as the delete button on the cart page for each product added to the cart.

  34. Danger Button Hover Border

    This will effect all elements with the 'btn-danger' CSS selector. These are buttons around the site that will delete data. Such as the delete button on the cart page for each product added to the cart.

  35. Success Button Bg

    This will effect all elements with the 'btn-success' CSS selector. These are buttons around the site that will add data. Such as the add new address button on the settings page, address tab.

  36. Success Button Text

    This will effect all elements with the 'btn-success' CSS selector. These are buttons around the site that will add data. Such as the add new address button on the settings page, address tab.

  37. Success Button Border

    This will effect all elements with the 'btn-success' CSS selector. These are buttons around the site that will add data. Such as the add new address button on the settings page, address tab.

  38. Success Button Hover Bg

    This will effect all elements with the 'btn-success' CSS selector. These are buttons around the site that will add data. Such as the add new address button on the settings page, address tab.

  39. Success Button Hover Text

    This will effect all elements with the 'btn-success' CSS selector. These are buttons around the site that will add data. Such as the add new address button on the settings page, address tab.

  40. Success Button Hover Border

    This will effect all elements with the 'btn-success' CSS selector. These are buttons around the site that will add data. Such as the add new address button on the settings page, address tab.

  41. Warning Bg

    Mainly for future Bootstap customization this will effect all elements with the 'bg-warning' CSS selector. Not currently used.

  42. Warning Text

    Mainly for future Bootstap customization this will effect all elements with the 'bg-warning' CSS selector. Not currently used.

  43. Warning Border

    Mainly for future Bootstap customization this will effect all elements with the 'bg-warning' CSS selector. Not currently used.

  44. Top Nav Bg

    The main background color for the top navigation area.

  45. Top Nav Link

    The default link color for the top navigation.

  46. Top Nav Border

    The default border color for the top navigation.

  47. Top Nav Link Hover

    The link hover color for the top navigation.

  48. Top Nav Active

    The link active color for the top navigation.

  49. Price Text

    The color of the price text used in the pricing engine on product detail pages.

  50. Basic Panel Borders

    Used in many places around the site these are the basic gray borders around elements such as the Banner on the home page and cart areas.

  51. Primary Panel Borders

    Used for primary panels around the site namely the login form and cart/checkout summary.

  52. General Panel BG

    This will effect the background of all panels basic and primary.

  53. General Panel Text

    This will effect the text of all panels basic and primary.

  54. Panel Heading BG

    This will effect heading background of all panels basic and primary.

  55. Panel Heading Text

    This will effect heading text of all panels basic and primary.

  56. Product and Category Background

    The background for the boxes surrounding products and categories on all list pages.

  57. Product and Category Border

    The borders for the boxes surrounding products and categories on all list pages.

  58. Product and Category Text

    The basic text for all product and category list items, not the name of the product or category.

  59. Footer Background

    The main background area of the footer that goes across the full width of the site.

  60. Footer Text

    The main text in the footer, does not include links.

  61. Pagination Text

    This will effect the pagination for multiple pages of products and the pagination area on the order history grid.

  62. Pagination Border

    This will effect the pagination for multiple pages of products and the pagination area on the order history grid.

  63. Pagination BG

    This will effect the pagination for multiple pages of products and the pagination area on the order history grid.

  64. Pagination Hover Text

    This will effect the pagination for multiple pages of products and the pagination area on the order history grid.

  65. Pagination Hover Border

    This will effect the pagination for multiple pages of products and the pagination area on the order history grid.

  66. Pagination Hover BG

    This will effect the pagination for multiple pages of products and the pagination area on the order history grid.

  67. Pagination Active Text

    This will effect the pagination for multiple pages of products and the pagination area on the order history grid.

  68. Pagination Active Border

    This will effect the pagination for multiple pages of products and the pagination area on the order history grid.

  69. Pagination Active BG

    This will effect the pagination for multiple pages of products and the pagination area on the order history grid.

  70. Wells BG

    Mainly for future Bootstap customization this will effect all elements with the 'well' CSS selector. Not currently used.

  71. Wells Text

    Mainly for future Bootstap customization this will effect all elements with the 'well' CSS selector. Not currently used.

  72. Wells Border

    Mainly for future Bootstap customization this will effect all elements with the 'well' CSS selector. Not currently used.

  73. Header Background

    The top area header of the site wrapping the logo, search and cart, by default is black.

  74. Header Text

    The top area header of the site wrapping the logo, search and cart, by default is a light gray.

Customize Skin Feeds

Skin feeds are currently not used with this skin.

Aditional Skin Options

  • Show Your Company Logo (B2B sites only)

    If this is a B2B site you can choose to show or hide the subscriber logo.

  • Full Screen Banner

    If unchecked the home page banner will have a limited width.

  • Single line product headings

    The default CSS here will keep product and category names limited to 1 line and add elipsis at the end if the name is too long for the space. The purpose of this is to keep the list of products and categories in a perfect grid format.

  • Display product list as a vertical list by default

    By default the product/categorie lists will display in grid format. If you want this to default to the list option check the box.

  • Hidden Footer Column Headings

    Check this box if you want to hide the headings for each column in the footer. Changing the text of these headings can only be done via custom skinning.

  • Header logo size

    This CSS will set a max-height to the logo. Depending on the width and height ratio of your logo this may make your logo too small. But, be aware that using a very tall logo, or setting this size too larger will create a lot of blank white space in the header.The "max-height" css will prevent the height of the image from extending larger than provided pixel size. The "max-height" is preferred as it will keep the ratio of the original image. This does not prevent the image from getting smaller.

  • Hidden footer logo

    Check this box to hide the logo in the footer.

  • Force footer logo height

    This CSS will set a max-height to the logo. Depending on the width and height ratio of your logo this may make your logo too small. But, be aware that using a very tall logo, or setting this size too larger will create a lot of blank space in the footer.

  • Subscriber logo size

    This CSS will set a max-height to the subscriber logo. Depending on the width and height ratio of your subscriber logo this may make your logo too small. But, be aware that using a very tall subscriber logo, or setting this size too larger will create a lot of blank white space in the sidebar.

Skin Elements

O Login / Account links

This area will change depending if the user is authorized or not. The purpose of this area is to give the top nav more space by making the login links there unnecessary.

A Logo

The logo area is formatted to fit horizontal logos best. See this article for best practices in customizing the logo area. (Link) Also, the additional skin options area in admin has adjustments for this logo size.

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. The banner also has a full-width option in the admin additional skin opstions area.

D Cart Preview

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

E Search

A link that will take the user to a search page, where a user can enter in their search terms.

F Navigation Menu 2

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

G Featured Product

If no products are assigned as featured this area will not show. If more than one product is indicated as featured this will create a nice slider.

H Navigation Menu 3

If no items exist in this navigation area it will not display. Customizing the heading text of this naivgation area is only possible through custom skinning. But the heading can be hidden via skin options area in admin.

- Twitter Feed

This area is not used for this skin.

- Rss Feed

This area is not used for this skin.

P 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. Customizing the heading text of this area is only possible through custom skinning. But the heading can be hidden via skin options area in admin.

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

Not shown in image. 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 we suggest you keep it simple and do not use any submenus.

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. Customizing the heading text of this area is only possible through custom skinning. But the heading can be hidden via skin options area in admin.

N Second Featured Area

This will show all products currently selected as featured. The user can easily pan through these items by using their mouse wheel.