You may occasionally need to apply special formatting, such as an alert box or peekaboo, to content on your pages. You’ll need to edit the HTML directly to apply these special formatting options. If you are not comfortable doing this, please ask your Publisher or IT Services for help.
In WordPress, you can usually use Panels to make certain parts of your content display or function differently. However, sometimes you need to format your content in an alert box. Also, Panels are not available for Programs. The formatting options below provide an alternative.
The following areas allow the use of alert boxes:
- Core content area
- All main pages
- Program Catalogue
- Umbrella pages
- WYSIWYG simple
- WYSIWYG column
Mark important content
The best place for your most important content is right at the top of your page or Program Overview subpage (not in a pageblock). If you need to mark a small section of content as more important, there are three options.
This blue box is calling attention to your notice. Are you really, really sure this is important and timely information? Appropriate usage might relate to information about a major change to a program. This is the default alert colour, and is consistent with Banner-generated alerts. If in doubt, choose blue.
This grey version is making a note that is worthy of the user’s attention. Have you checked that it’s not competing with other key messages on the page? Is this really the most important piece of content on the page? Appropriate usage might include highlighting a change in program requirements for the upcoming term.
This is an alternative alert to the default blue alert for a temporary-yet-important update. Appropriate usage might include information about an office closure.
You can add either option to either a single element, or a selection of them together. For each option, switch to the Text view to add the HTML.
Peekaboo (“Click to Expand/Contract” content)
The markup below will produce something similar to the Accordion Panel. Adding it to your content correctly will require significant care and attention to detail, and is best done by those with significant HTML experience. To add the Peekaboo markup:
- Add your content as usual.
- If there is not already a wrapper (a <div></div> pairing at the start and finish) around the content you want to affect, create one.
- Add class=”peekaboo” to the wrapper/div.
- Add class=”clicktoshow_off” on the initial line of text that the user would click on to show the rest. This should be inside the wrapper/div.
- Use more sub-wrappers (divs, paragraphs, etc.) to identify what you want hidden and add class=”hide” to the sub-wrappers.
Important: Don’t hide the initial line of text identified above.