- Engage C&M
- Brand
- Campus Communications
- Media & News
- Social
- Web
- Events Calendar
Page Types
Page types are templates to assist in building your website layout and navigation. Each SFU-branded template contains default elements such as a header, a navigation bar, and a footer. Some pages are available for specialty content like news pages, faculty profile and blog pages.
For more information about creating a new page see Basic Authoring.
Pop Up Page
Desktop
The pop-up page is a template used for the pop-up feature. It has no header, footer, or navigation but is reserved only for the body content of the pop-up window. The pop-up page is an external window that appears on top of your page when the user clicks a link or on page load. This can be used to preview a more detailed image from a thumbnail or as alerts for emergencies or special notices.
Mobile / Tablet
In mobile view, the pop-up window will include a close button at the bottom of the window, and an “x” at the top right.
How to
1. Set up pop-up page
- a. Select New Page and choose Pop-up Page from the list of templates
- b. Open the page in the Editing Window
- c. If using the pop-up page for Alerts, place all components inside a Column Control Component first
- d. Add components and content as needed
2. Set up pop-up Link
a. To open your pop-up page through a link, set up your pop-up link.
- Navigate to the page that will contain the link to open the pop-up page
- Add a text component and create the text for your link
- Highlight the text and click the Hyperlink button
- Click the magnifying glass button to navigate to the pop-up page you created in step one and select ok
b. Add “sfu-popup” to the HTML Link
- Click on the Source Edit button to modify the source code
Search for the href portion of the link,
<a href="/content/sfu/mydept/popuppage.html">
Add a class="sfu-popup" to the link
The final link example:
<a href="/content/sfu/mydept/popuppage.html" class="sfu-popup">
3. Set up Alert pop-up
a. To set up an alert pop-up you will need to use the HTML component.
- Add HTML component to your page
- Add the following code:
<div class="alert-box section">
<a href="<relative path to alert page>" class="sfu-popup alert"></a>
</div>
For example:
<div class="alert-box section">
<a href="content/sfu/cms.html" class="sfu-popup alert"></a>
</div>
- To disable the alert, remove the word "alert" from the HTML component so it reads:
<div class="alert-box section">
<a href="content/sfu/cms.html" class="sfu-popup"></a>
</div>
