image

Setting up your Mobi | Hybrid template:
"Mobi Level 2 HTML5" - "Paypal Type 2":

View HTML5 mobi Template Support
View Allwebco mobi-Hybrid Web Templates


Note On Mobile Setup:
If you are using this template as an alternate site for your main website you may want to create a folder in your hosting account to upload this template into. Name this folder "mobile". Create a link on your website homepage to "http://your-web-domain.com/mobile/index.html" that mobile users can click on to access the mobile site.

Step 1:
Edit Header: | More Details
In the "picts-mobi" folder either replace or edit the "logo.jpg". Edit this graphic with your logo or image. This image is 200 x 50 pixels in size. If you edit the logo size also edit the height and width in the "header.js".

Edit Twitter, Facebook, LinkedIn Links: | Social Links | .js variable editing
Open the "header.js" in a text editor and edit the 3 link variables with your link to Twitter, Facebook and LinkedIn. The "header.js" includes "yes/no" variables to turn off any or all of the social links. Also see variable editing help.

Step 2:
Edit Footer: | More Details
Open the "footer.js" in Notepad or a plain text editor. You can open Notepad and drag the "footer.js" into it. Find the text "Website Name" and edit this text with your website name.

Step 3:
Edit Contact Info: | More Details
Open the "contact.js" in Notepad or any text editor and edit the company name, address, phone and fax numbers, and the e-mail address (edit the email in 2 places). This will update the contact info on the "contact" page. This info is setup in a .js file so search engines won't see your e-mail and you'll get less spam.

Step 4:
Edit the Contact and Quotes Forms:
A "back-end" script is required to be installed in your hosting cgi-bin folder or in your control panel for the forms to work. Most hosting companies offer a sample form with your hosting accounts that code can be copied from to setup the template forms.

Click for current info on setting up the template forms.

Click for info on adding more fields to the forms.

Click for changing form sizes or colors.

If you want to use only e-mail on the contact page you can remove the contact form from the "contact.htm" between the comment tags.

Because of the complexity of setting up the quote form, there are notes in the "quotes.htm" to help you cut and paste to add new form fields. The form will work with most contact form scripts however you will need help files or a sample form from the script you intend to use. Most form elements work the same way from script to script, however the hidden values usually vary. You may want to consider editing the entire page in Notepad instead of a wysiwyg editor.

Step 5:
Edit Gallery Images: | More Details
The fastest way to setup the gallery is to replace the .jpg pictures in the "gallery-mobi" folder with your own by overwriting the files that are in there now and using the same generic names.

In the "gallery-mobi" folder, replace the 12 "Fgallery" pictures with full size photos. Replace the 12 "gallery" pictures with your thumbnails. Thumbnails are now 130 x 87 pixels in size. Full sized images are 600 x 400. You can make full size images any size that you prefer.

Note: If you want to setup the shopping cart see "Paypal Setup" in the options section below.

Step 6:
Slideshow Setup: | More Details
Replace the 12 images in the "slideshow-mobi" folder with your images for the "slideshow.htm". These images are 600 x 400. You can make your images any size but it is best to not go wider than 600 pixels. Click link above for more slideshow options.

Step 7:
Setup the Video Page: | More Details
Replace the 4 ".mp4" files in the "videos-mobi" folder with your videos. Mp4 is used because of the popularity of this video file type. For help creating and converting to mp4 video see the video setup "Page Type" support page. See the section "How we created the template video samples".

Replace the 4 "video-?.jpg" images in the "videos-mobi" folder with your video still images. Edit the "videos.htm" with your video titles and details.

You can optionally use other "web safe" video types other than mp4 by placing your videos in the "videos-mobi" folder and editing the links in the "videos.htm" page.

Step 8:
Edit Payment Page:
This template includes a Paypal payment page called "payments.htm". Edit the "paypal@your-web-domain.com" in this page with your Paypal e-mail and you can use this page to accept custom payments by sending clients a link to this page and having them fill in the amount on the payment page. If you are not using this page remove the link in the "menu.js".

Step 9:
Setup the Site Search:
Open the "site_map.htm" and search for and edit "allwebcodesign.com" with your website domain in (2) places. Edit the same 2 areas in the "search-links.htm" also. If you require a more custom search with no ads, check in your Google account for info.

Step 10:
PDF Page Setup: | More Details
In the "PDF" folder, replace the "PDFsample1.pdf" through "PDFsample6.pdf" with your PDF files. Edit the "PDFgallery.htm" with info for your PDF files. Click link above for setup details.

