How to customize the Bootstrap Basic 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 Bootstrap Basic Demo

Customize Skin Colors

  1. Body Background #ffffff

    The main background color.

  2. General Text #333333

    All basic text throughout the site.

  3. General Links #428bca

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

  4. General Links Hover #2a6496

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

  5. Primary Background #428bca

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

  6. Primary Text #ffffff

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

  7. Primary Border #1C6FB8

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

  8. Primary Button Background #428bca

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

  9. Primary Button Text #ffffff

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

  10. Primary Button Border #2b669a

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

  11. Primary Button Hover Background #2d6ca2

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

  12. Primary Button Hover Text #ffffff

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

  13. Primary Button Hover Border #285e8e

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

  14. Secondary Background #43ac6a

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

  15. Secondary Text #ffffff

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

  16. Secondary Border #3c9a5f

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

  17. Secondary Button Background #43ac6a

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

  18. Secondary Button Text #ffffff

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

  19. Secondary Button Border #3c9a5f

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

  20. Secondary Button Hover Background #358753

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

  21. Secondary Button Hover Text #ffffff

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

  22. Secondary Button Hover Border #2b6e44

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

  23. Default Button Background #ffffff

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

  24. Default Button Text #333333

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

  25. Default Button Border #cccccc

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

  26. Default Button Hover Background #e0e0e0

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

  27. Default Button Hover Text #333333

    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 #adadad

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

  29. Muted Background #f5f5f5

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

  30. Muted Text #8c8c8c

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

  31. Muted Border #dcdcdc

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

  32. Info Background #d9edf7

    Use for instruction and information prompts throughout site.

  33. Info Text #31708f

    Use for instruction and information prompts throughout site.

  34. Info Border #9acfea

    Use for instruction and information prompts throughout site.

  35. Account Bar Link #8c8c8c

    Links for the top account bar.

  36. Account Bar Link Hover #428bca

    Links hover for the top account bar.

  37. Account Bar Dropdown Background #ffffff

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

  38. Account Bar Dropdown Border #dcdcdc

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

  39. Vertical Nav Background #ffffff

    Used in the sidebar navigation areas.

  40. Vertical Nav Border #e0e0e0

    Used in the sidebar navigation areas.

  41. Vertical Nav Text #777777

    Used in the sidebar navigation areas.

  42. Vertical Nav Text Hover #428bca

    Used in the sidebar navigation areas.

  43. Vertical Nav Bg Hover #f9f9f9

    Used in the sidebar navigation areas.

  44. Danger Background #f2dede

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

  45. Danger Text #a94442

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

  46. Danger Border #dca7a7

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

  47. Success Background #dff0d8

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

  48. Success Text #3c763d

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

  49. Success Border #d6e9c6

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

  50. Danger Button Background #d9534f

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

  51. Danger Button Text #ffffff

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

  52. Danger Button Border #b92c28

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

  53. Danger Button Hover Background #c12e2a

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

  54. Danger Button Hover Text #ffffff

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

  55. Danger Button Hover Border #ac2925

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

  56. Warning Background #fcf8e3

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

  57. Warning Text #8a6d3b

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

  58. Warning Border #f5e79e

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

  59. Top Nav Background #222222

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

  60. Top Nav Link #aaaaaa

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

  61. Top Nav Border #080808

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

  62. Top Nav Link Hover #ffffff

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

  63. Top Nav Active #080808

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

  64. Price Text #ee0000

    Used for the price number on the product detail calculator.

  65. Basic Borders #dddddd

    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 #ffffff

    Main background color for al non navigation items in the sidebar.

  67. General Content Background #ffffff

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

  68. Sidebar Heading Primary #ffffff

    Sidebar header text color for navigation and featured product.

  69. Sidebar Heading Secondary #333333

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

  70. Account Bar Background #f8f8f8

    Background color for the top account bar.

  71. Account Bar Border #e7e7e7

    Border color for the top account bar.

  72. Sidebar Nav Secondary Background #f8f8f8

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

  73. Sidebar Nav Secondary Border #e7e7e7

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

  74. Product and Category Background #ffffff

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

  75. Product and Category Border #dddddd

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

  76. Product and Category Text #333333

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

  77. Breadcrumb Area Background #f5f5f5

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

  78. Breadcrumb Link Text #2fa4e7

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

  79. Breadcrumb Active Text #999999

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

  80. Footer Background #f5f5f5

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

  81. Account Bar Link Background #f8f8f8

    Background color for the links in the top account bar.

  82. Account Bar Link Bg Hover #eeeeee

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

  83. Main Content Background #ffffff

    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 #ffffff

    Used to color background of forms based eDocbuilder iframe templates.

  85. Payment Method Tab Background #ffffff

    The payment method area on the checkout page.

  86. Payment Method Form Background #d9edf7

    The payment method form on the checkout page.

  87. Payment Method Form Border #9acfea

    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 the 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.