University of Wisconsin Stout | Wisconsin's Polytechnic University
Get Your Hands on Your Future
Get Your Hands on Your Future
The following custom elements are available for use on your website. With the *one exception noted, they are under the UW-Stout CMS Custom Elements category in the element gallery. The additional tabs on this page provide further information and usage examples for each of the elements.
|Calendar RSS Feed Display|
Allows filtering of an RSS Feed based on words in the title.
Allows placement of a small set of rotating images on a web page.
|Drop-down Element Holder|
Link toggles show/hide container
Allows faculty to add some elements to their profile page.
|Item with Drop-down Text|
Allows you to put an item on your site and toggle drop-down text underneath it. For example, a Frequently Asked Question that alternately shows/hides the answer when you click it.
|*Reusable Custom Text Block|
Provides a text block that can be placed on several pages and updated in a single location.
|RSS Feed Display|
RSS Feed URL with a custom header and number of feed items to display when rendered as a list of links.
|Two-column Element Bin|
Provides side-by-side containers with an option to make them different widths.
Provides side-by-side text blocks with an option to make them different widths.
|UW-Stout Featured Quick Links|
Quick links that can be featured in the right column (up to 10 links).
|UW-Stout Right Column Highlights|
A general-purpose custom element to feature text and image content in the right column.
|UW-Stout Testimonial Quotes|
Quotes or testimonials to be featured in the right column.
|UW-Stout YouTube Video|
Accepts video embed code from YouTube and other video sources and renders the video using the default YouTube player.
The two drop-down custom elements Item with Drop-down Text and Drop-down Element Holder function the same way, clicking on the title alternately shows or hides an element beneath the title. The former contains a Formatted Text Block while the latter includes a container which can hold other elements.
Since this is an Item with Drop-down Text element, this Formatted Text Block element is exposed or hidden. One use is a frequently asked question and answer; several can be placed on a page without taking up much space. Some options are included for the text style; this one is set to strong (bold).
The TwoColumn-20-80 and TwoColumn-Tabbed layouts are good for some content, but are too wide for paragraphs of text. The long lines of text are hard for people to scan, and they are less likely to read your content in this format.
So what do you do if you need to use the TwoColumn-20-80 layout for a wide table, but also need to include some paragraphs of text? Simply add a Two-column Text custom element to hold your text. The Two-column Text custom element simply provides two text blocks that will sit side by side on the page.
Since there are times when having two columns of the same width doesn't meet your needs, the element also allows you to set the width of the first column at 30, 40, 50, 60, 65, or 70% of the width of the content area. The default setting is 50% for each column.
The 65% option was added to emulate the 20-60-20 layout. This allows you to use the TwoColumn-Tabbed layout and place any buttons or other images that were sized for the right column on the right in this element.
The Two-column Element Bin custom element functions the same way, except it puts two containers side-by-side on the page for when you need something more than text blocks. You can see an example on the RSS Feeds tab where we have a text block and a Calendar RSS Feed Display custom element side-by-side.
Note: in order to get the text columns to line up at the top when there is no header in this column, I simply added a space to the first line and applied the same heading style as the heading in the first coumn.
- - - - - - - - - - - - - - - - - - - - - - -
190px wide image inside of a paragraph
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Two-column Text element maximum image sizes for each layout.
30% - 190px
40% - 258px
50% - 327px
60% - 396px
70% - 465px
30% - 193px
40% - 261px
50% - 330px
60% - 399px
70% - 468px
The RSS Feed Display allows you to display any
RSS feed on a page. Several custom render handlers are available for
different layout and display options. The Calendar RSS Feed Display contains the same fields as the RSS Feed Display,
but includes additional fields to allow filtering based on words in the
title.This was developed to filter EMS Calendar events, but can be used
with any RSS feed.
The UW-Stout Right Column Highlights custom element is probably the most commonly used right-column element. It is the same as a Formatted Text Block with the addition of an optional image field.
When the Header field is filled in, the text appears as white against and orange background. Additional "headers" can be inserted in the text block by applying the Heading 3 style to a paragraph.
A 213 pixel wide or smaller image can be added to the Featured Image field, or it can be added to the Featured Content field along with text, bullets, links, etc.
The UW-Stout Featured Quick Links custom element is used for a series of internal and/or external links. It consists of a mandatory Header field, an optional Teaser Text field for text above the links, and ten link fields.
You can enter a combination of up to 5 CommonSpot page URLs and 5 external URL links. If you have no CommonSpot page URLs, you can start entering external URLs starting from Link 6.
If you need more flexibility in how the links are displayed, you can use the UW-Stout Right Column Highlights custom element to create your link list.
The UW-Stout Testimonial Quotes custom element adds a stylized quotation to the right column. All three fields, Title, Textual Quote and Author are required.
Advanced author tip
Problem: I needed to put text and buttons with rollover images in the right column. Images in a text block (like right-column highlights) don't have the rollover image option, so I needed to use Single Image elements, but I wanted the result to look like other right-column elements.
Solution: I added a Layout Elements > Container. In the Container menu, I selected Style. In the Element Container drop-down, I selected Other... and entered the Class Name: module. The "module" class adds the white background, outside shadow, and distinctive heading 3 style. The result can be seen on the Learn@UW-Stout homepage.
The UW-Stout YouTube Video custom element can be used in the right column or main content area. The element uses an embed code which you can get by clicking the Share button under a video in YouTube. This brings up an Embed button which in turn brings up the appropriate code.
The code will include a width and height. The height can be deleted and the width set to the appropriate setting for the layout, which is 210px for the right column. Settings are included as instructions in the element.
The facultyProfile element is used for faculty and staff profiles found at http://www.uwstout.edu/faculty/index.cfm. A subsite is set up with the members username in the url. The facultyProfile element reads the subsite name and extracts basic contact information from the CommonSpot database. If the member never adds anything to their site, it will still provide basic contact information.
The element has fields to add the member's department, credtials, and an image. It also has three text blocks to add Education, Research Interests and Courses Taught. If text is added to any of these fields, the appropriate heading will appear above the text on the page. Member's are also free to add additional elements to the content area and right column.
The Reusable Custom Text Block element in under the UW-Stout Special Use Elements - webmaster use category. If you need to have the same content on several pages, you should request it through the email@example.com email.
This element might be used for a series of quick links you want on several pages, or as navigation links between a series of related pages. An example of this can be found on General Standards for All Pages.
When we receive a request for this element, we will set up an administration page that has limited access. we will set up a Data Sheet element in the content area that you will use to edit the element content. We will set up a copy of the element in the right column that you will copy and paste on other pages. Whenever you update the data sheet, all of your elements will be updated.