Instructions for SSFlex

Getting Started

What is MODX?

MODX is a web-based Content Management System (CMS) that allows you to manage the content of your site. See our MODX Glossary for terminology used throughout your dashboard.

Browser Support

All of our sites are designed to work in Penn’s current supported computing products.

How Do I Log In?

*Login requires a PennKey.

  1. Go to the site manager URL:
    • If your site is in development, go to: https://cmsdev1.pmacs.upenn.edu/SITENAME/manager/
      *update SITENAME with your account name​​​​​​​
      • Note that, in order to edit the site in development from outside the United States, you will need a PMACS account and access set up via Pulse Secure. If you don’t already have that, please submit a ticket or call 215-573-INFO to get setup. 
    • If your site is live, go to: http://www.med.upenn.edu/SITENAME/manager/
      ​​​​​​​*update SITENAME with your account name
  2. Enter your PennKey credentials and click “continue with PennKey” to proceed to the dashboard.

Dashboard

What is the Dashboard?

MODX dashboard
Example of the MODX dashboard 

The dashboard is the user interface when you login to manage your site. It is organized with information about your site and includes resources to help manage your site. The dashboard includes the following:

  • a top menu bar
  • a lefthand side box with Resources and Files tabs
  • the publisher dashboard on the right with Manager Quick Start, Custom Instructions, Recently Edited Resources and Who’s Online sections

Top Menu Bar

The menu bar along the top of your window will appear on every page in your MODX manager view.

MODX publisher top menu bar
From left to right: MODX logo, site title, search, content, media and publisher

The menu bar includes the following:

  • MODX Logo: click to navigate back to the dashboard you first see when you log into the manager.
  • Site title: the site name/title is displayed next to the MODX logo.
  • Search: click the search icon that displays a search form to search resources by page title.
  • Content: includes quick links to New Resource and Preview Site.
  • Media: includes Media Browser, the file library.

Resources & Files

MODX resources tree tab
An example of the Resources tab in the lefthand box in MODX.

On the lefthand side of your dashboard, there is a box with tabs for Resources and Files (see image to the right). It is included on every page in your MODX manager view.

Resources

The Resources tab displays icons that are quick links to create/delete a resource and a list of all the resources on your site in the order it displays in the navigation and breadcrumb. In the list of resources, the following information can be gathered about each resource at a quick glance:

  • the resource ID# - an auto-generated unique identifying number displayed in parenthesis
  • the type of resource which can be identified by the icon in front of the resource title:
    • file icon is a document
    • link icon is a weblink
    • file icon with 3 lines is a static resource
    • house icon is the home page
    • 3 cogs icon is the Global Settings page
    • down caret & folder icon is a container with nested page(s)
      • Note: if there is no down caret and just the folder icon, the resource is set as a container with no nested page(s)
  • the status of a resource
    • lighter grey text is a resource that is hidden from the navigation menu
    • italicized text is a resource that is not published
    • red and has a strikethrough text is a resource in the deleted state, ready to be permanently deleted
Files

The Files tab allows you to view all files uploaded to the file system at a quick glance. You can quick upload, rename, download, or delete files by contextual clicking (right-click or Ctrl + Click) directly in the Files tab. To manage the full library of media files, navigate to the top menu bar under Media and go to Media Browser.

Note: All files should be uploaded into the appropriate directory (documents, images, secure)

Publisher Dashboard

The publisher dashboard is the main section, right of the Resources and Files tabbed box and below the top menu bar. It includes the Manager Quick Start, Custom Instructions, Recently Edited Resources and Who’s Online sections.

To view the publisher dashboard, click the MODX logo.


Media Files

File Types & Size Limit

  • Allowed file types for documents: .doc, .docx, .ppt, .pptx, .pdf, .txt, .xls, .xlsx
    • Note: Recommended document format is a PDF file so that the user cannot make any edits or “copy” the information.
  • Allowed file types for images: .jpg, .jpeg, .png, .gif
  • Max file size: 5MB (the larger the file size, the longer it takes to load on your webpage)

Manage File(s)

Manage files by uploading, renaming, deleting them in the Media Browser, located under Media in the top menu bar.

Upload File(s)

Make sure to upload all files in the appropriate directory: documents, images and secure (PennKey-protected). If you need to upload a file that is beyond the maximum file size allowed, contact us to request a quota increase. Keep in mind, however, that this is a server that provides pages for hundreds of users and departments, and that we have other servers, like media3, that are optimized to host large files. It may be better to get an account on that server instead, or to use Penn+Box.

To upload file(s) in the Media Browser:

  • Click the upload icon at the top lefthand corner OR contextual click (right-click or Ctrl + Click) on the directory you want to upload your file to and select Upload Files.
  • The upload pop up window will appear. Either drag and drop your file(s) into the window from your computer OR click Choose File(s) and select your file(s) to upload.
  • Once all file(s) are selected, they will display as a list.
  • Click Upload to upload added file(s) in the pop up window.
  • When upload is successful, a confirmation message “Upload Successful!” in green will appear next to each uploaded file.

