Ch. 042 Customizing Default Site Skins (latest)

PRESSERO > Pressero Documentation Manual

Contents

Customizing your Site Skin

The Pressero system offers various skin options. A skin is a basic design layout for your websites. Each skin has different areas that are available to change/edit with custom images, colors, options, etc. We also offer custom skinning if you need more options than what the basic skin templates have. You can contact the support team by submitting a ticket for more information.

To get to your site skin, go to: Admin > Sites > Choose your site > Skins.

IMPORTANT TO NOTE: To see the choices and changes you make to your skin area you may need to either wait until your site cache is cleared, or force it to clear by adding /clearcache to the end of your URL. Example: websitename.com/clearcache. If the site is a B2B site you will need to be logged into the site before this will work.

This image shows the first tabbed area that you come to when you choose the "skins" link. Because you will work in this tabbed area most often. It is the one that we start with, although the first step you need to make when you get started is to choose the skin template under the first tab "Select Skin."

Selecting your skin

Click on the "Select Skin."tab. You will see an example of each of the skins that come with Pressero. These are all organized into three different sections; "Responsive", "Standard" and "Custom". Responsive skins, are skins that will adjust their design based on the device viewing the page. Standard skin, are of fixed width and will display the same regardless of device size. Custom skins, If you have purchased custom skinning your skins will show up here.

Once you have a skin option you can apply it to as many sites as you want. When you find a skin you like, click on the "Select Skin" link below the picture. This has not been saved yet! When you choose a skin it will automatically bring you to the "Customize Skin" tab and REQUIRES you to click on the "Save Skin Settings" button before the system will update your site with that choice.

This is an image of the Select Skin tabbed area. On this page you can view each design layout in a larger view and also select the skin template you want to use for your site. Make sure to save on the next page after making your selection.

Responsive Skins for Mobile Devices

Because your Pressero storefront business is built on enabling ordering anytime, anywhere, a mobile version will soon become essential for some of your customers. You will notice that we offer various responsive design skins. These designs adapt the store layout to your customer's viewing device and can eliminate your customers dealing with tedious pinching and zooming.

** Please note that responsive skins are not compatible with Internet Explorer 8 and previous versions of Internet Explorer.

Customizing the skins

You first need to have selected a skin layout for the site. It's look (colors and images) can be changed after selection by using the Customize Skin tab. The areas that can be customized are:

Customize Skin Images

Each skin will have different images that can be changed/customized. In the example in the image at the top of this page you see the template "Ender's Game" has two images that can be customized. 1. Main Background Image, and 2. Home page banner. To change an image:

  1. Make a note of the image size/dimensions. - Indicated next to the image label. The image must be exactly that to work properly. When you see "auto" that means that the height can be anything you want it to be.
  2. Check your image type - The image types allowed are; .JPG, .GIF, .PNG.
  3. Name your image - Name your image something that will be easy to identify. All the images you upload for skins will be together in the "Skin Images" folder. It is recommeded to not have any spaces within the name of the iamge.
  4. Save changes - Make sure to save any previous changes made to the skin options before the next step.
  5. Upload your Image - Click "Upload Images". This will take you directly to the File Manager folder where the skin images will reside.
  6. Select your uploaded image - Once the image has been uploaded you can then return to the skinning area and choose the image in the drop down for each available image you have the ability to change. Make sure to save again.

NOTE: You will want to "Save" your work so far or you will lose any changes you have made, that includes the choice of the skin if you have not saved since making that decision.

Images you upload to Pressero for your skins will reside in the File Manager, SkinImages folder. You can access this folder by either clicking on the "upload images" link in the Customize Skin area, or by going directly there: Admin > Tools > File Manager

Skin Descriptions

This image shows a skin description for the skin template "Ender's Game". These notes apply to this skin only.

For more details on your skin please see the links at the end of this document organized by skin name

Customize Skin Colors

Every skin has different areas that allow for clor changes. Choose the dropdown for the corresponding area you want to change and set a color. Click "Apply" after selecting the color you want.

Palette Management

For select skins, you can store a single custom color palette. This feature allows you to save a color palette, so you can use that palette on other sites or revert to the palette if you decide against changes you've made to the custom skin color settings.

To store a custom palette, simply click the "Store" button in the "Current Palette" area. You will see that the palette populates in the "Stored Palette" area with the current colors selected for the skin. If you would like to load this palette into a site, simply click the "Load" button in the "Stored Palette" area.

You can also load any of the palette presets for the responsive skins. The default color palettes for each of the responsive skins are available in the "Palette Presets" area. If you would like to use any of these default color palettes in your site, simply click the "Load" button located below the color palette.

Customize Skin Feeds

These two areas are optional. You do not need to display a twitter or RSS feed on your site by leaving these two areas set to blank.

  • Twitter Feed - A Twitter feed can be displayed on your Home page based on your Skin's layout. Enter a Twitter Account (e.g., for Twitter/Web2Print, enter Web2Print). Save Skin Settings before leaving the Skins control.
  • RSS Feed - This field can be left blank, or an RSS feed can be displayed on your Home page based on your Skin's layout. Enter an RSS feed (e.g., for a Google Sci/Tech news feed enter http://news.google.com/news?ned=us&topic=t&output=rss, for a National Public Radio news feed enter http://www.npr.org/rss/rss.php?id=1019). RSS News feeds can be found on many websites and can be a source for your site, or use a web search. Save Skin Settings before leaving the Skins control.

Additional Skin Options

Show Your Company Logo (B2B sites only) - Optional and for B2B sites only. Uncheck this if you don't want your logo to display on your customers website. Your customer's logo will still display.

For additional skin option details please utilize the links at the bottom of the article corresponding with the skin name in question.

Individual Skin Documentation

The following links will give specific details about each skin available with every Pressero site.

Responsive Skins

Standard Skins