Setting up your Mobi | Hybrid template:
This is a "Mobi Level 1 HTML5" template:

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: | Click for 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. There is a Photoshop logo.PSD file in the "extras" folder. The font used is Trajan Pro.

Edit Twitter, Facebook, YouTube 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 YouTube. 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:
Open the "contact.htm" and edit the text with your website name, address, phone and fax numbers and e-mail. The e-mail uses "unicode" code for the @ in the e-mail to slow down spamming.

Example: Edit the highlighted areas as shown below for your e-mail. Edit "info" in 2 places with your e-mail name. Edit "your-web-domain.com" in 2 places with the domain part of your e-mail.

<a href="mailto:info&#64;your-web-domain.com">info&#64;your-web-domain.com</a>

Note: This type of e-mail code will stop only some spamming. For more secure methods you may want to try some searches at Google for "hide email Javascript".

Step 4:
Edit Gallery Images: | Click for 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 24 "Fgallery" pictures with full size photos. Replace the 24 "gallery" pictures with your thumbnails. Thumbnails are now 50 x 50 pixels in size. Full sized images are 750 x 500. You can make full size images any size that you prefer.

Step 5:
Edit mp3 Samples | Click for more details
The homepage (index.html) has a background sound named "home-sound.mp3" and "home-sound.ogg" in the "samples-mobi" folder. Replace both files to have your own sound play on the homepage. You may want to keep the 2 "home-sound" files small so the homepage downloads fast.

In the "samples-mobi" folder, replace "song1-1.mp3" through "song1-12.mp3" with your mp3s. Mp3s are now 128 kBits, 44100 HZ, stereo. You can use any kBits you would prefer, however, you will want to use 44100 Hz when saving. Test the "samples-1.htm" and check that the mp3s are updated.

Proceed to the next set of mp3 samples for "samples-2.htm" and edit "song2-1.mp3" through "song2-12.mp3".

Step 6:
Edit Videos | Click for more details
Replace the 4 ".wmv" videos in the "videos-mobi" folder with your videos. These are Windows Media type videos. Replace the 4 ".mp4" files with your videos for Quicktime. For help creating these videos see the Video Setup "Page" Type support page. See the "How we created the template video samples" section.

Replace the 4 .jpg images in the "videos-mobi" folder with your video still images.

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

Step 7:
Setup buymp3s.htm Page | Click for more details
The "buymp3s.htm" is using a free iTunes widget and links to Amazon mp3 sales pages. You can add links and/or widgets to sell your mp3s through your website to mobile and non-mobile users. See the Mobi Hybrid Mp3 Templates support page for details.

Step 8:
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 9:
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 10:
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 "samples-mobi" and "videos-mobi" 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: | Click for details
You can change the names on the menu buttons like "About" or "Contact" to other page names by editing the "menu.js". Here is an example:
Image
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 lines of menu code and pasting it right below itself. Be sure to back up your files before you edit them.

Edit the "menu-music.js" with a text editor to update the menu linking to the samples pages just under the logo.

The Menu Highlight:
The menu in this template shows a highlight color indicating the page you are on in the menu. The script for this is located in the "menu.js" and can be turned of with the yes/no variable near the top. To edit the highlight color, edit the "#menunav a.current" class in your .css file.

Fonts & Css Styles: | More details | Google Fonts
This template uses Google Fonts. The code that "calls" the font files is the first line in the "style-mobi.css". Click above for details.

You can change your font colors and sizes by editing the "style-mobi.css" with a text editor. Change the 2nd "body" class em size to change the copy on all pages. Change the "title" em size to change all the title sizes. Click above for details.

Template Colors & Styles: | Click for 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: | Click for details
You can replace the template images with your own. You will find all non-gallery images in the "picts-mobi" folder. Hover over any image to view the size.

Adding Images: | Click for 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: | Click for 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.