The old method of text resizing will no longer work in Easysite 7. If you feel it is necessary to include text resizing options (see our web accessibility page for why it might not be) then you must now use a style element.
In Easysite 6 text resizing was managed via a querystring which set an inline size on the <body> tag. In Easysite 7 the resizing is still managed via the <body> tag, but in a different way. The style element sets one of a range of classes on the <body> tag, and it is up to the integrator to specify what size relates to those classes. It is implemented using Javascript, and is persisted in a cookie. The duration of the cookie can be altered via the style element parameters.
At its most basic level the text resizing can be implemented with the following line:
<%= StyleElement("TextSize") %>
This will render a series of text resizing links on the page using the element's default settings:
<div class="sx-element sx-fnt-size">
<ul id="sx-anchors">
<li id="sx-fnt-larger" class="sx-fnt-size-item sx-fnt-larger" id="sx-fnt-larger">
<a href="#">+</a>
</li>
<li id="sx-fnt-regular" class="sx-fnt-size-item sx-fnt-regular" id="sx-fnt-regular">
<a href="#">Regular</a>
</li>
<li id="sx-fnt-smaller" class="sx-fnt-size-item sx-fnt-smaller" id="sx-fnt-smaller">
<a href="#">-</a>
</li>
</ul>
</div>
Clicking the + link will add the class .sx-font-large to the body tag. Each time the + link is clicked it will insert an additional x- into the class name (though this depends how many levels of resizing are allowed by the element. This is one of the configurable parameters).
So the accompanying CSS to make this work would look something like:
/* increase */
body.sx-fnt-large { font-size: 1.25em; }
body.sx-fnt-x-large { font-size: 1.5em; }
body.sx-fnt-x-x-large { font-size: 1.75em; }
/* decrease */
body.sx-fnt-small { font-size: 0.7em; }
body.sx-fnt-x-small { font-size: 0.6em; }
body.sx-fnt-x-x-small { font-size: 0.5em; }
By adding further parameters to the Style Element many of the settings can be altered. There is even an option to set ScriptOnly. You can then add your own text resizing links - ensuring that the class names match up with the Style Element so that everything joins up and works. This can be especially useful if you want to use images rather than text for the links.
See below for a full list of possible parameters, and their default values.
| Property | Default | Description |
| TextSizeLevels | 5 | The maximum levels including zero. Defaults to 5 which means, 2 up levels, 2 down levels, and zero to reset. Each level after the first will have “x-“ appended to the class name. E.g sx-fnt-x-x-x-x-large. |
| ClassNamePrefix | sx-fnt- | This is the prefix for the class names that are applied to the body and list items. |
| CookieName | ESTextSize | Name of the cookie which holds the current text size level. |
| CookieDuration | 5 | The expiry date of the cookie in days. A value of 0 (zero) will create a Session cookie. |
| TextSizeUpId | sx-fnt-larger | The element id of the button that will be used to increase the text size |
| TextSizeResetId | sx-fnt-regular | The element id of the button that will be used to reset the text size |
| TextSizeDownId | sx-fnt-smaller | The element id of the button that will be used to decrease the text size |
| Long_String_* | | The ‘title’ attribute of the link. Long_String_Larger , Long_String_Regular, Long_String_Smaller . It will not render the ‘title’ attribute by default. |
| String_* | +, Regular, - | The rendered text of the link. E.g as above, String_Larger can be specified to set the link text. |
| AttachToClass | 0 | Attaches click handlers to classes so that multiple buttons can be used. By default, it will only attach to a specific element Id. |
| ScriptOnly | 1 | Does not render any [X]HTML mark-up. Only outputs the scripts to load the external JavaScript file. This is to allow custom mark-up (e.g. with images) for the buttons. |
| LoadDynamically | 0 | This option specifies whether the external JS file is dynamically injected into the <head> tag or rendered inline. |
| | | |
Text Resizing parameters
Remember that the ";" (semicolon, not a comma) character is used to separate the properties.So to use some of these parameters you would alter the Style Element to read something like:
<%= StyleElement("TextSize", "TextSizeLevels=7;ScriptOnly=0")%>
