Skinning eduCommons

Left Skin Documentation

Overview

First of all it may help to begin by going over some general strategies to skinning a website. The main strategy when you skin a site is to balance the amount of image and UI information that needs to be downloaded with making your site appear appealing. If you have large images with a huge file size, your site will appear to be sluggish to end users, especially those with poor connectivity to the Internet. If you have no images or styling, your site will load very fast, but may not be very appealing to end users. When you design a look and feel for a web site both of these aspects must be considered. Although Left Skin gives you control over many of these aspects, it leaves the responsibility of choosing the correct balance to you.

Left Skin allows you to set colors in many parts of the page. When setting the colors you can use the default web standard names like “white” or “pink” etc. You can also use a hex coded RGB value. If you are using a hex value it must be preceded by a “#”. For example if you wanted pure red you would enter “#FF0000” in the color field. If you want to experiment more with colors, use the popup color control provided by left skin to set colors, shades, hues, etc.

In many areas you can experiment with background images that you may want to appear in various places in the site. Use the form controls that Left Skin provides to upload these images to various areas. If however you decide that you do not want an image to appear in a background after all, a trick you can use to reset a section back to its default setting is to create a 1×1 pixel %100 transparent gif and upload it as an image. This will allow the solid background color to appear, and the image will be out of the way.

The Control Panel

The Left Skin control panel is where you make the majority of changes to the look and feel of your website. It can be navigated to by clicking on the “Site Setup” link found at the top right of your page. Note that you must be logged in as a manager in order to see the link. Once you are into the general control panels page look for the section titled “Add on product configuration.” In this section you should see two entries titled “Left Skin CSS settings” and “CSS Settings.” Click on the “Left Skin CSS Settings” to get to the main Left Skin control panel.

Once you are into the main control panel you will notice that you are now given a form with a bunch of settings. This form is prefaced with a number of tabs across the top. Each of these tabs control a portion of the page that is displayed. Refer to the following sections for detailed instructions on the settings and how they work.

Before we launch into explaining all the settings in the control panel and how to use them, I figured it would be good to mention that there is a way to reset any changes you make back to the default settings. This gives you an extra safety net when you are making changes to the theme, and gives you a way of getting back to a known working setting if you have gone too far. To reset the skin to the default look that comes with Left Skin, simply click on the “Reset to Default” button at the bottom of the form.

General Tab

The general tab controls settings that are not necessarily specific to certain areas. These are mostly miscellaneous settings that do not fit in the other categories. Some of them are vital to how you will interact with Left Skin, so it is important to understand the settings found here.

Development Mode

Development mode is the name given to the mode you will need to be in when you are making any changes to Left Skin. First a little background on what is going on behind the scenes in your Plone site. Plone manages all the many CSS and javascript files associated with your site by compiling them together into one big CSS file that it then compresses and caches very agressively. This is primarily to increase the performance of your site. When you make changes to Left Skin, often many of the settings will not take effect when your site is in production mode. This is because the CSS files that the settings control have already been cached throughout your system all the way to the browser.

In order to see your changes immediately, you need to temporarily take Plone out of production mode, which will then treat all the CSS files individually, and will not send caching headers with them, so that the browser and any corresponding servers that may sit in front of your Plone site will not cache the pages. You can get into this mode by selecting “Development Mode” and then “Save” at the bottom of the page. Be aware, you will want to exit development mode as soon as you are through making changes, as it will cause quite a large performance hit on your site while in this model.

Portal Logo

The portal logo setting allows you to upload a new logo that will appear in the top left of the site. It will replace the default logo that currently appears there (titled “Left Skin Put your logo here”). Note that even in development mode sometimes the portal logo image will still be cached. When you upload your new graphic, if you do not see it immediately, then simply browse to the home page of your Plone site and do a full reload on the page. In most browsers this can be done simply by holding down the shift key and clicking on the reload icon in the browser header.

Portal Favicon

The portal favicon is the little icon that appears next to the URL listing in the browser header. This little icon is cached even more heavily than the portal logo, and can be a little tricky to get it to appear once you have uploaded it. Again like the portal logo, being in development mode does not help much here. The best strategy for this one is to completely clear your browser cache once you have uploaded the icon. You can normally do this through the preferences or options setting in your browser.

Fluid Fixed Width

The next four settings allow you to control both the width of your website and how the text flows in your pages. If you do not have “Fluid Fixed Width” set, your site will dynamically resize to the full width of the browser window. This is normal default behavior for a Plone site. If “Fluid Fixed Width” is set, a fixed width is applied to your site. Regardless of how you resize your browser window, the text layouts will remain the same. If you resize too small scroll bars will appear in the browser to allow you to continue to navigate. If you size your browser bigger than the fixed width of the site, a background will appear in the area that is not within your site.Both of these site layout strategies have strengths and weaknesses. Left Skin allows you to choose between either of these strategies.

