|
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 HTML5 Responsive Design | More Details & See section below. The responsive css code for mobile is located in the bottom of the "style-mobi.css". See section below and also support details. Mobile Setup Notes: 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 main 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 300 x 50 pixels in size. There is a Photoshop logo.PSD file in the "extras" folder. The font used is 28 points "Folio Md BT" with a letter spacing of -2. Responsive Logo: The logo width is defined in 2 places (300px and 200px) in the "style-mobi.css" with the class ".logoimage". To stay mobile compatible do not widen the 200 pixel width in the bottom media queries section. Edit Twitter, Facebook Links: | Social Links | .js variable editing Open the "header.js" in a text editor and edit the 2 link variables with your link to Twitter and Facebook. 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@your-web-domain.com">info@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: | 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 24 "Fgallery" pictures with full size photos. Replace the 24 "gallery" pictures with your thumbnails. Thumbnails are now 75 x 75 pixels in size. Full sized images are 750 x 500. You can make full size images any size that you prefer. Media Queries: The "style-mobi.css" uses the responsive class ".Galimg-respond" for the gallery thumbnail image sizes in multiple places. Step 5: 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 6: 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 7: 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 8: 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" folders and all files in these folders. The Media Queries (MQs) Responsive Code | More Details MQs in this template affect the title font size, margins, gallery thumbnails and the header logo. The responsive MQs css classes are located at the bottom of the "style-mobi.css". When this template is viewed on screens of 482 wide or less the "media-queries.css" will take effect altering the above listed items. You can edit these sizes in the bottom of the "style-mobi.css" using any plain text editor. See testing MQs in support. The "media-queries.css" section is for mobile and includes some of the same class names as some classes above the MQs section in the "style-mobi.css". See responsive support details. 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 the menu by copying a line of menu link code and pasting it right below itself. Be sure to back up your files before you edit them. Fonts: | More 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: | 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. You will find all non-gallery images in the "picts-mobi" folder, and some Photoshop PSD files in the "extras" folder. Hover your mouse over any image to see 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. |