Step 11:
Edit Pages: | Software Choices | Notepad Editing
Edit the text on all HTML pages with your information. You can use Exp Web, Dreamweaver, any wysiwyg HTML editor or a text editor like Notepad. Take care not to delete any of the HTML tags that surround the text.

Step 12:
Edit Title, Descriptions, Keywords: | More Details
Open each of the pages and change the titles (at the very top of the page) and also the description and the keywords with your product or service details. You can edit one page and copy and paste to the other pages. Be careful to only change what's inside the "" so you don't disturb the html code. Page titles are important so your site will get a good listing at Google or Yahoo! and other search engines.

Step 13:
Upload: | More Details
Upload the pages on to your hosting company's server using ftp software or Windows Explorer or your control panel. Be sure to upload the "picts-mobi" and "gallery-mobi" and "slideshow-mobi" and "videos-mobi" and "PDF" folders and all files in these folders.



Options:

The Graphic Logo:
If you do not now have a graphic logo you can contact Allwebco Design through our support center and we can create a quick simple logo for a small fee. See the custom design services support page for details.

Menu Editing: | More Details
You can change the names on the menu buttons like "About" or "Contact" to other page names by editing the "menu.js". If you are editing only the name showing on the menu, edit only the name and not the name with the ".htm" after it unless you want the page link to change. Whatever you change in the menu will update every page on the website. You can add more links to pages by copying 3 lines of menu code and pasting it right below itself. Be sure to back up your files before you edit them.

Icon Menu: | More Details
The "menu-icons.js" is a graphic image menu. You can also copy and paste to add new links in the "menu-icons.js" file. A Photoshop PSD file of icons is included in the "extras" folder. All icons used in the menu are located in the "picts-mobi" folder.

Fonts: | More Details
You can change your font colors and sizes by editing the "style-mobi.css" with a text editor. Change the "body" px size to change the copy on all pages. Change the "title" px size to change all the title sizes. Click above for details.

Template Colors & Styles: | More Details
All colors can be edited either by editing the images in the "picts-mobi" folder, or by editing the "style-mobi.css" file.

Images: | More Details
You can replace the template images with your own. The "main-image.jpg" is shown on all pages. The "main-image-BG.jpg" is layered behind the "main-image.jpg". You will find all non-gallery images in the "picts-mobi" folder. Hover over any image in the folder to view the size.

Adding Images: | More Details
You can add new images to the template pages, however, you will want to keep your images very small in size so your website will load quickly on mobile devices. TIP: If you want to add larger images, do not add them to the homepage so your site will load quickly.

Adding Scripts Or Animation:
Scripts, Javascripts and Flash or video can be added to any of the template pages, however, most mobile devices load these types of items slowly and\or may not have support for these applications. If adding these types of items it is best not to add them to the homepage in the template.

Adding Pages: | More Details | Add a Gallery
You can add pages to your website by copying and pasting any one of the .htm pages and renaming it to whatever you need. You can then add text links from the other .htm pages, or you can add links in the menu by opening the "menu.js" and copying and pasting the 3 lines of code below itself. See menu editing above.

Page Heights & Widths:
So all your pages will maintain a standard height a ".pageheight" class is included in the "style-mobi.css". Edit this height to any height you need. The page width is defined by the ".pagewidth" class.

PAYPAL SHOPPING CART SETUP (TYPE 2 FORMS):
Paypal shopping cart forms have been included in the template "FORMgallery?.htm" pages. Follow the steps below to setup the shopping cart pages. This template includes "Type 2" Paypal forms.
  1. Setup a paypal merchant account.

  2. Move the 2 "gallery?.htm" pages into the "extras" folder.

  3. Rename 2 "FORMgallery?.htm" pages to "gallery?.htm" pages maintaining their respective gallery numbers. For example, rename "FORMgallery1.htm" to "gallery1.htm".

  4. Edit the "paypal@your-web-domain.com" in each "gallery?.htm" page in 1 place near the top with your Paypal e-mail. This will update the view cart / checkout button.

  5. You will edit the "0000000" in each form in the "gallery?.htm" pages with your generated product number. This will be the following code:

    <input type="hidden" name="hosted_button_id" value="0000000">

    Edit the 1st Paypal form in the "gallery1.htm" page. Find this note "START PAYPAL FORM 1-1". Click here for steps to setup the forms.


  6. Edit all forms as shown on the Paypal Type 2 Forms setup support page in the gallery pages.