This is h1.TitleBar

Base Elements

This page describes some of the basic HTML elements that appear in your iMIS site and that you can style within your theme. You can use this page to quickly test how these elements will look if you want to make any style changes. When working with styles, we recommend using an in-browser developer tool to help you inspect page elements to determine which CSS you may need to modify. Your browser’s development tools are normally accessible by right-clicking a page element and selecting Inspect Element.

Basic HTML Elements

Headings

Use heading tags <h1> through <h6> to structure the content of your web pages.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>

Paragraphs

Paragraphs are defined with the <p> tag.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis odio quis ligula commodo lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ut volutpat dui. Donec dapibus eu magna eu tristique.

Nam varius purus mauris, at suscipit ipsum imperdiet sit amet. Nulla interdum purus dui, id venenatis elit tristique in. Sed rhoncus convallis ipsum, id pretium enim imperdiet eu. Aliquam pretium euismod eros vitae dapibus. Donec a mi rutrum, ullamcorper velit in, commodo ipsum.

<p>...</p>

Links

Links are defined with the <a> tag and have four states that you can style: link, visited, hover, and active.

Example link

<a href="#">Example link</a>

Images

Display images with the <img> tag.

<img src="/images/UploadedImages/cairnsnight.jpg" alt="Alternate text for the image">

Lists

Ordered lists start with the <ol> tag, and unordered lists start with the <ul> tag.

Ordered list item
Ordered list item

<ol>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
</ol>

Unordered list item
Unordered list item

<ul>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
</ul>

List items but no bullets

Ordered lists typically start with a bullet or a number. But in some cases you might want a list, but no bullets. In this case add the class="NoBullet". <ul class="NoBullet">.

List Item with no bullet
List Item with no bullet
List Item with no bullet
List Item with no bullet

<ul class="NoBullet">
	<li>List Item with no bullet</li>
	<li>List Item with no bullet</li>
	<li>List Item with no bullet</li>
	<li>List Item with no bullet</li>
</ul>

Horizontal rule

Insert a horizontal rule with the <hr> tag when you need to separate content.

<hr />

Blockquotes

Use the <blockquote> tag to mark content as quoted from a source. You can also apply the .Quote class to a <blockquote> to highlight the text.

Nam feugiat tristique mauris, et interdum libero tempor vitae. Nulla vulputate porttitor mauris, in commodo sapien lobortis et. Nam quis tristique leo, in scelerisque justo. Proin commodo enim vel ante porttitor tincidunt.

<blockquote>Nam feugiat tristique mauris...</blockquote>

Nam feugiat tristique mauris, et interdum libero tempor vitae. Nulla vulputate porttitor mauris, in commodo sapien lobortis et. Nam quis tristique leo, in scelerisque justo. Proin commodo enim vel ante porttitor tincidunt.

<blockquote class="Quote"><p>Nam feugiat tristique mauris...</p></blockquote>

Buttons

Basic buttons

You can apply a standard button style to any element by using the .TextButton class. However, we recommend primarily using it with <a>, <button>, and <input type="button" />.

a.TextButton

a.TextButton.PrimaryButton

a.TextButton disabled

a.TextButton.MediumButton

a.TextButton.LargeButton

<!--Plain text button-->
<a href="#" class="TextButton">a.TextButton</a>                    
<button class="TextButton">button.TextButton</button>
<input type="button" value="input.TextButton" class="TextButton"/>

<!--Primary text button-->                    
<a href="#" class="TextButton PrimaryButton">a.TextButton.PrimaryButton</a>
<button class="TextButton PrimaryButton">button.TextButton.PrimaryButton</button>
<input type="button" value="input.TextButton.PrimaryButton" class="TextButton PrimaryButton"/>

<!--Disabled text button-->                    
<a href="#" class="TextButton" disabled="disabled" >a.TextButton disabled</a>
<button class="TextButton" disabled="disabled">button.TextButton disabled</button>
<input type="button" value="input.TextButton disabled" class="TextButton" disabled="disabled"/>

