Category Content: Create Template

My Dashboard looks like it’s on my web site template and not all the tables and pages are aligned correctly. What can I do to fix the issue?

We recommend always working with your Dashboard on the www.meettheneed.org home page template, not on your web site template. If you are accessing your dashboard through your template then you will lose some of the functionality of your Dashboard and the appearance of many administrative pages will be distorted.

To get off of your template and back on Meet The Need’s template for managing your account:

  1. Close out your browser entirely, meaning closing all windows open for that browser
  2. Go to meettheneed.org and log in
  3. If necessary, clear your browser’s history, cookies and cache
  4. If necessary , refresh your Dashboard page after you log back into your account on meettheneed.org

After these steps, your Dashboard should appear like Meet The Need’s website and not your template.

This issue does not occur for your volunteers because your template is optimized for all of the pages they will use to sign up for needs and manage their commitments. Only your Key Contacts (administrators) can access your organizational Dashboard and manage your account.

How can I remove www.meettheneed.org from the URL of our links and buttons? And what do we do if we change the header or footer of our web site often?

Use an iFrame if you want to remove 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 frequently.

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.

 

How do I update my organization’s template if our website has changed?

All organizations change their websites occasionally, so we provide a way for you to update your templates quickly. Go to Settings on your Dashboard and click Create/Edit My Template under Customize MTN for Your Website.

If you use an Advanced template and you know HTML coding, make the adjustments to your current advance template and copy and paste the code to reflect your new header and footer and menus.  Test the sign up process and adjust as necessary to ensure all buttons and links work and all pages appear appropriately in each browser.

If you use a Basic template, click the Basic tab and update the colors, menu items, text fonts, logo, etc. to match more closely with your new web site.

When working with Basic or Advanced templates, you can check to see what your template will look like by simply clicking one of the links provided to you by Meet The Need via email or on your Dashboard (the Link button appears for each module on your main Dashboard page).

How do I create my own template to show needs on my website?

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:
  1. 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.
  2. 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.

 

Do I need a webmaster to create my template?

No, it is not necessary to involve your webmaster if you use a basic template. MTN has made it easy for you to create a template to show your needs on your web site. With a simple basic template (a plain grey one is initially created for you) you can update the colors, menu items and logo to look approximately like your web site.

However, if you want an advanced template, or exact replica of your web site, you can follow the written and video instructions on the Help button on the Create/Edit My Template (under Settings). The process involves simply copying your HTML coding from your header and footer of your website. However, you will likely need assistance from your webmaster to ensure every page of your sign up process looks good and works well across all browsers.

You can access both the Basic and Advanced options by going to Settings on your Dashboard and clicking the Create/Edit My Template button underneath the Customize MTN for Your Website header.

What is a template and why do I need one?

You may run all of Meet The Need’s software through your organization’s web site and make it all look exactly like your organization’s site by creating a template for your Meet The Need account. A template is the “wrapping” (header and footer) that is copied from your website to make all of your MTN search pages (buttons/links) appear seamless to the volunteer. Once you have built your template, all of your links showing specific types of needs will appear within your web site template, and you simply attach those links to buttons you add to your web site to let your members and visitors to “shop” on your web site for opportunities to serve at your organization or in the community . Through your template and associated links, you have complete control of what options, screens, and types of needs users will be able to see through your web site.