How to customize the Algernon 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 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 4 navigation areas, a customizable home page banner, a left sidebar and large product images throughout the site.

Customizations include multiple areas for background image changes including the body and banner background, plus 41 different colors to customize.

This skin does NOT use any widgets from Pressero admin. Also, the home page banner is limited to one image and does not rotate.

Live Skin Demo

Customize Skin Images

This skin allows for five background image changes.

• Home Page Main Background Image 10px X 600px - Notice that this image is only 10px wide. This is because we utilize CSS to repeat the image horizontally across the page. This will not only fill any monitor size but it will load much faster with such a small image size.
• Home page banner 960px X 250px - The exact size must be used here to work best with the design. We would suggest creating a .png image that works well with the site background.
• Cart Area Background 270px X 71px - Used as an attention-getter for the cart area, this image is easily replaced. Any replacement image must use the indicated size.
• Main Background Image 10px X 240px - For pages that do not have the banner at the top we decrease the size of the background image as to fit the header better. You can see this repeating CSS image at work on any product detail page or content page.
• Container Background Image 960px X 300px - By default this is a .png image with transparency and a light circular gradient to add some small flair to the home page banner area.

Before clicking "Upload Images," make sure to save any changes.

Customize Skin Colors

1. Body Background #ffffff

   The main background color.

2. General Text #555555

   All basic text throughout the site.

3. General Links #006699

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

4. General Links Hover #0a477d

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

5. Top Nav Links #ffffff

   The default color of the top navigation links.

6. Top Nav Links Hover #bad4dc

   The default color of the top navigation links hover state.

7. Side Bar Links #006699

   The default links for all sidebar areas including two navigation areas, featured product, Twitter and RSS feeds.

8. Side Bar Links Hover #0067c3

   The default links hover state for all sidebar areas including two navigation areas, featured product, Twitter and RSS feeds.

9. Footer Links #666666

   The default color of the footer navigation links.

10. Footer Links Hover #0a477d

    The default color of the footer navigation links hover state.

11. Product Image Borders #ffffff

    These borders wrap all product and category images within product/category lists in the content area.

12. Product Image Shadows #ffffff

    The box shadow color behind product and category images.

13. Product and Category Links #444444

    The default color of all product and category links.

14. Product and Category Links Hover #000000

    The default color of all product and category links hover state.

15. Page titles #0a477d

    All content page title.

16. Major Buttons Background #0067c3

    All call to action buttons backgrounds throughout the site, such as the "Add to Cart" buttons.

17. Major Buttons Background Hover #0066ff

    All call to action buttons background hover states throughout the site, such as the "Add to Cart" buttons.

18. Major Buttons Text #ffffff

    All call to action buttons text colors throughout the site, such as the "Add to Cart" buttons.

19. Central Page Content Background #ffffff

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

    The background color of the box wrapping every product and category.

21. Category and Product Wrapper Border #ffffff

    This controls the border wrapping product/category images, title and other elements within category pages.

22. Login Form Box Background #eeeeee

    The background of the form on the login page.

23. Search Button Background #0067c3

    The search button background located in the sidebar.

24. Side Nav Top Borders #0a477d

    The top borders that separate each major element in the sidebar.

25. Featured and Site Logo Background #0a477d

    The backgrounds behind the featured product image in the sidebar as well as the subscriber logo in the sidebar (B2B only).

26. Top Navigation Background #04315b

    Header navigation background.

27. Home Page Banner Background Transparent

    The box behind the home page banner.

28. Content Area Heading Text #0a477d

    This controls heading colors throughout the site. If a heading tag is used in content areas, such as h1, h2, etc., this will control their color.

29. Top Navigation Border #458bb7

    The 1px border around the top navigation and across the top of the site.

30. Search Button Border #bcbcbc

    Border around the search button in the sidebar.

31. Side Bar Links Current #00719f

    Basic sidebar links as added through the content block from admin settings.

32. Product Asset Background #eeeeee

    The background behind product assets if used on the product detail page.

33. Product Asset Text #666666

    The text of product assets if used on the product detail page.

34. Product Asset Border #cccccc

    The border around product assets if used on the product detail page.

35. Product Asset Background Hover #ffffff

    The background behind product assets on hover, if used on the product detail page.

36. Product Asset Text Hover #333333

    The text hover color of product assets if used on the product detail page.

37. Product Asset Border Hover #666666

    The border hover around product assets if used on the product detail page.

38. Featured Image Background #ffffff

    The featured image background color in the sidebar.

39. Featured Image Text #ffffff

    The featured image text in the sidebar.

40. Main Content Background #ffffff

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

41. Customize iFrame Background #ffffff

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

42. Instructions Background #d9edf7

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

43. Instructions Border #bce8f1

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

44. 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 and Locations

Related Blogs

• October 31, 2018: Making Skins and Menus Better