How to customize the Responsive Watson skin

Contents

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

Overview

This is a responsive skin, meaning it has a responsive width that will adjust to device size. This skin features all Pressero functionality that can be customized through the admin interface.

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

Customizations include multiple image areas and 81 different colors to customize.

Live Responsive Watson Demo

Customize Skin Images

This skin allows for 3 background image changes.

• Main Background Horizontal Repeat 17px X 995px

  This is the main background image for the site and will repeat horizontally to fill the entire space. The default features a vertical striped design.

• Header Top Edge 1030px X 40px

  This is an image across the top of the site central area. The default configuration features a saw tooth white edge over the main content area.

• Footer Bottom Edge 1030px X 40px

  This is an image across the bottom of the site central area. The default configuration features a saw tooth white edge below the main content area.

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, this does not include navigation areas or links.

3. General Links

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

4. General Links Hover

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

5. Primary Bg

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

6. Primary Text

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

7. Primary Button Bg

   This will affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect all elements with the 'default' CSS selector. Mainly the secondary buttons on each page. Such as 'View Items' on the products list page or the 'continue shopping' button on the cart page.

14. Default Button Text

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

15. Default Button Border

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

16. Default Button Hover Bg

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

17. Default Button Hover Text

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

18. Default Button Hover Border

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

19. Muted Text

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

20. Info Bg

    This will affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 affect 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 Bootstrap customization this will affect all elements with the 'bg-warning' CSS selector. Not currently used.

42. Warning Text

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

43. Warning Border

    Mainly for future Bootstrap customization this will affect 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 affect the background of all panels basic and primary.

53. General Panel Text

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

54. Panel Heading BG

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

55. Panel Heading Text

    This will affect 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 affect the pagination for multiple pages of products and the pagination area on the order history grid.

62. Pagination Border

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

63. Pagination BG

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

64. Pagination Hover Text

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

65. Pagination Hover Border

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

66. Pagination Hover BG

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

67. Pagination Active Text

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

68. Pagination Active Border

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

69. Pagination Active BG

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

70. Wells BG

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

71. Wells Text

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

72. Wells Border

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

73. Main Content Background

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

74. Customize iFrame Background

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

75. Header Background Color

    The background color for the header at the top of the site.

76. Product and Category Image Background

    The background color behind all products and categories listed on category type pages.

77. Product and Category Links

    The color of all the links under product and category images on category type pages.

78. Product and Category Links Hover

    The hover color of all the links under product and category images on category type pages.

79. User Info Background

    Background color for items in users list.

80. User Info Text

    Text color for items in users list.

81. User Info Border

    Border color for items in users list.

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).
• Single line product headings This option will keep product and category names limited to 1 line and add ellipsis 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. This option will be selected by default.
• 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.
• 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 white space in the footer.
• Hide history panel. If you don't want the users navigation history to show in the sidebar check this box.
• Always display product short description Also with this skin you can choose to show or hide the product and category short description when products list are using the grid layout. Without this checked the short descriptions will only show in list layout.
• Hidden Footer Column Headings If checked this will hide the headings used in the footer area.
• Hidden Footer Logo If checked this will hide the logo used in the footer area.
• 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 footer.

Skin Elements

Related Blogs

• October 31, 2018: Making Skins and Menus Better