Rename File(s)

To rename a file:

  • Contextual click (right-click or Ctrl + Click) on file.
  • Select Rename.
  • Edit name and click Save.

Tips for naming files

  • Use a descriptive name.
  • Use – or _ between the words. For example: ioa-pilot-grants-announcement-2012.jpg.
  • Do NOT use spaces within a file name.
  • For images only: include unique descriptive ALT tag.

Delete File(s)

To delete a file:

  • Contextual click (right-click or Ctrl + Click) on file
  • Select Delete File. A warning pop-up window will appear.
  • Click Yes. If you still see the file, refresh your page.

Note: Once you delete a file, it is permanently gone from your file system.

Edit Image(s)

Edit/crop images before uploading to the images directory within the file system. All images in richtext areas should be edited before including on your site. Images with set sizes include a built-in cropping tool and do not need to be cropped beforehand.

For photo-editing tools suggestions, go to Manager Quick Start in your publisher dashboard and click the Photo Editing button.


Resources

MODX resource tree with examples of resource types and status
Sample resource tree tab with the various resource types and statuses

Resource ID#

The resource ID# is the unique identifier assigned to each resource. This ID# is used when you link to a page within your site.

Resource Types

A resource is a representation of a page in MODX and there are 3 types of resources you can create on your site.

  • Document: basic webpage, most commonly used
  • Weblink: link to an external website
  • Static resource: link to a PDF or Word Document file

Other types

  • Container: a folder/container
    • Note: if there is a down caret along with the folder icon, it indicates you can toggle the container open/close to see/hide nested page(s)

These resource types are specific to the navigation. For example, you would only use a static resource to add a navigation item that is linked to a PDF.

Status of a Resource

  • lighter grey text is a resource that is hidden from the navigation menu
  • italicized text is a resource that is not published
  • red and has a strikethrough text is a resource in the deleted state, ready to be permanently deleted

How to Create New Resources

MODX resource tree tab
MODX Resource tree tab example

In the Resources tab, there are icons that are quick links to create any one of the 3 types of resources (see image to the right). Each resource type has specific fields for the content type. See instructions for each resource type below.

Document Resource

To create a new document, a web page:

  • Click the paper icon in the Resources tab.
  • Fill in fields for the document
  • Click Save.

To create a new weblink:

  • Click on the link icon in the Resources tab.
  • Add title, resource alias and set Uses Template to ‘(empty)’ (*required).
  • Weblink: copy and paste the URL of the desired linked website.
  • Click Save.

Static Resource

To create a new static resource:

  • Click on the file icon in the Resources tab.
  • Add title, resource alias and set Uses Template to ‘(empty)’ (*required).
  • Static Resource: click on file icon (far right) to navigate your file system and select your PDF file.
  • Switch to the Settings Tab, go to the Content Type dropdown and select PDF or Word Document.
  • Click Save.

Duplicate an Existing Page

To duplicate a page:

  • Go to the page you wish to duplicate.
  • At the top right, click Duplicate next to Save.
  • A box will appear asking if you want to duplicate this page, click Yes.

There are 2 identical pages with the newly duplicated page highlighted with a new ID# in the Resource tree. The duplicate document will appear on your screen with no value for the resource alias. Update the resource alias along with additional changes and click Save.

Delete a Page

To delete a page:

  • Contextual click (right-click or Ctrl + Click) on the resource title in the Resources tab
  • Click Delete.
  • A pop-up menu will display asking if you are sure you want to delete. Click Yes.

The page title will now display as red strikethrough text in the Resources tab to reflect the deleted state. The deleted page is no longer published and cannot be edited but it is also not permanently deleted yet.

How to Recover a Deleted Page

A deleted page that is found in the Resources tab in red strikethrough text is not permanently deleted and can be recovered. To recover the page:

  • Contextual click (right-click or Ctrl + Click) the page.
  • Click Undelete.

How to Permanently Delete a Page

To permanently delete page(s) in the deleted state with red strikethrough titles in the Resources tab:

  • Click the trashcan icon in the Resources tab.
  • A list of resources ready to be deleted will appear In the Trash Bin tab.
  • To delete select resource(s), select the resource(s) you want to delete, click ‘Bulk Action’ dropdown and click ‘Purge selected resources’.
  • To delete all resources listed, click ‘Purge all’.

Page Reorder

The reordered list will reflect in your site navigation and breadcrumb.

To reorder pages:

  • Go to the Resources tab to the list of resources on your site.
  • Click, hold and drag any page up or down to reorder.

