Setting up your Mobile Responsive Template:
Mobile Sub-Site Support
View Allwebco mobi-Hybrid Web Templates
HTML5 Responsive Design | More Details & See section below.
KEY: MQs below indicates "media queries". The responsive css code for mobile located at the bottom of the "style-mobi.css". See section below and also support details.
Getting Started:
Critical Warning: Be careful to not confuse your top level website with the website inside the "mobile" folder when uploading! Always upload mobile pages into the "mobile" folder in your hosting FTP.
Step 1:
See the "help-do-first-mobile.html" before you do the steps below.
Step 2:
CHOOSE HOME PAGE TO USE: | More Details
This template includes 2 homepage options:
EDIT HEADER: | More Details | Image Editing
In the "picts-mobi" folder either replace or edit the "logo-mobi.jpg". Edit this graphic with your logo or image. This image is 200 x 50 pixels in size. There is a Photoshop "logo-mobi.PSD" file in the "extras-mobi" folder. The default font used is 30 point bold "AvantGarde Bk BT".
To maintain mobile compatibility do not exceed 200 pixels in width. You can edit the logo size in the "style-mobi.css" by editing the ".logoimage" class, however, the MQs (Media Queries at the bottom of the "style-mobi.css") will make it respond to 200 pixels wide.
If you want to change to a "logo.png" image, edit the "header-mobi.js" in 1 place from .jpg to .png and place your 200 x 50 "logo.png" in the "picts-mobi" folder.
OPTIONAL PLAIN TEXT HEADER: To use the text header option, edit the "var logotype" in the "header-mobi.js" from "graphic" to "text". Edit the "var textlogo1" and 2 "Yourwebsitetitle" and ".com" text with your site name.
The header icon color can be set to black or white in the "header-mobi.js". See header icons section below.
Step 4:
EDIT FOOTER: | More Details
Open the "footer-mobi.js" file in Notepad, TextEdit, or any text editor, and edit the "Yourcompany.com" text with your company or website name. This will update the footer info on all pages.
Step 5:
EDIT CONTACT INFO: | More Details
Open the "contact-mobi.js" in Notepad or any text editor file and change the company name, address, phone and fax numbers, and e-mail address (edit the email in 2 places). This will update the contact info on the contact page.
Step 6:
EDIT CONTACT PAGE LOCATION MAP | More Details
This template includes a Google map window. Click link above to setup the map.
Step 7:
SETUP THE GALLERY PAGE: | More Details
To use the OPTIONAL-gallery.htm move the "gallery.htm" into the "extras-mobi" folder and rename the "OPTIONAL-gallery.htm" to "gallery.htm".
To use the products shopping cart page instead of the image gallery see "PAYPAL TYPE 2 CART SETUP" below on this page.
The best way to setup the pictures in the gallery is not to actually edit the HTML pages and change the pictures on each individual page. The fastest way is to simply replace the pictures in the "gallery" 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 6 "Fgallery" pictures with full size photos. Replace the 6 "gallery" pictures with your thumbnails. The thumbnails are now 130 x 87 pixels and Fgallery images are 600 x 400 pixels, but you can make them any size that you prefer.
IMAGE VIEWER OPTIONS: | More Details
You can change some options for the gallery image viewer page (image-viewer.htm) by editing the "var viewer" in the "header-mobi.js" in Notepad. Options include new browser window, or popup for the viewer.
Step 8:
PDF PAGE SETUP: | More Details
In the "PDF-mobi" 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 9:
EDIT FOOTER SOCIAL LINKS: | Social Links | .js variable editing
Open the "social-links-mobi.js" in a text editor and edit the 3 link variables with your link to Twitter Facebook and LinkedIn. There are "yes/no" variables to turn off any or all of the social links at the top of this file. Variable editing help.
Step 10:
SETUP SITE SEARCH:
Open the "resources.htm" and edit "allwebcodesign.com" in the "START SEARCH", "END SEARCH" section with your website domain in (2) places. If you require a more custom search with no ads, check in your Google account for info.
Step 11:
payments.htm PAYPAL PAYMENT PAGE:
Edit the "paypal@your-web-domain.com" business email 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. To remove the form, delete the code between the notes for the Paypal form in the "payments.htm".
Step 12:
EDIT THREE HOMEPAGE LINKS:
There are three links that link "up" one folder to the full website. They now link to the help page "../help-do-first-mobile.html". Edit these links to "../index.html" (or your full site homepage name). Edit 2 links in the "index.html" and 1 link in the "resources.htm".
Step 13:
EDIT PAGES: | Software Choices | Notepad Editing
Edit the text on all HTML pages with your information. You can use Expression Web, Frontpage, 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 14:
EDIT TITLE, DESCRIPTIONS & KEYWORDS: | More Details
Open each of the pages and change the title tag (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. You should use a unique title on each page. 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 15:
UPLOAD: | More Details
Important Caution: If you are using this as an add-on, upload the "mobile" and "select-overlay" as folders. If this addon will be your top level website, you will instead upload the files that are inside the "mobile" folder and not upload the folder.
Upload the pages on to your hosting company's server using ftp software or Windows Explorer or your control panel. Be sure to upload all template files and folders and all files inside the folders. You do not need to upload the "extras-mobi" folder.
Step 16:
IMPORTANT SEO: | More Details
If you are adding this template to an existing website, be sure to add a text link similar to the following to your main website homepage and site map page linking into the mobile folder homepage.
<a href="mobile/index.html">View Mobile Version</a>
You can optionally use a visible image with the link.
The Media Queries Responsive Code | More Details
MQs in this template control some parts of each webpage to conform for mobile and tablet. The responsive MQs css classes are located at the bottom of the "style-mobi.css". One stage is used for screen widths of 482 and less. As the browser width is made more narrow and the 482 width threshold is reached, code defined at the bottom of the "style-mobi.css" will take effect changing the webpage layout. You can edit these classes in the "style-mobi.css" using any plain text editor.
The Media Queries section at the bottom of the "style-mobi.css" is for mobile and includes some of the same class names as code above this section. It alters these "like" classes as the browser width becomes more narrow.
When editing Media Queries styles, if there is a "like" class in the "style-mobi.css" you may need to also edit this duplicate class in some cases. See responsive support details.
Options:
FONTS AND COLORS & STYLES: | More Details
Edit the "style-mobi.css" to change fonts, colors and layout widths and heights. Click link above for details.
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.
HEADER BACKGROUND COLOR:
The background color for the header can be edited in the "style-mobi.css" by editing the ".header" class.
HEADER ICONS:
The header icon links can be edited, or turned off with a yes/no variable in the "header-mobi.js". Icon images are in the "header-icons" folder. To maintain mobile compatibility do not use more than 3 icons in the header unless you make your logo smaller (edit logo width in "style-mobi.css"). Optional black and white icons are included and alternate icons can be found in the "header-icons" folder.
MENU EDITING: | More Details
In this template the home page (index.html) is the menu. To add new links copy and paste 3 lines of code below itself. Be sure to back up your files before you edit them.
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.
SITE MAP:
The "index.html" acts like a site map and additionally the "resources.htm" is a site map page. This page is linked from the home page (index.html) to help list all your pages at the search engines. Do not remove this link.
IMAGES: | More 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: | 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 new homepage button links. 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.
EXTRAS FOLDER FILES:
The files in the extras folder are optional files. You can use any of these files as indicated elsewhere on this help page and related support pages. This folder does not need to be uploaded to your hosting area.
PAYPAL TYPE 2 CART SETUP | More Details
A Paypal cart has been setup in the "products.htm" page. Follow the steps below to setup the shopping cart. This template includes "Type 2" Paypal forms.
Mobile Sub-Site Support
View Allwebco mobi-Hybrid Web Templates
HTML5 Responsive Design | More Details & See section below.
KEY: MQs below indicates "media queries". The responsive css code for mobile located at the bottom of the "style-mobi.css". See section below and also support details.
Getting Started:
Critical Warning: Be careful to not confuse your top level website with the website inside the "mobile" folder when uploading! Always upload mobile pages into the "mobile" folder in your hosting FTP.
Step 1:
See the "help-do-first-mobile.html" before you do the steps below.
Step 2:
CHOOSE HOME PAGE TO USE: | More Details
This template includes 2 homepage options:
- To use the default homepage, move the "OPTIONAL-homepage.htm" into the "extras-mobi" folder.
- To use the OPTIONAL homepage, move the "index.html" into the "extras-mobi" folder. Rename the "OPTIONAL-homepage.htm" to "index.html".
EDIT HEADER: | More Details | Image Editing
In the "picts-mobi" folder either replace or edit the "logo-mobi.jpg". Edit this graphic with your logo or image. This image is 200 x 50 pixels in size. There is a Photoshop "logo-mobi.PSD" file in the "extras-mobi" folder. The default font used is 30 point bold "AvantGarde Bk BT".
To maintain mobile compatibility do not exceed 200 pixels in width. You can edit the logo size in the "style-mobi.css" by editing the ".logoimage" class, however, the MQs (Media Queries at the bottom of the "style-mobi.css") will make it respond to 200 pixels wide.
If you want to change to a "logo.png" image, edit the "header-mobi.js" in 1 place from .jpg to .png and place your 200 x 50 "logo.png" in the "picts-mobi" folder.
OPTIONAL PLAIN TEXT HEADER: To use the text header option, edit the "var logotype" in the "header-mobi.js" from "graphic" to "text". Edit the "var textlogo1" and 2 "Yourwebsitetitle" and ".com" text with your site name.
The header icon color can be set to black or white in the "header-mobi.js". See header icons section below.
Step 4:
EDIT FOOTER: | More Details
Open the "footer-mobi.js" file in Notepad, TextEdit, or any text editor, and edit the "Yourcompany.com" text with your company or website name. This will update the footer info on all pages.
Step 5:
EDIT CONTACT INFO: | More Details
Open the "contact-mobi.js" in Notepad or any text editor file and change the company name, address, phone and fax numbers, and e-mail address (edit the email in 2 places). This will update the contact info on the contact page.
Step 6:
EDIT CONTACT PAGE LOCATION MAP | More Details
This template includes a Google map window. Click link above to setup the map.
Step 7:
SETUP THE GALLERY PAGE: | More Details
To use the OPTIONAL-gallery.htm move the "gallery.htm" into the "extras-mobi" folder and rename the "OPTIONAL-gallery.htm" to "gallery.htm".
To use the products shopping cart page instead of the image gallery see "PAYPAL TYPE 2 CART SETUP" below on this page.
The best way to setup the pictures in the gallery is not to actually edit the HTML pages and change the pictures on each individual page. The fastest way is to simply replace the pictures in the "gallery" 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 6 "Fgallery" pictures with full size photos. Replace the 6 "gallery" pictures with your thumbnails. The thumbnails are now 130 x 87 pixels and Fgallery images are 600 x 400 pixels, but you can make them any size that you prefer.
IMAGE VIEWER OPTIONS: | More Details
You can change some options for the gallery image viewer page (image-viewer.htm) by editing the "var viewer" in the "header-mobi.js" in Notepad. Options include new browser window, or popup for the viewer.
Step 8:
PDF PAGE SETUP: | More Details
In the "PDF-mobi" 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 9:
EDIT FOOTER SOCIAL LINKS: | Social Links | .js variable editing
Open the "social-links-mobi.js" in a text editor and edit the 3 link variables with your link to Twitter Facebook and LinkedIn. There are "yes/no" variables to turn off any or all of the social links at the top of this file. Variable editing help.
Step 10:
SETUP SITE SEARCH:
Open the "resources.htm" and edit "allwebcodesign.com" in the "START SEARCH", "END SEARCH" section with your website domain in (2) places. If you require a more custom search with no ads, check in your Google account for info.
Step 11:
payments.htm PAYPAL PAYMENT PAGE:
Edit the "paypal@your-web-domain.com" business email 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. To remove the form, delete the code between the notes for the Paypal form in the "payments.htm".
Step 12:
EDIT THREE HOMEPAGE LINKS:
There are three links that link "up" one folder to the full website. They now link to the help page "../help-do-first-mobile.html". Edit these links to "../index.html" (or your full site homepage name). Edit 2 links in the "index.html" and 1 link in the "resources.htm".
Step 13:
EDIT PAGES: | Software Choices | Notepad Editing
Edit the text on all HTML pages with your information. You can use Expression Web, Frontpage, 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 14:
EDIT TITLE, DESCRIPTIONS & KEYWORDS: | More Details
Open each of the pages and change the title tag (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. You should use a unique title on each page. 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 15:
UPLOAD: | More Details
Important Caution: If you are using this as an add-on, upload the "mobile" and "select-overlay" as folders. If this addon will be your top level website, you will instead upload the files that are inside the "mobile" folder and not upload the folder.
Upload the pages on to your hosting company's server using ftp software or Windows Explorer or your control panel. Be sure to upload all template files and folders and all files inside the folders. You do not need to upload the "extras-mobi" folder.
Step 16:
IMPORTANT SEO: | More Details
If you are adding this template to an existing website, be sure to add a text link similar to the following to your main website homepage and site map page linking into the mobile folder homepage.
<a href="mobile/index.html">View Mobile Version</a>
You can optionally use a visible image with the link.
The Media Queries Responsive Code | More Details
MQs in this template control some parts of each webpage to conform for mobile and tablet. The responsive MQs css classes are located at the bottom of the "style-mobi.css". One stage is used for screen widths of 482 and less. As the browser width is made more narrow and the 482 width threshold is reached, code defined at the bottom of the "style-mobi.css" will take effect changing the webpage layout. You can edit these classes in the "style-mobi.css" using any plain text editor.
The Media Queries section at the bottom of the "style-mobi.css" is for mobile and includes some of the same class names as code above this section. It alters these "like" classes as the browser width becomes more narrow.
When editing Media Queries styles, if there is a "like" class in the "style-mobi.css" you may need to also edit this duplicate class in some cases. See responsive support details.
Options:
FONTS AND COLORS & STYLES: | More Details
Edit the "style-mobi.css" to change fonts, colors and layout widths and heights. Click link above for details.
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.
HEADER BACKGROUND COLOR:
The background color for the header can be edited in the "style-mobi.css" by editing the ".header" class.
HEADER ICONS:
The header icon links can be edited, or turned off with a yes/no variable in the "header-mobi.js". Icon images are in the "header-icons" folder. To maintain mobile compatibility do not use more than 3 icons in the header unless you make your logo smaller (edit logo width in "style-mobi.css"). Optional black and white icons are included and alternate icons can be found in the "header-icons" folder.
MENU EDITING: | More Details
In this template the home page (index.html) is the menu. To add new links copy and paste 3 lines of code below itself. Be sure to back up your files before you edit them.
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.
SITE MAP:
The "index.html" acts like a site map and additionally the "resources.htm" is a site map page. This page is linked from the home page (index.html) to help list all your pages at the search engines. Do not remove this link.
IMAGES: | More 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: | 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 new homepage button links. 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.
EXTRAS FOLDER FILES:
The files in the extras folder are optional files. You can use any of these files as indicated elsewhere on this help page and related support pages. This folder does not need to be uploaded to your hosting area.
PAYPAL TYPE 2 CART SETUP | More Details
A Paypal cart has been setup in the "products.htm" page. Follow the steps below to setup the shopping cart. This template includes "Type 2" Paypal forms.
- Setup a Paypal merchant account.
- In the "products.htm" edit the "paypal@your-web-domain.com" near the top with your Paypal email for the "VIEW CART" button.
- Ordering options are included with each form for size and color. You can generate any type of options when you are creating the forms. If you do not need any options you can delete the code between the notes in the "products.htm".
- In the "products.htm" edit the "5290739" in each form with your generated product number. This will be the following code:
<input type="hidden" name="hosted_button_id" value="5290739">
Edit the 1st Paypal form in the "products.htm" page. Find this note "START PAYPAL FORM 1-1".
- Edit all forms as shown on the "Paypal Type 2 Forms Setup" support page in the "products.htm".
- There is a thank you (return) page included that you will set when you generate your Paypal code. View details.