Go to Settings on your Dashboard and click Create/Edit My Template under Customize MTN for Your Website. You have three options for creating your template which vary from simplest to most difficult to implement. None of these three options should take more than 1 hour to complete.
- Basic tab (10 minutes) – Users without any technical expertise can use this feature to create an approximation of your web site with your background colors, logo and menu options.
- Outer Background – Choose a color from the palette for the background outside of your frame
- Inner Background – Choose a color from the palette for the background inside of your frame
- Menu Background – Choose a color from the palette for your menu bar
- Main Text Color – Choose a color from the palette for your text (besides the menu)
- Menu Text Color – Choose a color from the palette for your menu text
- Fonts (Main) – Choose a font for your text (besides the menu)
- Fonts (Menu Bar) – Choose a font for your menu text
- Edit Menu – Add the names and links of each menu item from your web site to your template (so users can click from your template back to the links on your web site)
- Edit Logo – Choose and upload your organization’s logo file from your computer
- Advanced tab (1 hour) – Create nearly an exact replica of your web site background, header and footer. You should involve your organization’s webmaster or someone with experience working on websites and comfortable with HTML to help you. The next screen will ask for two blocks of HTML:
- Header – This is the HTML above the main content area of your website. You may include everything from the opening <html> or <!doctype…> tag down to the main <div> or table cell that opens the content area of your website. This will likely include most of your javascript and css references, menus, banner images, etc.
- Footer – This is the HTML below the main content area of your website. Include everything from the </div> or table cell that closes your content area down to the closing </html>. It will likely include the copyright text as well as any images and text you have at the bottom of your website.
Most website content areas are adequate, but ideally they would have:
- A minimum width of 700 pixels (about 7-8 inches on a typical monitor)
- At least partially based in HTML (not purely Flash or Silverlight)
- Not inside a frameset
After you supply this html code you’ll be given an opportunity to preview the template and fine tune as needed until you are comfortable with the results.
- iFrame (1 hour)– An iFrame removes the Meet The Need web site address from the URL line for an even tighter integration. iFrames are also useful when an organization changes the header, footer or menu options on their web site often. Implementing an iFrame requires involvement by your IT staff. Below are high level integration instructions for your IT department to help them get started. Contact Meet The Need at support@meettheneed.org if you need more detailed instructions.
- Create a template that is smart enough to recognize if it is inside an iframe and (if so) strips out header and navigation, leaving only the main content.
- Create a dedicated page on your website that has an iFrame that points to Meet The Need with your Meet The Need link and parameters.
- The main downside of iFrame implementations is the height and scrolling issue within the iFrame. The content in Meet The Need varies in length and so there is no single height that is ideal. If the iFrame is made too tall then it degrades the user experience by making the outer page scroll too far. If the iFrame is made too short then the user needs to scroll excessively inside the frame. The ideal size is around 700px+ wide and around 600-800px tall depending on the size of your website content above the iFrame.