<!--Medium sized text button-->                    
<a href="#" class="TextButton MediumButton">a.TextButton.MediumButton</a>                  

<!--Large text button-->
<a href="#" class="TextButton LargeButton">a.TextButton.LargeButton</a>

MPLA Buttons

Gold Button

Blue Button

Red Button

<p>
<a href="" class="TextButton Gold">Gold Button <i class="fas fa-chevron-right"></i></a>
</p>

<p>
<a href="" class="TextButton Blue">Blue Button <i class="fas fa-chevron-right"></i></a>

</p><p>
<a href="" class="TextButton Red">Red Button <i class="fas fa-chevron-right"></i></a>
</p>

User messages

Apply the following styles to convey messages of certain types to the user.

AsiInformation: Donec luctus nibh sed augue tincidunt

AsiSuccess: Donec luctus nibh sed augue tincidunt

AsiWarning: Donec luctus nibh sed augue tincidunt

AsiError: Donec luctus nibh sed augue tincidunt

<p class="AsiInformation">AsiInformation: Donec luctus nibh sed augue tincidunt</p>
<p class="AsiSuccess">AsiSuccess: Donec luctus nibh sed augue tincidunt</p>
<p class="AsiWarning">AsiWarning: Donec luctus nibh sed augue tincidunt</p>
<p class="AsiError">AsiError: Donec luctus nibh sed augue tincidunt</p>

Emphasis classes

Callouts

To help focus attention on a particular area, apply the callout classes to any element using the .CalloutArea1 and .CalloutArea2 classes.

CalloutArea1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis odio quis ligula commodo lobortis. Pellentesque habitant morbi tristique senectus.

CalloutArea2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis odio quis ligula commodo lobortis. Pellentesque habitant morbi tristique senectus.

<p class="CalloutArea1">CalloutArea1: Lorem ipsum dolor sit amet... </p>
<p class="CalloutArea2">CalloutArea2: Lorem ipsum dolor sit amet... </p>

Featured link

Apply the .FeatureActionLink class to call attention to a link.

Featured text

Apply the .FeatureText class to call attention to a section of content.

Nullam in vulputate odio. Sed id urna vulputate, porta orci et, luctus mi. In dapibus dui non nibh porta mollis ac quis libero. Nunc eget quam hendrerit neque malesuada semper sed sed ante.

<p class="FeatureText">Nullam in vulputate odio...</p>

Callout Areas With Headings

The module include

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus iure eum, ratione porro, blanditiis quisquam aut ducimus, fuga maiores rem distinctio nostrum quis quaerat quas dolores minima quam eligendi ad!

Bullet Title
Bullet text lorem ipsum dolor sit amet
Bullet Title
Bullet text lorem ipsum dolor sit amet
Bullet Title
Bullet text lorem ipsum dolor sit amet
Bullet Title
Bullet text lorem ipsum dolor sit amet

Instructions

Number List Title
Bullet text lorem ipsum dolor sit amet
Number List Title
Bullet text lorem ipsum dolor sit amet
Number List Title
Bullet text lorem ipsum dolor sit amet
Number List Title
Bullet text lorem ipsum dolor sit amet

Call To Action

<div class="CalloutArea1 WithHeading">
	<h2>The module include</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus iure eum, ratione porro, blanditiis quisquam aut ducimus, fuga maiores rem distinctio nostrum quis quaerat quas dolores minima quam eligendi ad!</p>
	<ul>
		<li><strong>Bullet Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
		<li><strong>Bullet Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
		<li><strong>Bullet Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
		<li><strong>Bullet Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
	</ul>
</div>

<div class="CalloutArea2 WithHeading">
	<h2>Instructions</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus iure eum, ratione porro, blanditiis quisquam aut ducimus, fuga maiores rem distinctio nostrum quis quaerat quas dolores minima quam eligendi ad!</p>
	<ol>
		<li><strong>Number List Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
		<li><strong>Number List Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
		<li><strong>Number List Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
		<li><strong>Number List Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
	</ol>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus iure eum, ratione porro, blanditiis quisquam aut ducimus, fuga maiores rem distinctio nostrum quis quaerat quas dolores minima quam eligendi ad!</p>
	<p>
		<a href="#SampleCallToActionButton" class="TextButton">Call To Action</a>
	</p>
