shortcut to content
Minnesota State University, Mankato
Minnesota State University, Mankato

Latest information about COVID-19 and the campus community

×

Features

Page address: https://web.mnsu.edu/its/web/editing/template/documentation/features.html

Slideshow

This is the slideshow. You can very easily find this on our University homepage as well as on many other landing pages throughout our site. The slideshow is a great way to showcase photos that really resemble your site.

The slideshow itself is essentially made up of a styled <div> with a list on the inside noting each individual slide that you would like to show. The div will have a class on it: <div class="slider">. Then inside must be a unordered list with another class on it: <ul class="rslides">. Within that list there only needs to be <li> tags with images within them. These have no special stylings to them.

The finished product should look something like this:
<div class="row small-collapse">
<div class="large-12 columns">
<div class="slider">
<ul class="rslides">
<li><img alt="Alternate Text" src="/path/to/image.jpg"/></li>
<li><img alt="Alternate Text" src="/path/to/image2.jpg"/></li>
<li><img alt="Alternate Text" src="/path/to/image3.jpg"/></li>
<li><img alt="Alternate Text" src="/path/to/image4.jpg"/></li>
</ul>
</div></div></div>

Captions

The purple bar at the bottom is the caption for the slideshow. This is used to add verbage to go along with your images. These can be the same for all the pictures or can be individualized for each picture.

To make a caption, in the above code there must be a <div> in the <li> tag but after the <img> tag. The caption <div> will have a class on it of <div class="caption">

The finished product should look something like this:
<li><img alt="Alternate Text" src="/path/to/image.jpg" />
<div class="caption">
<h2>Slide Heading</h2>
<p>Slide Caption</p>
</div></li>

No Caption Background Option

(brief description on captions without the purple background color)

<div class="no-caption-bg">

Buttons on the Images

Buttons on the Images

The slideshow may also have the MSU Button on some of the images that will be scrolling through. These may be used as an extra tool to help guide your users to the pages that you wish for them to go.

To have this feature on your site there are a few requirements to using it:

  1. It may only be used on a landing/home webpage
  2. The links must also be found on your page within the left hand menu, just having it in the slider is not good enough
  3. No more than three buttons can be used over one image, but we certainly recommend using only one or two

Accordion

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.

Accordion 1
These sections may be clicked open by clicking anywhere within the box engulfing the heading. They also may be clicked a second time to close the particular section.
Accordion 2
There are many uses for this. You can hide and show more than just text. Within these sections can be videos, images, audio files, and so much more!
Accordion 3
This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.

The Accordion is made up of <dl> and <dd> tags. These are a description list tags but work similar to normal ordered and unordered list tags. The <dl> tag encompasses the entire accordion while each <dd> tag defines the individual sections. We are only set up to have up to 3 sections to be within the accordion as a whole, and this is what we would recommend if you were to want to use it. You may request more, but please address webdevelopment@mnsu.edu to do so.

<dl class="accordion" data-accordion role="tablist">
<dd class="accordion-navigation">
<a href="#panel1b">Accordion 1</a>
<div id="panel1b" class="content active">
This is content text
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel2b">Accordion 2</a>
<div id="panel2b" class="content">
This is content text
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel3b">Accordion 3</a>
<div id="panel3b" class="content">
This is content text
</div>
</dd>
</dl>

The <dl> must have 3 parts within the tag being the class="accordion" which styles the accordion, the data-accordion so that the page knows that it is an accordion so it can display it correctly, and the role="tablist" to link its functionality.

Each section is within the <dd> tag with the tag itself having the class class="accordion-navigation" to style it correctly. The link following encompassed by the tag must be in a link so that it may be clicked on to have it work. The target for the link corresponds with the id for the following <div> section which will be the content hidden under the accordion. That <div> then has a class of <class="content"> to style it correctly. Anything within this <div> will be hidden until someone were to click on the section. Also you may notice in the above code there is another class for this <div> being active. Now the active class allows the particular section of the accordion to automatically be open when someone would navigate to the webpage.

Legend

Legend Title

The Legend feature has many valuable uses to it that can enhance a webpage. Using this tool, you can help your visitors understand your page that much more, and ultimately have a better web experience.

To make a legend on your page it is made up of only three tags: <fieldset>, <legend> and <label>. The <fieldset> tag defines the legend as a whole. The <legend> tag defines the header for the legend. Then the <label> defines the elements within the legend itself. Your final product should look something like this:

<fieldset>
<legend>Legend Title</legend>
<label>Element One</label>
<label>Element Two</label>
<label>Element Three</label>
</fieldset>