Container(s) & Nested Page(s)

Your site navigation can be organized with nested/child page(s), which is a second level of navigation, also called submenu.

A navigation item that has nested pages, a submenu, are called containers or parents. Containers/parents are not pages themselves but categories that hold the nested pages.

How to Create a Container (Parent)

To create a container:

  • Create a new document
  • Add a title, resource alias, set Uses Template to ‘(empty)’ and  check Published so the nested page(s) are visible in the browser
  • In the Settings tab, check the box that says Container to indicate it is not a web page and just a container navigation item with nested page(s).
  • Click Save.

A resource that is a container can be identified in the Resources tab with a folder icon infront of the resource title. If the container has nested page(s), it will also have a caret icon infront of the folder icon as well.

Auto-generated Container Overview Pages

If a page is a container that has Uses Template field set to “Subpage Template” and content, the content will display as a separate page that is autogenerated and by default called “Overview”.

Follow steps in How to Create a Container (Parent) and set Uses Template to “Subpage Template” along with content to the container page. Remember to make all edits to the Overview page content directly in the Container page.

How to Add Nest (Child) Page(s) to a Container

In the Resource tab, reorder the child page to be nested in a container. Be sure to directly place the child page on the container, not below.

Any resource that is a container with nested page(s) will display a down caret, folder icon and resource title. The caret icon allows you to toggle the container open and close to view or hide all the nested page(s)


Page Properties (Document & Settings Tabs)

Document Tab

The Document tab is the default tab view with most of the page properties and all features available to the template set are located here. Be sure to fill in values for all the required fields in order to save the page.

Title

The Title field is a required field on all resources and is used as the main page title.
The Title populates:

  • The title displayed in the Resources tab
  • Default page title at the beginning of the page content, unless the Long Title is specified
  • Title displayed in the navigation, unless the Menu Title is specified
  • The title displayed in the browser tab

Long Title

This is an optional textfield to display a different page title than the Title. If the field is left blank, the Title will display as the page title by default.

Uses Template

Uses Template is a required field that allows you to set a template for your page, applying the site design and included features specific to the template. It is a required setting on all pages except the Global Settings page and the Home page. The Uses Template field is not available on the Global Settings and Home pages as they each have a unique template that is exclusive to these pages and set on the pages already. You may have more template options depending on the design of your site. Additional templates would be included in the custom instructions found on the dashboard.

Description (Meta Description)

The Description field is a page-specific meta description used in search listings. The description should be a brief summary of the web page. This field is set per page and is optional.

The Menu Title is an optional field that allows you to display a different title for the page than the Title in the navigation. It is commonly used to display a shorter title in your navigation. If the field is left blank, the Title will display in the navigation by default. For example, a page title like ‘About the Institute for Translational Medicine and Therapeutics’ can have the Menu Title ‘About Us’ for the navigation.

Hide From Menus

The Hide From Menus checkbox determines if the page should display or be hidden in the navigation. Any resource with Hide From Menus checked will be lighter gray in the Resources tab view.

Published

The Published checkbox determines the page visibility on the web. Any resource with Published checked can view the page in the browser. When a page is unpublished and does not have Published checked, the page in the Resource tab will be italicized.

Content

The Content area is the richtext area where all the main content of your page is included. 

Settings Tab

There are only a few properties for your web page to set in the Settings. All other fields/checkboxes should be left alone. Here is a list of properties on the Settings tab:

  • Parent Resource: manually set a web page to be a nested/child page of a container.
  • Resource Type: set which type of resource you are using: document, weblink, static resource, symlink.
    • For all documents, it should be set to HTML and this is the default value.
    • For static resources, it should be set to PDF or Word Document.
  • Published On: by default, this field gets auto-populated by the date and time that the page is created
  • Publish Date: option to set a date for the page to be published and go live
  • Unpublish Date: option to set a date for the page to be unpublished and not accessible on your site
  • Container: check the checkbox set the page as a container with nested page(s)
  • Searchable: check/uncheck the checkbox to show/hide the resource from appearing in the sitemap

Managing Content using a Rich-Text Editor

Rich-Text Editor Toolbar

In the Content area, the richtext editor includes a toolbar above the content area box.

CKEditor Toolbar
Rich-Text Editor Toolbar
First row: cut, copy | undo, redo | link, unlink, anchor | image, youtube, table, horizontal rule, special characters, iframe | search, replace, select all, spell check | show blocks
Second row: bold, italic, underline, subscript, superscript | remove format | numbered list, bulleted list | decrease indent, increase indent | blockquote | paragraph format | styles

 

Copying and Pasting Content

Copying and pasting content from other programs is a common practice. When copying/pasting content, styles get copied over as well. To ensure that all styles are removed to keep styles consistent with the site design, follow these steps: 

  • Copy and paste into the Content richtext area
  • Manually highlight or select all of the pasted content
  • Click the button to remove format on text (see 8.1 Rich-Text Editor Toolbar image)