</div>

Callout With Green Heading - CalloutArea2 WithGreenHeading

Notice in the mark-up that the what is in the strong tag will be black, and the rest of the heading will be in white.

Federal Legislation Priorities

Bullet Title
Bullet text lorem ipsum dolor sit amet
Bullet Title
Bullet text lorem ipsum dolor sit amet
Bullet Title
Bullet text lorem ipsum dolor sit amet
Bullet Title
Bullet text lorem ipsum dolor sit amet

<div class="CalloutArea2 WithGreenHeading">
	<h2><strong>Federal</strong> Legislation Priorities</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus iure eum, ratione porro, blanditiis quisquam aut ducimus, fuga maiores rem distinctio nostrum quis quaerat quas dolores minima quam eligendi ad!</p>
	<ul>
		<li><strong>Bullet Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
		<li><strong>Bullet Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
		<li><strong>Bullet Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
		<li><strong>Bullet Title</strong><br/> Bullet text lorem ipsum dolor sit amet </li>
	</ul>
</div>

Magazine Issues

A framework has been developed to support the build out of IML Magazine issues. The magazine framework is developed with the use of tags, folder, page layout and CSS classes.

Below are some basic instructions to ensure pages are laid out and formatting correctly. Magazine issues consist of two types of page. TOC and Article.

Table of Content Page (TOC)

It is very important to start a new TOC page with a template and update.
TOC Pages will always need to use the MPLA_Magazine_TOC page layout
The "dropzone" at the top of the page will need to have the issue heading. For example:<h2 class="issue">First Quarter 2019</h2>
It is also very important to edit via the HTML view of the WYSIWYG editor to maintain all div and class mark-up and ensure proper formatting and display after saving and publishing.
The TOC tag will also need to be specifically applied. See Admin for help doing this.

Please note: Each <article> will have nested divs with class's for "img" and "abstract". But you will not see bootstrap classes for layout. Those classes are added by a javascript file that is included via the page layout.

TOC pages have 2 types of articles:

Primary

<article class="Primary">
	<div class="img">
		<img alt="" src="https://via.placeholder.com/540x340?text=540x340+Primary+Article+Image" />
	</div>
	<div class="abstract">
		<h1><a href="#linkToFullArticle">Title Hyperlinked to Full Article</a></h1>
		<h2>Italic Light Grey Sub-Head</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente repudiandae cum quos nesciunt ipsum eos nulla temporibus fuga dolore laudantium. Delectus earum, ad rerum esse quasi consequatur iste deleniti cupiditate.</p>
		<p>
		<a href="#linkToAuthor">By Author Name</a>
		</p>
	</div>
</article>

<article class="Primary"> will put the image to the right.

Column

<article class="Column">
	<div class="img">
		<img alt="" src="https://via.placeholder.com/540x340?text=540x340+Primary+Article+Image" />
	</div>
	<div class="abstract">
		<sup>Column Label </sup>
		<h1><a href="#linkToFullArticle">Title Hyperlinked to Full Article</a></h1>
		<h2>Italic Light Grey Sub-Head</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente repudiandae cum quos nesciunt ipsum eos nulla temporibus fuga dolore laudantium. Delectus earum, ad rerum esse quasi consequatur iste deleniti cupiditate.</p>
		<p>
		<a href="#linkToAuthor">By Author Name</a>
		</p>
	</div>
</article>

<article class="Column"> will put the image to the left.

<article class="Column"> will also typically contain a superscript heading. <sup>Column Label </sup>

If an article on the TOC page DOES NOT have an image associated with it a "NoImage" class will need to be added to the article tag. <article class="Column NoImage">

Member Only Column