The next three settings allow you to control the look and feel of the background created when “Fixed Fluid Width” is selected. Note that these settings do not do anything if you do not have “Fixed Fluid Width” set. The first setting allows you to repeat vertically any image you may have uploaded to appear on the background. This is useful if you are trying to create a pattern to appear in the background area. It is also a good idea if you want styling on your background, but do not want to increase the bandwidth needed to download a page by using a larger image on the background.

The “Body Background Color” allows you to set the color of the background. If you want the background to appear as a plain solid color, you can set it here. Alternatively you can upload an image to appear on the background instead using the “Body Background Image” field. Note that you can use both these settings in conjunction if your background image is using alpha channels or transparency. Also if you want to remove a background image, use the “Reset to Defaults” option to set the entire site back to default Left Skin settings, or use the 1×1 transparent gif strategy explained above.

Header Tab

The header tab controls how the top banner section of your website appears. It includes any banner images you would like to go across the top of the site, as well as colors of fonts and links that may appear in the header section. The first option in the Header tab is to upload a portal banner. This will appear on the background of the full header section, so make sure any images you may want to upload here work with the portal logo and other controls that appear in the top of the site. In the description area of the portal banner field, suggestions are given as to what the size of the uploaded banner should be. Also if you are not using a “Fluid Fixed Width” strategy you will want to take into account what will happen if a user opens a browser wider than your banner. You may want to use some sort of fading in conjunction with the header background color to make sure that it will work.

The rest of the controls in the header tab control the colors of text that appear in the header. Use the Font Color, Link Color and Active Link Color to control how text will appear in the header. At this point I should also mention that the footer of the site is set to automatically pick up the same colors that are set for the header. This is done to maintain some consistency between the header and footer, and to cue the user as to where the UI ends and the content begins. Some designs may require that your footer, or text contained in the footer be a different color. If this is the case for you, then you can use the top background image field to create a different background to the footer in the header. Note that this is also a good strategy if you are using a banner for the header. Just pick a background color that matches your portal banner, and the footer will then blend well with the header, and still give the necessary cue to the user where the content will be.

Top Nav Bar

The “Top Nav Bar” is similar to the Header tab, except it controls the section just under the header. Typically this is the main horizontal navigation area provided by your site. You may want to simply leave the background color solid, or provide a subtle effect by uploading a background image. If you do upload a background image, do note that it will repeat on the horizontal axis. This is to facilitate subtle shading effects which you may want to appear in the background, and to give you a strategy to be able to keep the size of your images down.

In this section you can use the “Active Link Color” setting to give a hover effect over links that are moused over. Simply make the link lighter or darker than the Link Color, and when a user mouses over the link it will change slightly and cue the user that what is being moused over is an active option they can select.

There is a more subtle effect that occurs with the background color assigned to the top nav bar. Highlights, which include thin lines, hrules, etc. will use the same color as the background of the top nav bar. This is to help break up the content area colors and blend them better with the rest of the site. If for some reason you need to have these highlighted colors in the content area separate from the background of the top nav bar, then use a background image for the top nav bar, and then set the color you want the content highlights to be as the top nav background color.

Left Nav

This section controls the left hand column of the page. It is similar in functionality to the top nav bar, with the same basic settings. Differences in functionality between the top nav bar are that the background will repeat on the vertical axis instead of the horizontal one. Typically most designs will not require a background image here, but it is included anyway just in case.

A larger consideration you will want to make when stying this area of the page is how pronounced you want the left hand navigation to be. If your site requires a strong navigational presence in the left hand column, you may want to chose a darker background with lighter text to complment the neighboring content area. If you require a minimal presence or want to minimize the boldness of the left hand content it is better to choose a lighter color scheme with darker text. It may be worth starting here to experiment and then build the rest of the sections around whatever scheme you decide to go with.

Content

The content area is the main focus of the page, and colors for it can be controlled under the “Content” tab. Typically unless your design calls for something completely different, you will probably only tweak things slightly here. Examples of things you may want to do are making the text color not fully black, change the colors of links in the page, etc. You may want to change slightly the background color to a little less white. More drastic changes here require careful thought and planning to make sure the rest of the areas will work together with them.

CSS Helper Control Panel

Left skin also has a separate control panel which exposes many of the settings controled by Plone at lower levels. It is basically a grouping of settings that get plugged into the CSS files. Left Skin exposes this control panel to allow you to make further changes to some aspects of the UI that are not integrated into the main Left Skin control panel. If you can not gain access to the settings you would like either through the main left skin control panel, or via the CSS Helper control panel, then it is time to start looking into the more traditio