Online Help

 Help Table of Contents

Resizing the Progress Meter Area on a Site Page

On TeamRaiser pages where the Thermometer status indicator displays by default (like the Greeting page for the event and Personal Pages of participants), the display area for the image can accommodate an image up to 65 pixels in width and 160 pixels in height. If you are replacing this image with a custom one of your own and the dimensions of your custom image are wider or longer, you must manually change the size of the progress meter area to be sure it is not cut off.

The Thermometer status indicator area is defined in the default system style sheet. You can override the default style definition by entering a new style definition for it in the custom style sheet (CustomStyle.css), which is available through Page Wrapper Editor. This new definition must contain the ID of the progress meter image and the width and height in pixels of the image.

You can orient the status indicator for either the height (such as an image like a ladder) or width (such as an image like a pathway). For the Personal Pages, you must provide definitions for both styles in order to adjust the area correctly.

Important: If you change the style to accommodate a wider progress meter image, you may also need to adjust other styles on the page and in the PageWrapper itself to accommodate the expanded size.

You must know the ID of the Widget progress meter you created with your custom image. To locate this ID:

  1. From the top navigation options, click Constituent360 and then click Widgets. The Widgets Campaigns page displays.
  2. Click the Progress Meters tab. The Progress Meters List page opens.
  3. Position your cursor over an action in the Actions column the custom progress meter. A status message displays in the status bar along the bottom of the page.
  4. At the end of the string, locate progress_ID= and take note of the number.

To manually change the dimensions of the status indicator area to fit on the page with your custom image:

  1. From the top navigation options, click Setup and then click PageWrapper Editor. The PageWrapper List page displays.
  2. From Related Actions, click Edit CustomStyle.css. The Edit CustomStyle.css page displays.
  3. If you are using a progress meter with a:
    • Vertical layout:
      1. In the edit area, enter:

           .statIndTallProgressMeterImageID#
            {width:x px;
             height:y px;}
      2. Replace ProgressMeterImageID# with the ID of the progress meter containing the image.
      3. Replace x with the number of pixels in the width of the custom image.
      4. Replace y with the number of pixels in height of the custom image.
    • Horizontal layout:
      1. In the edit area, enter:

           .statIndWideProgressMeterImageID#
            {width:x px;
             height:y px;}

           .statIndTallProgressMeterImageID#
            {width:x px;
             height:y px;}

        Note: Both styles are required for wider progress meters on the Personal Pages.
      2. Replace ProgressMeterImageID# in both definitions with the ID of the progress meter containing the image.
      3. Replace x in both definitions with the number of pixels in the width of the custom image.
      4. Replace y in both definitions with the number of pixels in height of the custom image.
  4. Click Finish. The Page Wrapper List page displays again.

If your progress meter does not display correctly or you need assistance, contact Convio Support.