To denote an article is "MEMBERS ONLY" a MembersOnly class will need to be added. <article class="Column MembersOnly">

Article Pages

Articles will need to be put in the correct "articles" folder corresponding to the quarterly issue.

Article Pages will always need to use the MPLA_Magazine_Article page layout
As with the TOC page, the "dropzone" at the top of the page will need to have the issue heading. For example:
```
<h2 class="issue">First Quarter 2019</h2>
```
It may also include an h3 to denote cover or featured story:

Cover Story
```
<h3 class="CoverStory">Cover Story</h3>
```
OR

Featured Story
```
<h3 class="FeaturedStory">Featured Story</h3>
```
Article are truncated at a certain length and will display a "more" button automatically. This value is global. See Admin if this. number needs to be adjusted.

Aside

Magazine Asides are formatted different from other callouts on the site. Here is a sample markup that can be copied and pasted when needed.

<aside>
	<div class="aside-container">
		<div class="img"><img alt="" src="https://via.placeholder.com/360x220.png?text=360+220+Mag+Callout+Image"></div>
		<div class="aside-text">
			<p>
			MagCallout1 Text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, totam cupiditate quaerat repudiandae ipsum beatae sit officia neque iusto incidunt.
			</p>
		</div>
	</div>
</aside>

Square Red Bullets

Root level bullet text
Root level bullet text
Root level bullet text
- Nested bullet text
- Nested bullet text
- Nested bullet text

<ul class="RedSquare">
    <li>Root level bullet text</li>
    <li>Root level bullet text</li>
    <li>Root level bullet text
    <ul>
        <li>Nested bullet text</li>
        <li>Nested bullet text</li>
        <li>Nested bullet text</li>
    </ul>
    </li>
</ul>

Red Triangle Bullets

Root level bullet text
Root level bullet text
Root level bullet text
- Nested bullet text
- Nested bullet text
- Nested bullet text

<ul class="RedTriangle">
    <li>Root level bullet text</li>
    <li>Root level bullet text</li>
    <li>Root level bullet text
    <ul>
        <li>Nested bullet text</li>
        <li>Nested bullet text</li>
        <li>Nested bullet text</li>
    </ul>
    </li>
</ul>

Green Dot Bullets

Root level bullet text
Root level bullet text
Root level bullet text
- Nested bullet text
- Nested bullet text
- Nested bullet text

<ul class="GreenDot">
    <li>Root level bullet text</li>
    <li>Root level bullet text</li>
    <li>Root level bullet text
    <ul>
        <li>Nested bullet text</li>
        <li>Nested bullet text</li>
        <li>Nested bullet text</li>
    </ul>
    </li>
</ul>

Webinar Abstract

Wednesday, November 14, 2018 2:00-3:00 ET (1 p.m. CT, Noon MT, 11 a.m. PT)

This webinar is FREE for MPL Association members.

View Webinar

<div class="CalloutArea1 WebinarAbstract">
	<h3>
	<span>Wednesday, November 14, 2018</span>
	<span>2:00-3:00 ET (1 p.m. CT, Noon MT, 11 a.m. PT)</span>
	</h3>
	<p>
		This webinar is FREE for MPL Association members.
	</p>
	<p>
		<a href="#LinkToOnDemandWebinar" class="TextButton"><i class="fas fa-video"></i> View Webinar</a>
	</p>
	
</div>

Home Page

Rearrange the Order

The site was built in a way to allow rows on the home page to be easily rearranged and removed if necessary. This type of structural work will be done in the Theme Builder > Website Templates > MPLA_20_2_65_Template .

If you select "configure" on any of the content records in the "Home Content" area of the website template, you will see where that content is locate in the Page Builder structure.

Full Screenshot

Editing the Content

The actual content of each of the "home page rows" is found in the Page Builder > Manage Content > Web > HomePage_ContentAreas.

You can edit this content like any other, but be very careful to not disrupt the underlying html mark-up and classes. To avoid issue, it is HIGHLY recommended to only edit via the html view of the WYSIWYG editor.