Printing Web Pages

Wild Apricot can produce printer-friendly version of your web pages - both regular website pages and the pages in your administrator interface (for example, summary of members).

This function is accessed through a special icon:

Customizing the print icon

Navigate to the "Advanced Customization (CSS)" section of Wild Apricot admin interface. This section is located under the "Settings" button, in the section called "Visual Look and Feel".

Use "#idPrintLinkContainer" to customize your icon via CSS, as shown in example below:

#idPrintLinkContainer
{
  width: 100px;
  height: 100px;
  background: url(http://path_to_your_custom_icon) left top no-repeat;
}

In the example above, you will have to replace "http://path_to_your_custom_icon" with the real path of your icon.

Please note, that you have to set the "width" and "height" values properly to display your custom icon.

Customizing the print icon position

Go to the Setting/Site Settings/Global Javascript section of Wild Apricot admin interface.

To move the icon to different places on the page, copy the Javascript code below, paste it and modify as needed.

<script language="javascript" type="text/javascript">

if(window.BonaPrint != null)
{
  BonaPrint.enabled = true;
  BonaPrint.visibilityDefault = true;
  BonaPrint.iconVisibility = {  };
  BonaPrint.iconPosition =
  {
    id : 'idContentContainer',
    horizontalAlign : 'right',
    verticalAlign : 'top',
    horizontalOffset : 45,
    verticalOffset : 0
  };
  BonaPrint.textTitle = '';
}

</script>

How to attach the icon in the browser window.

• First, replace the id value with an empty value:

id : '',

• Set the icon's page position with the next two lines:

horizontalAlign : 'right',
    verticalAlign : 'top',

• You can use only "left", "center", "right" for the horizontalAlign value.
• You can use only "top", "middle", "bottom" for the verticalAlign value.

For example, the following sample will attach the icon to the top right corner of the browser window:

<script language="javascript" type="text/javascript">

if(window.BonaPrint != null)
{
  BonaPrint.enabled = true;
  BonaPrint.visibilityDefault = true;
  BonaPrint.iconVisibility = {  };
  BonaPrint.iconPosition =
  {
    id : '',
    horizontalAlign : 'right',
    verticalAlign : 'top',
    horizontalOffset : 0,
    verticalOffset : 0
  };
  BonaPrint.textTitle = '';
}

</script>

How to attach the print icon to any element on the page

You can attach the print icon only to HTML elements which have an ID.

• First, view the source code of the page (as described in the previous section).
• Find the target element ID, as shown in the example below. In this case, the page element is the Header:

• Copy and paste this ID into the JavaScript code provided. The target element ID will go in the tag called id:

<script language="javascript" type="text/javascript">

if(window.BonaPrint != null)
{
  BonaPrint.enabled = true;
  BonaPrint.visibilityDefault = true;
  BonaPrint.iconVisibility = {  };
  BonaPrint.iconPosition =
  {
    id : 'idHeaderContent',
    horizontalAlign : 'right',
    verticalAlign : 'top',
    horizontalOffset : 0,
    verticalOffset : 0
  };
  BonaPrint.textTitle = '';
}

</script>

• Now the icon will be attached to the right top corner of the Header.

Some of the more frequently used elements that you may wish to attach your icon to are the following:

• header = idHeaderContent
• content = idContentContainer
• footer = idFooterContent
• menu = idMainMenu

How to move the icon a few pixels to the right or left

To fine tune the location of the icon, use these two lines of JavaScript code:

horizontalOffset : 0,
verticalOffset : 0

For example, this will move the icon 3 pixels to the right and 7 pixels down:

horizontalOffset : 3,
verticalOffset : 7

This example will move the print icon 4 pixels to the left and 9 pixels up:

horizontalOffset : -4,
verticalOffset : -9

Hiding the print icon

How to hide the icon on all pages

To hide the icon on all pages, change the following line:

BonaPrint.enabled = true;

to this:

BonaPrint.enabled = false;

and copy and paste the result into Global Javascript block as described in the previous section.

How to hide the icon on certain pages

You can hide (or show) the icon on only certain pages. To do so the following lines of code will need to be changed

BonaPrint.visibilityDefault = true;
BonaPrint.iconVisibility = {  };

First you have to find the ID of the page where you want to show or hide the print icon.

• Right-click on the page in any place and choose "View source" from the menu.

• Find the line of code starting with <body id=', as in the example below:

<body id='PAGEID_1205' class='publicContentView '>

• Use this page id in your code to show or hide the icon.

The following example will HIDE the icon on all pages, except the page with id='PAGEID_1205':

BonaPrint.visibilityDefault = false;
BonaPrint.iconVisibility = { 'PAGEID_1205' : true };

• The following will SHOW the icon on all pages, except the page with id='PAGEID_1205':

BonaPrint.visibilityDefault = true;
BonaPrint.iconVisibility = { 'PAGEID_1205' : false };

• This will SHOW the icon on all pages, except the two pages with id='PAGEID_1205' and id='PAGEID_1299' :

BonaPrint.visibilityDefault = true;
BonaPrint.iconVisibility = { 'PAGEID_1205' : false, 'PAGEID_1299' : false };

How to change the title of the print icon

When you hover your mouse pointer over the print icon, a small piece of text will display. This contains descriptive information about the image. 

To change the text that is displayed, use the following piece of code:

BonaPrint.textTitle = 'Some title';

This will change default title "Print" to "Some title"