Page Structure using Headings

Heading styles are used to structure your content and create hierarchy of information. All other content that is not a heading should use Normal to display as paragraph text. For more information, go to the Typography Tips page.

In the toolbar under the Format dropdown, you can find the following paragraph format options: Normal, Heading 2, Heading 3, Heading 4, Heading 5 and Heading 6.

Styling Content

Basic Content Styles

Common text styles included are bold, italic, subscript and superscript. We strongly suggest not to use underline as it can
be identified as a link. For more information, go to the Typography Tips page.

Blockquote

Highlight quotes by using the blockquote style.

  • Highlight blockquote text.
  • Click the double quote icon in the toolbar (see 8.1 Rich-Text Editor Toolbar image).
  • Click Save and preview the page to view the blockquote styled.

8.4.3 More Styles

All additional styles would be located in the Styles dropdown (see 8.1 Rich-Text Editor Toolbar image).
To apply a style:

  • Highlight text to apply a style.
  • Click on Styles dropdown and select style to apply.
  • Click Save.

Available styles: Depending on the highlighted text, style options that are applicable will display.
For example, the button style would only appear in the dropdown if the selected text is a link.

  • Computer code: style any block of text as code
  • Button: style any link as a button
  • Two-Column List - Bulleted: style a bullet list to display in 2 columns
  • Two-Column List - Numbered: style a numbered list to display in 2 columns

Lists

Numbered and bulleted lists are available in the toolbar. To create a sub-item within the list, use increase indent or the Tab key on your keyboard. To decrease indent, click the left arrow in lines icon or SHIFT+Tab.

  • Highlight the word(s) you want to link.
  • In the Resources tab on the lefthand side, locate the page you want to link to.
  • Click on the page, drag and drop the page onto the highlighted word(s) in the content area.

When linked successfully, a little green checkmark will appear and the word should change to blue with an underline.

To manually link a word to a page within your site:

  • Highlight the link word(s).
  • Click the link icon in the toolbar and the link pop-up window will appear.
    Set the following:
    • Link Type: URL
    • Protocol: <other>
    • URL: * Replace ID# with resource ID# (see 5.2 Resource ID#)
  • Click OK and the word should be linked properly.
  • Highlight the link word(s).
  • Click the link icon in the toolbar and the link pop-up window will appear. 
    Set the following:
    • Link Type: URL
    • Protocol: http://
    • URL: go to the site you want to link to in your browser, copy and paste into the textfield
  • Click OK and the word should be linked properly.
  • Highlight the link word(s).
  • Click the link icon in the toolbar and the link pop-up window will appear.
    Set the following:
    • Link Type: URL
    • Protocol: <other>
    • Click Browse Server and navigate the file system to select your file
    • URL: this will be auto-populated once you select your file using Browse Server
  • Click OK and the word should be linked properly.
  • To link to an email:
  • Highlight the link word(s).
  • Click the link icon in the toolbar and the link pop-up window will appear.
    Set the following:
    • Link Type: E-mail
    • E-mail Address: include email address
    • Message Subject: this field is optional, include a pre-populated message subject as needed
    • Message Body: this field is optional, include a pre-populated message subject as needed
  • Click OK and the word/email address should be linked to an email.
  • Highlight the link word(s).
  • Click the link icon in the toolbar and the link pop-up window will appear.
    Set the following:
    • Link Type: URL
    • Protocol: <other>
    • URL: tel:+1-215-000-0000 (replace number with real phone number)
  • Click OK and the word or phone number should be linked to a phone number. On mobile devices, this will provide the option to call the linked number.

In-page anchors can be added to the content of your page to word(s) can then be linked to the anchor on the page.

To create an anchor:

  • Click your cursor in the content to the location where you would like to add an anchor. It is usually created for subsections within the page.
  • Click on the Anchor icon in the toolbar which looks like a little flag.
  • Name the anchor something meaningful so it can be easily identified when you are linking to it.
  • Click OK and a red flag will appear to indicate the anchor.

Link word(s) to anchor on the same page:

  • Highlight the link word(s) and click on the link button. A pop-up window will appear.
    Set the following:
    • Link Type: “link to an anchor in text”
    • By Anchor Name: select the anchor name you want to link to
  • Click OK and the word should be linked to the specified anchor on the page.

Link word(s) to anchor on a different page within your site:

  • Highlight the link word(s) and click on the link button. A pop-up window will appear.
    Set the following:
    • Link Type: URL
    • Protocol: <other>
    • URL: #anchorname
    • Replace ID# (see 5.2 Resource ID#) and anchorname with appropriate values
  • Click OK and the word should be linked to the specified anchor on the page.

Images

Add an Image

