Building

it-directors

The process of building and deploying a portal skin is straightforward and can be accomplished in a couple of hours if everything is setup correctly. Necessary steps are outlined and explained below. This tutorial assumes you have the necessary CSS, HTML and other skills required.

Step 1. Create Flat HTML Version

The first step in this process is to identify a page on an existing website that you want to use as your template. Next, you want to create an offline version of that page on your desktop. When we say offline, we really mean offline. The Portal is a completely different website from your main page, and it’s a website that uses HTTPS to do all its communication. Because of that, all your images, JS, CSS, etc. need to be available from that secure website.

Alternatively, you could start with a copy of an existing skin, such as the mobile-friendly responsive skin. See Download Skins.

Do you use flash? If your website makes use of flash elements that are loading menus, videos, etc., we recommend you find alternatives for the Portal pages. Many flash components will not work correctly on a page that requires HTTPS for everything. For the Portal skins Think Ministry, Inc. builds for customers, we usually convert the flash menu to a static image with links.

Note: You must name your skin with a-n .htm extension. You cannot use the .html extension. The skinning engine will not open a .html file and the Portal will not load.

Step 2. Create Folder Structure

All Portal Skins follow a standardized folder structure. All of your Portal skins need to live under the skins directory where your MinistryPlatform Portal is installed. All of the files and folders associated with a skin will live inside a folder with the same name as your HTM file.

[skin_folder]
- [skin_file].htm
- other folders and files (css, js, etc.)

For example, if your skin name is NewWine, the folder would be named NewWine and your htm file would be NewWine.htm.

Step 3. Convert Flat HTML File

So now you have a clean static template, flash is gone and all your dependencies on other non-https sites have been removed. The next step is to prep your HTM file for use as a skin. Basically, you need to update the path for any file call and using the [MPP_SkinPath] token. Here's an example:

    <link href="[MPP_SkinPath]/css/style.css" rel="stylesheet">
    <link href="[MPP_SkinPath]/css/main.css" rel="stylesheet">
    <link href="[MPP_SkinPath]/fonts/font-awesome-4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="[MPP_SkinPath]/css/animate.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:600,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
    <link href="[MPP_SkinPath]/css/portal.css" rel="stylesheet" />

Be sure to update all references included in your main .htm file (JS, CSS, images, etc.). Do not update CSS file path references as they are relative to the CSS document, not the .htm file.

Step 4. Add Portal Elements

There are several Portal elements that need to be added to the skin, are specific to the Portal and most likely not part of your website or design files. Look at one of your previous skins. You will find an entry that points to a portal.css file. This file defines the CSS elements that are created by Think Ministry, Inc. and specific to the Portal. You must copy this file and place it in your new skin’s CSS directory structure. You will also need to add the appropriate CSS link in the HTM file for your skin.

Note that you probably want to update the colors/styles in this file to match.

Add the Portal Page Element (the Portal's main content)

You need to add an element to your Portal skin as the placeholder all of the Portal items to be rendered. If you are using a two column design, this would usually be placed in the larger column, as this will be the content of the Portal. All you need to do here is put the following code on the page where everything should be rendered:

<div id="content">
    [MPP_PageForm]
</div>

This area should be at least 400 pixels wide and should allow for dynamic heights.

Add Portal Navigation and Login Token

You typically have a section on your site for users to log in and out on your website. This is one example, or you could also include this in your primary navigation (below).

<div id="login">
    [MPP_UserLogin]
</div>

Next, you want to add some navigation for Portal Items into your skin. Most skins have a column or area where intra-Portal navigation is listed. You can choose which items you want turned on or off by simply using html comments. Here are all the default links:

<div id="navbar">
    <h4>Public </h4>
    <ul>
        <li><a href="online_giving.aspx">Online Giving</a></li>
        <li><a href="mission_trip_giving.aspx">Mission Trip Giving</a></li>
        <li><a href="mission_trip_registration.aspx">Mission Trip Registration</a></li>
        <li><a href="make_a_pledge.aspx">Make A Pledge</a></li>
        <li><a href="event_calendar.aspx">Event Calendar</a></li>
        <li><a href="group_finder.aspx">Group Finder</a></li>
        <li><a href="opportunity_finder.aspx">Opportunity Finder</a></li>
        <li><a href="group_survey.aspx">Find A Group By Survey</a></li>
        <li><a href="opportunity_survey.aspx">Find An Opportunity By Survey</a></li>
        <li><a href="get_form.aspx?id=01fb904a-0aa6-4eaa-bde4-f88e3f8d888e">Submit a Prayer</a></li>
    </ul>

    <h4>Private </h4>
    <ul>
        <li><a href="my_user_account.aspx">My User Account</a></li>
        <li><a href="my_groups.aspx">My Groups</a></li>
        <li><a href="groupleaderresources">Group Leader Resources</a></li>
        <li><a href="my_events.aspx">My Events</a></li>
        <li><a href="my_mission_trips.aspx">My Mission Trips</a></li>
        <li><a href="missiontripdetails">Mission Trip Forms &amp; Info</a></li>
        <li><a href="my_purchase_history.aspx">My Purchase History</a></li>
        <li><a href="my_giving.aspx">My Giving</a></li>
        <li><a href="my_contribution_statement.aspx">My Contribution Statement</a></li>
        <li><a href="my_directory.aspx">Online Directory</a></li>
        <li><a href="my_pledges.aspx">My Pledges</a></li>
        <li><a href="my_calls.aspx">My Calls</a></li>
        <li><a href="my_subscriptions.aspx">My Subscriptions</a></li>
        <li><a href="my_profile.aspx">My Survey</a></li>
    </ul>
</div>