How to customize the Moriarty skin

Contents

Overview

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

The design features a large full width logo area, 4 navigation areas, a customizable rotating home page banner area, two sidebars and small product/category images in vertical list format throughout the site.

Customizations include multiple areas for background image changes including the body and banner background. Plus 44 different colors to customize.

This skin does NOT use any widgets from Pressero admin. Also, the home page banner image rotation is controlled through the skins options area and not the widgets area.

Live Moriarty Demo

Customize Skin Images

This skin allows for 15 image changes.

  • Banner Image 1st Rotation 960px X 300px

    This is one of the rotating banner images, it does not have a link and must be the size indicated.

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

  • Banner Image 2nd Rotation 960px X 300px

    This is one of the rotating banner images, it does not have a link and must be the size indicated.

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

  • Banner Image 3rd Rotation 960px X 300px

    This is one of the rotating banner images, it does not have a link and must be the size indicated.

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

  • Cart Icon 13px X 11px

    The small icon located in the cart area of the left sidebar.

  • Branding/Logo Area 960px X 150px

    The large branding / logo area above the top navigation. This replaces the normal site logo added to the site settings area in admin.

  • Search Button Icon 18px X 18px

    The small icon in the search area of the right sidebar.

  • Navigation 2 Header 210px X 25px

    The header of this area used to show text describing its contents.

  • Featured Header 210px X 25px

    The header of this area used to show text describing its contents.

  • Contact Header 210px X 25px

    The header of this area used to show text describing its contents.

  • Share Header 210px X 25px

    The header of this area used to show text describing its contents.

  • Navigation 3 Header 210px X 25px

    The header of this area used to show text describing its contents.

  • Subscriber Header 210px X 25px

    The header of this area used to show text describing its contents.

  • RSS Header 210px X 25px

    The header of this area used to show text describing its contents.

  • Twitter Header 210px X 25px

    The header of this area used to show text describing its contents.

  • Recent History Header 210px X 25px

    The header of this area used to show text describing its contents.

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 within 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. Top Nav Background

    The main color of the top nav background. This area is also covered by a transparent image that when combined with the background color will create a gradient.

  24. Cart Text

    The color of the cart preview text in the left sidebar.

  25. Cart Area Background

    The cart area background in the left sidebar.

  26. Search Area Background

    The search area in the right sidebar.

  27. Home Page Banner Background

    The colro behind the images in the home page banner.

  28. Footer Background

    The main color behind the footer content at the bottom of the site.

  29. Content Area Heading Text

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

  30. Update Preview Button

    The button for updating preview on the customize page for forms based eDocBuilder templates.

  31. Update Preview Button Hover

    The button for updating preview on the customize page for forms based eDocBuilder templates.

  32. Update Preview Button Text

    The button for updating preview on the customize page for forms based eDocBuilder templates.

  33. Page Element Shadows

    These are the small shadows behind each sidebar area.

  34. Category and Product Border

    Border for product and category lists.

  35. Top Nav Selected Border

    Border color top nav items that have been selected.

  36. Product Asset Background

    Product detail asset background color.

  37. Product Asset Text

    Product detail asset text color.

  38. Product Asset Border

    Product detail asset border color.

  39. Product Asset Background Hover

    Product detail asset background hover color.

  40. Product Asset Text Hover

    Product detail asset text hover color.

  41. Product Asset Border Hover

    Product detail asset border hover color.

  42. Top Nav Selected Background

    The top nav drop down background.

  43. Main Content Background

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

  44. Customize iFrame Background

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

  45. Instructions Background #d9edf7

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

  46. Instructions Border #bce8f1

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

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

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).
  • Hide history panel. If you don't want the users navigation history to show in the sidebar check this box.

Skin Elements

A Logo

The normal logo area has been replaced with a full width image that can be changed from within the skins 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.

C Banner

One single image banner without rotation.

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.

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.

I Twitter Feed

If there is no twitter handle present in the skin options area the twitter feed will not show.

- RSS Feed

Not shown in image but will appear below Twitter feed when an RSS feed url is provided in skin options.

- 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

Not shown in this 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, in order to not have the menu items move to two lines you should nest navigation items or reduce the amount of items. Utilizing submenus for this navigation area is not advised.

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.