To add a new image to your content area:

  • Click on the Image button in the toolbar and a popup window will appear.
    Set the following:
    • Add image: click Browse Server next to URL to navigate through the file system to select your image. Make sure the image is already uploaded to the /images directory.
    • Alternative Text: add a short description for the image. This is important for accessibility as screen readers will read the alternative text to describe the image on the web page
    • Alignment: align your image left, center, right, or none
    • Captioned image: check to include a caption, a caption box will appear in the content area once you close out of the pop-up window.
    • Click OK and you should see the image in the Content area.
  • If you included a caption, update text.

Crop an Image Using Image Cropper

*This is a new feature in SSFlex added in February of 2021.
Contact us at psom-somweb@pennmedicine.upenn.edu to request this feature.

To crop an image using the image cropper tool:

  • Right click your image and select Crop this Image
  • Choose the Target Image cropping size (Thumbnail, Medium, Large, Full Width, Free Crop)
  • Click Crop to preview your cropped image and then click Save.

Link an Image

To link the image:

  • Select image in the Content area or follow instructions to add an image first and then select image.
  • Click the link button in the toolbar.
  • Set the type of link for the image and link. 

YouTube

Find YouTube video embed code OR URL. Both methods work to include a YouTube video.
To find the embed code and/or URL:

  • Go to YouTube and locate your video.
  • Below the video, there is an option to Share. Click Share. A pop up window will appear.
  • Copy the URL OR click Embed and copy iframe code provided.

Add YouTube video to your page:

  • Go to your page in the site manager and click in the Content area where you would like to add your video.
  • Click the YouTube button (see 8.1 Rich-Text Editor Toolbar image). A pop up window will appear.
  • Paste the copied URL or embed code in the appropriate fields.
  • Make sure Make Responsive is checked.
  • Click OK and the video should display in your Content area.

IFrame

Embed content using a URL such as a DCI list or a Vimeo video using the iFrame tool.
To add an iframe:

  • Click the IFrame button in the toolbar, which looks like a globe (see 8.1 Rich-Text Editor Toolbar image).
  • Include iframe content with the URL.
  • Click Save.

Tables

To add a table:

  • Click the Table button in the toolbar.
  • Click ‘more’ at the bottom of the box. A pop-up window will appear.
  • Add your table properties by specifying the number of rows, columns and headers as needed.
  • Make sure to keep the width and height empty so the table is responsive.
  • Click OK. An outline of the table will appear in the Content area and as you enter content, the cells will expand. 

Additional Tools 

There are additional tools available to you. Here are some of the tools listed below:

  • Cut
  • Paste
  • Undo
  • Redo
  • Horizontal Rule
  • Special Characters: characters and symbols
    (!#$%)
  • Find & Replace
  • Select All
  • Spell Checker
  • Show blocks: visually defines each
    element such as
    paragraph, table,
    image etc. 

How to Secure Files and Pages

Pennkey Protected pages and files are viewable only to users with a PennKey username and password.

PennKey Protect a Page

To PennKey protect a page:

  • Go to the page you want to PennKey protect.
  • In the Resource Alias textfield, add ‘secure/’ before the alias name given i.e. secure/contact.
  • Click Save.

When the viewer tries to view the page, the PennKey log in page will appear. When they enter their Pennkey credentials, they will be able to view the page.

PennKey Protect a File

The file MUST be in the ‘/secure’ directory before you link it on your webpage, otherwise it will not be protected.

To PennKey protect a file:

  • Go to your Media Browser.
  • Upload your file to the ‘/secure’ directory to PennKey protect. If the file has already been uploaded, locate the file and drag that file into the secure directory.
    • Note: If you are moving a file from a directory, make sure you relink to the file on your webpage with the updated file location.

Version Control

Versions allows you to view, compare one version to another and revert to a previous version. In the Versions tab, there is a list of every saved version of your resource with a version number, date, and editor.

To revert to a previous version you have identified in the list of versions:

  • Contextual click (right-click or Ctrl + Click) and click Revert Resource to Version # to revert to version.
  • A pop up window ‘Are you sure?’ will appear. Click Yes to revert, No to cancel.
  • When the page has reverted successfully, a success message at the top right will appear to confirm the change.

To view a previous version:

  • Contextual click (right-click or Ctrl + Click) and click View Version Details.
  • The page will reload with details, organized into tabs. Look through page details.
  • Once you are done viewing the details and want to revert to the version, click Revert Resource OR click Back to Resource to go back to the page.

To view a comparison of 2 versions:

  • Contextual click (right-click or Ctrl + Click) and click View Version Details. on the first page you want to view.
  • On the details page, click Compare To dropdown and select the second version to do the comparison. You will be able to see each version detail side by side.
    • Note: The first version in the dropdown is the current version of the page.
  • Take a look at the difference(s) between the 2 versions.
  • If you are ready to revert to the selected version after reviewing the details, click Revert Resource dropdown and select the version you want to save.
  • Click Back to Resource to go back to the page and click View to preview page.

Global Settings

Global Configurations

Google Analytics Tracking ID

Visit the Google Analytics website for more information on generating and using a Google Analytics Tracking ID.

Site Theme

Themes are customizable design options. The theme that you wish to set for your site is chosen here.

Site Theme Color Palette

Color palettes specific to each theme are listed and chosen here. Different palettes are available depending on which theme you have chosen.

NOTE: When changing your theme, the color palette options get reset to "- Choose One -". In order for your site to render properly in the browser, an explicit theme and color palette must be chosen; the options cannot be left on "- Choose One -".

Heading/Body Font

The heading/body font that you wish to set for your site is chosen here. Take a look at the font pairings that are currently available.

Heading/Body Size

The heading/body size that you wish to set for your site is chosen here. The current options available include:

  • Small
  • Normal (Recommended)
  • Big

This option allows you to show/hide the site search functionality globally on your website. If chosen to display, it will appear in the upper right hand corner of your site.

This option allows you to choose which navigation structure you would like to use globally on your website. The current options include:

  • Horizontal (Above Banner)
  • Horizontal (Below Banner)
  • Vertical
  • Hidden
  • None

Global Information Location

This option allows you to choose where you would like the global information to be display on your website. The current options include:

  • Sidebar
  • Footer

Sitemap

This option allows you to show/hide the sitemap globally on your website. If chosen to display, it will appear in the copyright at the bottom of your site.

Global Information

Optional Tagline

This information is optional. If added, this will appear under your site title, globally. (Max Length = 50 characters)

Global Information Options

This option allows you to choose which sections you would like displayed globally, throughout your site. The current options available include a combination of the 3 following sections:

  • Contact Us (Required)
  • Social Media
  • Links of Interest

Department/Center Address

This field should be used for adding your department’s address. To create new lines in the address, simply hit Enter/Return.

Phone

This field should be used for adding your department’s phone number. Enter the number in the following format: 555-555-5555

Email

This field should be used for adding your department's email address. Enter the email address using the following format: departmentname@pennmedicine.upenn.edu

This field should be used for including a link for directions to your location.

Social Media

Add up to 7 links to your social media/syndication accounts. The current options available include:

  • Facebook
  • Flickr
  • LinkedIn
  • Instagram
  • Publications
  • Twitter
  • YouTube

To manage this section: 

  1. Click the “Add Link” to add a new social media or click “Edit” on an existing social media. 
  2. Edit or fill out the following fields:
    1. Icon: Choose an icon from the dropdown
    2. URL: Copy and paste the direct URL into the “URL” field. NOTE: If you do not provide a URL in the “URL” field, your link will not appear on your site.
    3. Text: Enter your desired text in the “Text” field
  3. Click Done.
  4. Save the resource.

Add up to 7 links of interest on your site.

To manage this section: 

  1. Click the “Add Link” to add a new link or click the “Edit” on an existing link
  2. Edit or fill out the following fields:
    1. Link Title: Enter your desired text in the “Link Title” field
    2. URL: Copy and paste the direct URL into the “URL” field. NOTE: If you do not provide a URL in the “URL” field, your link will not appear on your site.
  3. Click Done.
  4. Save the resource.

Homepage Template

Home Icon Chunk

Home Icon

The homepage can be represented by a home (house) icon in the site navigation by using a small "chunk" of code as the Menu Title for the homepage. To use this option:

  1. Edit the homepage
  2. Paste the following code into the Menu Title field

[[$icon-home]]

If you would like to use the pagetitle in the navigation, delete the home icon code from the menu title field.

Up to 5 images can be added to the banner on the homepage. If multiple images are added, the first 5 in the list will be displayed in a slideshow. Leave empty or remove existing images for no banner.

To manage this section:

  1. Click "Add Image" or "Edit" on existing image
  2. Edit or fill out the following fields:
    • Image: Upload or choose an existing image from your images folder by clicking the “image file” icon in the first field
    • Alt Text: Add alt text in the “Alt text”  field for accessibility and search engine optimization.
    • Caption: Optionally add a caption for your image.
  3. Click Done.
  4. Save the resource.

Announcement

Announcement Location

Choose to display the announcement above the main page content, below the main page content, or not at all.

Announcement Heading

Add an optional heading for your announcement

Announcement Content

Add your main announcement content here.  

Events

Events Source

Choose Manual Events, Events Calendar, or None from the dropdown.

Events Title

Add a heading for the Events Section. If left empty, the word “Events” will display as the heading by default.

Event Options

Manual Events

This Template Variable will display if  “Manual Events” is chosen as the Events Source.  Up to 3 events can be added to this section. To manage your events manually:

  1. Click “Add Event” or "Edit" on the existing event
  2. Edit or fill out the following fields:
    • Title: Add an Event Title
    • Title Link: Add a Title Link. NOTE: Add a link to more information about the event item, if available. This link will only appear if you have added a title for this item.
    • Date: Optionally add a date for the event
    • Description: Optionally add a description for the event.
  3. Click Done.
  4. Save the resource.
Events Configuration

This Template Variable will display if "Events Calendar" is chosen as the Events Source. The first 3 upcoming events that match your configuration will be displayed. To add your PSOM Calendar events:

  1. Contextual-click or right click on the configuration, and choose "Edit"
  2. On the "Groups" tab, click "Add Item" to add the calendar group(s) that you would like to include on your site
  3. If you would like to limit the included events to events tagged with certain keyword (or keywords), add those on the "Keywords (Tags)" tab
  4. If you would like to limit the included events to events in a certain Event Type category, choose those on the "Event Types" tab
  5. Click "Done"
  6. Save the resource.
Events URL

Enter a URL for site visitors to view more events. For example, this can link to your PSOM or Google Calendar, or a specific page on your site.

News

News Source

Choose Twitter, RSS, Manual News, or None from the dropdown.

News Title

Add a heading for the News Section. If left empty, the word “News” will display as the heading by default.

News Options

Twitter Username

This Template Variable will display if  “Twitter” is chosen as the News Source. Enter your twitter username to pull news from twitter. 

News RSS Feed URL

This Template Variable will display if  “RSS” is chosen as the News Source.  Enter the URL of the RSS feed that you wish to display.

Manual News

This Template Variable will display if  “Manual” is chosen as the News Source. Up to 3 news items can be added to this section. To manage your events manually:

  1. Click “Add Event” or "Edit" on the existing news item
  2. Edit or fill out the following fields:
    • Title: Add an News Title
    • Title Link: Add a Title Link. NOTE: Add a link to more information about the event item, if available. This link will only appear if you have added a title for this item.
    • Date: Optionally add a date for the news item
    • Description: Optionally add a description for the event.
  3. Click Done.
  4. Save the resource.
News URL

Enter a URL for site visitors to view more news. For example, this can link to your Twitter page or a specific page on your site


Subpage Template

See the banner section mentioned above.

Announcement

See the announcement section mentioned above.

Show Sidebar?

Choose Show or Hide from the dropdown in order to show/hide a sidebar on this page.

Use this Rich Text Editor to enter the content that you would like to be displayed in the sidebar.

Special Features

The special feature Template Variable allows you to choose which special feature you would to appear on the page that you’re editing. Up to one special feature can be selected per page. Each special feature option available to you will be explained in detail in the upcoming sections.

Accordions

The accordion feature allows you to organize large amounts of information into neat dropdown menus with a title and corresponding content that can be hidden. This feature is helpful when you have a lot of information that needs to stay organized and readable. It also is a great way to categorize your information so that a user can get to the content they are looking for faster. 

Table of Contents

Choose to display a table of contents that includes each accordion section heading or accordion item title.  This Table of Contents is an autogenerated list of anchor links that appears above the accordions on the page.

Accordions (Content)

Manage your accordions

To add a new accordion item:

  1. Click "Add Accordion Item" 
  2. Update the following fields:
    • Heading (optional): used to create a heading above the accordion item
    • Title: clickable text to expand the hidden content to view
    • Non-hidden Description (optional): introductory content that will appear below the Title and remain visible
    • Hidden Content: content that is visible only when you click the title of the item and the content toggles open.
  3. Click "Done" when finished.
  4. Click "Save" to save your page. 

To update accordion information, click “Edit.” 

To reorder the accordion in the list of accordion items, click the accordion and drag the row in the order you would like to display them.

To delete an accordion from the list, click “Remove.” 

Personnel

The personnel feature allows you to your organize your list of personnel in a consistent format.

Table of Contents

Choose to display a table of contents that includes each personnel section heading or personnel name.  This Table of Contents is an autogenerated list of anchor links that appears above the personnel on the page.

Personnel

Manage your personnel

To add a new person:

  1. Click “Add Personnel”
  2. Update the following fields:
    • Heading (optional): used to create a heading above the person's name
    • Name (required)
    • Position (optional)
    • Email (optional)
    • Phone Number (optional)
    • Website (optional)*
    • Description (optional)
  3. Click "Done" when finished
  4. Click "Save" to save your page

To update a person’s information, click “Edit.” 

To reorder the person in the list of personnel, click the person and drag the row in the order you would like to display them.

To delete a person from the personnel list, click “Remove.”

Show/Hide Placeholder Photos

Choose whether to show/hide a placeholder image for all personnel in your list that do not have an image.

Linking to Accordion/Personnel Anchors

Linking from other pages of your site
  1. Go to the item with the anchor you want to link to and click the "Copy " button. Once clicked, you will see a pop-up notifying you that the anchor as been copied to your clipboard for future use.
  2. Go to the page that you want to add the link and highlight the link text
  3. Click the link button (little chain link icon) in the rich text editor and set the following:
    • Link Type: URL
    • Protocol: <other>
    • URL: link to the page with the anchor and append (paste) anchor text. Example code: #AnchorName
    • Note: is the link code format used to link to pages within your site using the ID number of the resource. Make sure to replace '##' with the resource ID number of the page that contains the accordion. This ID number can be found next to the resource name in the resource tree in parentheses.
    • Click "OK" when finished
  4. Click “Save” to save your page
Linking from the same page
  1. Go to the item with the anchor you want to link to and click the "Copy " button. Once clicked, you will see a pop-up notifying you that the anchor as been copied to your clipboard for future use.
  2. Go to and highlight the text you want to link to the accordion/personnel
  3. Click the link button (chain link icon) and set the following:
    • Link Type: URL
    • Protocol: <other>
    • URL: paste the anchor name. For example, #AnchorName
    • Click “OK” when finished
  4. Click “Save” to save your page

The Photo Gallery - Flickr feature allows you to display all photos from album(s) from a your Flickr account.

To manage your Flickr Photo Galleries:

  1. Click "Add Gallery" to add new Flickr gallery or right-click on existing album to click "Edit" to make changes
  2. Update the following fields:
    • Optional Gallery Title: used to create a heading directly above the gallery
    • Optional Gallery Description
    • Flickr Account ID# (required)
    • Album ID# (required)
  3. Click "Done" when finished
  4. Click "Save" to save your page

To choose which information, pulled from Flickr, to display for all images/albums on the page, select one of the following:

  • Names
  • Names & Descriptions
  • None

For additional help, visit our Flickr Help page.

  • To update a gallery, click “Edit” 
  • To reorder the gallery in the list, click the gallery and drag the row in the order you would like to display them
  • To delete a gallery from the list, click “Remove”

The Photo Gallery - Flickr by Albums feature allows you to display album(s) from Flickr. 

To manage your Flickr Albums:

  1. Click "Add Gallery" to add new Flickr gallery or right-click on existing album to click "Edit" to make changes
  2. Update the following fields:
    • Optional Gallery Title: used to create a heading directly above the gallery
    • Optional Gallery Description
    • Flickr Account ID# (required)
    • Choose Album to Display (required): add album(s) by the album name set in Flickr
      • To add an album, click "Add album" to new album
      • To update an album, right click on the album and click "Edit"
      • To delete an album, right click on the album and click "Remove"
    • Display Album & Image Names (required)
    • Display Album & Image Descriptions (required)

To choose which information, pulled from Flickr, to display for all images/albums on the page, select one of the following:

  • Names
  • Names & Descriptions
  • None

For additional help, visit our Flickr Help page.

  • To update a gallery, click "Edit"
  • To reorder the gallery in the list, click the gallery and drag the row in the order you would like to display them
  • To delete a gallery from the list, click "Remove"

The Photo Gallery - Manual feature allows you to display photos uploaded to the User Media Files in the images directory. Captions for this photos are limited to 25 characters.

Manage your Manual Photo Gallery

To add a new photo:

  1. Click "Add Photo"
  2. Update the following fields:
    • Image (required)
    • Alt text (required): add descriptive alternative text for the image for accessibility
    • Caption (optional)

To update a photo, click "Edit."

To reorder the photos in the list, click the photo and drag the row in the order you would like to display them.

To delete a photo from the list, click "Remove."

Additional Content

Optionally, use this Rich Text Editor to enter content that you would like to be displayed below the special feature on the page


Agenda Template

The agenda template allows you to create an agenda with a structured layout that is also responsive, meaning that it automatically adjusts to fit on small screens like mobile phones. This is a new feature in SSFlex added in January of 2021 to accommodate pages for conferences, meetings, and other events.

To use the agenda feature, choose "Agenda Template" from the "Uses Template" dropdown on any page. Once "Agenda Template" is chosen the agenda fields will appear on the "Special Feature" vertical tab.

To add an agenda item:

  1. Click "Add Agenda Item" 
  2. Update the following fields:
    • Agenda Category (optional): used to create a heading above the agenda item
    • Time
    • Heading (optional): Typically used for the title of the agenda item
    • Description: Description of the agenda item.
  3. Click "Done" when finished.
  4. Click "Save" to save your page. 
  • To update agenda information, click “Edit” 
  • To reorder the agenda items, click and drag the items as needed. Remember to click "save" after reordering.
  • To delete an agenda item from the list, click “Remove”