Setting up your Website Template
Responsive HTML5 / Paypal Type 2
View Allwebco Responsive Web Templates
HTML5 Responsive Design | More Details & See section below.
KEY: MQs below indicates "media queries". The responsive css code for mobile located in the "media-queries.css". See section below and also support details.
Important: When the MQs kick-in, the drop menu will "stack" the menu items.
Getting Started:
Step 1:
CHOOSE HOMEPAGE: | More Details
EDIT HEADER LOGO: | More Details
In the "picts" folder either replace or edit the "logo.png". This image is 500 x 50 pixels in size. If you change the size you must edit the ".logo-respond" class in the "style.css". There is a Photoshop "logo.PSD" file in the "extras" folder. The default font used is "Futura Lt" and "Futura Md". If you want to change to another image type like .jpg, edit the "header.js" in 1 place from .png to .jpg and place your "logo.jpg" in the "picts" folder.
USING A TEXT LOGO: Edit the "var logotype" in the "header.js" from "graphic" to "text". Edit the "var logotext" "Your Website Title" in the "header.js" near the top with your website name. The font is defined in the "style.css" under "START TEXT HEADER CODE". The logo uses a Google Font. See also "FONTS:" in "Options" below.
Step 3:
EDIT FOOTER: | More Details
Open the "footer.js" file in Notepad, TextEdit, or any text editor, and edit the "Yourwebsite.com" text with your company or website name. This will update the footer info on all pages.
Step 4:
EDIT CONTACT INFO: | More Details
Open the "contact.js" in Notepad or any text editor file and change the Your 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 5:
EDIT THE CONTACT FORM:
If you DO want to use the contact form, move the "No-Form-contact.htm" into the "extras" folder and see the links below. If you want to NOT use a form on the contact page, move the "contact.htm" into the extras folder and re-name the "No-Form-contact.htm" to "contact.htm".
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.
Step 6:
REPLACE HOMEPAGE SLIDESHOW IMAGES (optional): | More Details
The homepage (index.html) includes a jQuery responsive slideshow application. In the "JQuery" folder replace 6 images, "imageJQR-1.jpg" through "imageJQR-6.jpg". Make your images 1200 x 600 pixels (you can change the height). This will update the homepage animation. Click the link above for details and options.
The location of the "Next & Prev arrows" and colors for the round buttons can be edited in the "style.css".
Step 7:
EDIT MP3 SAMPLES | More Details
The homepage (index.html) has a background sound named "home-sound.mp3" and "home-sound.ogg" in the "samples" 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" 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 8:
EDIT GALLERY IMAGES: | More Details | Lytebox
This template is using Lytebox slideshows in the gallery page. Click here for setup details. Replace the .jpg pictures in the "gallery" folder with your own by overwriting the files that are in there now and using the same generic names. Optionally, you can use any names if your edit the "gallery.htm" with the new image names.
In the "gallery" folder replace the 24 "Fgallery" pictures with full size photos. These images are now 750 x 500 pixels. You can resize them as your project requires. For optimal display, make all 24 images the same size.
The auto watermark is turned off. See "watermark" in "options" below.
Note: Set the color for the Lytebox popup in the "lytebox-JQ.css" in the "JQuery-lytebox" folder. Use colors listed at the top of the "lytebox-JQ.css". See section below for watermark help.
Step 9:
SETUP THE VIDEO PAGES: | More Details
YouTube videos are setup on the "video-1.htm" through "video-4.htm" template pages for a total of 4 videos.
This template uses embedded YouTube video. Setup a free YouTube account, get the embed code from each video and replace the code in each video page. Replace only the following code highlighted below and do not remove the ?rel=0 and other Youtube options code at the end:
<iframe width="300" height="183"
src="https://www.youtube.com/embed/6tQR8HIOU1g?rel=0
&autoplay=1&loop=0&wmode=opaque"
Step 10:
EDIT SOCIAL ICON LINKS: | More Details
Open the "social-links.js" in a plain text editor. Edit the link variables with your social links. The "social-links.js" includes "yes/no" variables to turn on and off any or all of the social links.
The social icons display floating on the left side of the browser, and on mobile will move to the right side of the header using css code in the "media-queries.css".
Step 11:
SETUP DOWNLOADS PAGE:
Edit the links in the "downloads.htm" with your filename links. The page is setup now for 6 different file types, PDF, mp3, mp3 ringtone, mp4, zip and jpg. You can setup the page to use a single or any number of file types. Files linked on the "downloads.htm" are located in the "downloads" folder.
Step 12:
SETUP THE MERCHANDISE PAGE: | More Details
If you are selling items on your website like CDs or T-shirts you will want to edit the "merchandise.htm". See "PAYPAL SHOPPING CART SETUP" below on this page. The images for the merchandise page are located in the "picts" folder.
If you are not using the cart, move the "merchandise.htm" and "thanks-payment.htm" into the "extras" folder. Remove links in the "menu.js" and "site_map.htm".
Step 13:
SETUP SITE SEARCH:
Open the "site_map.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 14:
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 15:
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, Yahoo and other search engines.
Step 16:
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 all template files and folders and all files inside the folders. You do not need to upload the "extras" folder.
Media Queries Responsive Code | More Details
MQs in this template control many parts of each webpage to conform for mobile and tablet. The responsive MQs css classes are located in the "media-queries.css". Three stages are used for screen widths of 1050, 750 and 482. As the browser width is made more narrow and each "stage" width threshold (breakpoint) is reached, code defined in the "media-queries.css" will take effect changing the webpage layout. You can edit these sizes in the "media-queries.css" using any plain text editor.
The "media-queries.css" is for mobile and includes some of the same class names as the "style.css" that alters these classes as the browser width becomes more narrow.
Menu on Mobile: The mobile menu includes two "stage" width thresholds of 890 and 640 in the "menu-drop.css". At 640 it will stack the menu items when viewed on smartphones. See "MENU EDITING" below and also testing MQs in support.
When editing some styles, if there is a "like" class in both the "style.css" and "media-queries.css" you may need to edit classes in both files in some cases. See responsive support details.
Options:
MENU EDITING: | More Details
This template includes a responsive drop menu. You can edit the names of the links like "ABOUT" or "CONTACT" to other page names by editing the "menu.js". Only change the one instance of the name and not the name with the ".htm" after it unless you have also renamed the .htm page. Whatever you change in the "menu.js" will change every page on the website. Keep the names short so your menu does not get too wide. You can add more pages by copying one link in the "menu.js" and pasting it below itself. Be sure to back up your files before you edit them. Click link above for more details.
SAMPLES & VIDEO PAGE NUMBERED BUTTON MENUS: Edit the "menu-music.js" or "menu-video.js" to update the "samples?.htm" or "video-?.htm" pages. You can rename the buttons with any names but try to keep them short for mobile. Copy and paste any link to add a new button.
NOTE: If you use a ' in a .js file add a slash before it like this \'
NUMBERED MENU HIGHLIGHT:
The samples and video pages number menus shows a highlight color indicating the page users are on. The jQuery script is located in the "javascripts.js". To edit the highlight color, edit the "#menusub a.selected" class in the "style.css".
GALLERY WATERMARK: | More Details
Turn on the gallery watermark at the bottom of the "lytebox-JQ.css" in the "JQuery-lytebox" folder by changing { display: none; } to { display: block; }. Edit both of the watermark .png files.
IMAGES: | More Details
Images are responsive. You can replace the template images with your own. You will find all non-gallery images in the "picts" folder. Hover over any image to view the size.
Responsive Image Note: If you want to make images larger in width, edit the image in the picts folder, then in the "style.css" you may need to edit the "max-width" style. Responsive image heights are automatic.
COLORS & STYLES: | More Details | Media Queries
Edit the font sizes, menu styles, background colors, page widths and heights, and all template colors in the "style.css" using any plain text editor (mobile menu colors are in the "media-queries.css"). Edit the "media-queries.css" only if you want to change how the template reacts on smaller screen mobile devices. See Media Queries above.
FONTS: | More Details | Media Queries | Google Fonts
This template uses Google Fonts. The code that "calls" the font files is the first line in the "style.css". Click link above for details.
Edit the font sizes in the "style.css" file. Change the class after the note "THE NEXT LINE CONTROLS THE DEFAULT FONT SIZE" px size to change the font sizes or colors on all pages. Change the "title" px size to change all the title sizes. You can find other web HEX colors by clicking here.
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.
SOCIAL ICONS: | More Details
Social icons are located in the "picts/icons" folder.
SITE MAP:
The "site_map.htm" is the 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.
PAGE HEIGHTS & WIDTHS:
So all your pages will maintain a minimum standard height and width ".pageheight-min" and "#pagewrapper" and "#contentwrapper" classes are included in the "style.css". Edit these heights and widths to any sizes you prefer.
ADDING IMAGES: | More Details
You can add new images to the template pages, however, you will want to keep your images 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. Images should be made responsive using the css "rimage" class.
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
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 links to the menu in the "menu.js". See menu editing above.
PAYPAL SHOPPING CART SETUP (TYPE 2 FORMS):
Paypal shopping cart forms have been included in the template "merchandise.htm". Follow the steps below to setup the shopping cart page. Click for more details.
Responsive HTML5 / Paypal Type 2
View Allwebco Responsive Web Templates
HTML5 Responsive Design | More Details & See section below.
KEY: MQs below indicates "media queries". The responsive css code for mobile located in the "media-queries.css". See section below and also support details.
Important: When the MQs kick-in, the drop menu will "stack" the menu items.
Getting Started:
Step 1:
CHOOSE HOMEPAGE: | More Details
- If you will be using the default homepage (index.html), move the "OPTIONAL-Home.htm" and "OPTIONAL-No-Animation-Home.htm" into the extras folder. Skip to the next step.
- If you would like to use the OPTIONAL-Home.htm (has extra text areas) as your homepage, move the "index.html" and "OPTIONAL-No-Animation-Home.htm" into the extras folder. Rename the "OPTIONAL-Home.htm" page to "index.html".
- If you would like to use the OPTIONAL-No-Animation-Home.htm as your homepage, move the "index.html" and "OPTIONAL-Home.htm" into the extras folder. Rename the "OPTIONAL-No-Animation-Home.htm" page to "index.html".
EDIT HEADER LOGO: | More Details
In the "picts" folder either replace or edit the "logo.png". This image is 500 x 50 pixels in size. If you change the size you must edit the ".logo-respond" class in the "style.css". There is a Photoshop "logo.PSD" file in the "extras" folder. The default font used is "Futura Lt" and "Futura Md". If you want to change to another image type like .jpg, edit the "header.js" in 1 place from .png to .jpg and place your "logo.jpg" in the "picts" folder.
USING A TEXT LOGO: Edit the "var logotype" in the "header.js" from "graphic" to "text". Edit the "var logotext" "Your Website Title" in the "header.js" near the top with your website name. The font is defined in the "style.css" under "START TEXT HEADER CODE". The logo uses a Google Font. See also "FONTS:" in "Options" below.
Step 3:
EDIT FOOTER: | More Details
Open the "footer.js" file in Notepad, TextEdit, or any text editor, and edit the "Yourwebsite.com" text with your company or website name. This will update the footer info on all pages.
Step 4:
EDIT CONTACT INFO: | More Details
Open the "contact.js" in Notepad or any text editor file and change the Your 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 5:
EDIT THE CONTACT FORM:
If you DO want to use the contact form, move the "No-Form-contact.htm" into the "extras" folder and see the links below. If you want to NOT use a form on the contact page, move the "contact.htm" into the extras folder and re-name the "No-Form-contact.htm" to "contact.htm".
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.
Step 6:
REPLACE HOMEPAGE SLIDESHOW IMAGES (optional): | More Details
The homepage (index.html) includes a jQuery responsive slideshow application. In the "JQuery" folder replace 6 images, "imageJQR-1.jpg" through "imageJQR-6.jpg". Make your images 1200 x 600 pixels (you can change the height). This will update the homepage animation. Click the link above for details and options.
The location of the "Next & Prev arrows" and colors for the round buttons can be edited in the "style.css".
Step 7:
EDIT MP3 SAMPLES | More Details
The homepage (index.html) has a background sound named "home-sound.mp3" and "home-sound.ogg" in the "samples" 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" 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 8:
EDIT GALLERY IMAGES: | More Details | Lytebox
This template is using Lytebox slideshows in the gallery page. Click here for setup details. Replace the .jpg pictures in the "gallery" folder with your own by overwriting the files that are in there now and using the same generic names. Optionally, you can use any names if your edit the "gallery.htm" with the new image names.
In the "gallery" folder replace the 24 "Fgallery" pictures with full size photos. These images are now 750 x 500 pixels. You can resize them as your project requires. For optimal display, make all 24 images the same size.
The auto watermark is turned off. See "watermark" in "options" below.
Note: Set the color for the Lytebox popup in the "lytebox-JQ.css" in the "JQuery-lytebox" folder. Use colors listed at the top of the "lytebox-JQ.css". See section below for watermark help.
Step 9:
SETUP THE VIDEO PAGES: | More Details
YouTube videos are setup on the "video-1.htm" through "video-4.htm" template pages for a total of 4 videos.
This template uses embedded YouTube video. Setup a free YouTube account, get the embed code from each video and replace the code in each video page. Replace only the following code highlighted below and do not remove the ?rel=0 and other Youtube options code at the end:
<iframe width="300" height="183"
src="https://www.youtube.com/embed/6tQR8HIOU1g?rel=0
&autoplay=1&loop=0&wmode=opaque"
Step 10:
EDIT SOCIAL ICON LINKS: | More Details
Open the "social-links.js" in a plain text editor. Edit the link variables with your social links. The "social-links.js" includes "yes/no" variables to turn on and off any or all of the social links.
The social icons display floating on the left side of the browser, and on mobile will move to the right side of the header using css code in the "media-queries.css".
Step 11:
SETUP DOWNLOADS PAGE:
Edit the links in the "downloads.htm" with your filename links. The page is setup now for 6 different file types, PDF, mp3, mp3 ringtone, mp4, zip and jpg. You can setup the page to use a single or any number of file types. Files linked on the "downloads.htm" are located in the "downloads" folder.
Step 12:
SETUP THE MERCHANDISE PAGE: | More Details
If you are selling items on your website like CDs or T-shirts you will want to edit the "merchandise.htm". See "PAYPAL SHOPPING CART SETUP" below on this page. The images for the merchandise page are located in the "picts" folder.
If you are not using the cart, move the "merchandise.htm" and "thanks-payment.htm" into the "extras" folder. Remove links in the "menu.js" and "site_map.htm".
Step 13:
SETUP SITE SEARCH:
Open the "site_map.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 14:
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 15:
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, Yahoo and other search engines.
Step 16:
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 all template files and folders and all files inside the folders. You do not need to upload the "extras" folder.
Media Queries Responsive Code | More Details
MQs in this template control many parts of each webpage to conform for mobile and tablet. The responsive MQs css classes are located in the "media-queries.css". Three stages are used for screen widths of 1050, 750 and 482. As the browser width is made more narrow and each "stage" width threshold (breakpoint) is reached, code defined in the "media-queries.css" will take effect changing the webpage layout. You can edit these sizes in the "media-queries.css" using any plain text editor.
The "media-queries.css" is for mobile and includes some of the same class names as the "style.css" that alters these classes as the browser width becomes more narrow.
Menu on Mobile: The mobile menu includes two "stage" width thresholds of 890 and 640 in the "menu-drop.css". At 640 it will stack the menu items when viewed on smartphones. See "MENU EDITING" below and also testing MQs in support.
When editing some styles, if there is a "like" class in both the "style.css" and "media-queries.css" you may need to edit classes in both files in some cases. See responsive support details.
Options:
MENU EDITING: | More Details
This template includes a responsive drop menu. You can edit the names of the links like "ABOUT" or "CONTACT" to other page names by editing the "menu.js". Only change the one instance of the name and not the name with the ".htm" after it unless you have also renamed the .htm page. Whatever you change in the "menu.js" will change every page on the website. Keep the names short so your menu does not get too wide. You can add more pages by copying one link in the "menu.js" and pasting it below itself. Be sure to back up your files before you edit them. Click link above for more details.
SAMPLES & VIDEO PAGE NUMBERED BUTTON MENUS: Edit the "menu-music.js" or "menu-video.js" to update the "samples?.htm" or "video-?.htm" pages. You can rename the buttons with any names but try to keep them short for mobile. Copy and paste any link to add a new button.
NOTE: If you use a ' in a .js file add a slash before it like this \'
NUMBERED MENU HIGHLIGHT:
The samples and video pages number menus shows a highlight color indicating the page users are on. The jQuery script is located in the "javascripts.js". To edit the highlight color, edit the "#menusub a.selected" class in the "style.css".
GALLERY WATERMARK: | More Details
Turn on the gallery watermark at the bottom of the "lytebox-JQ.css" in the "JQuery-lytebox" folder by changing { display: none; } to { display: block; }. Edit both of the watermark .png files.
IMAGES: | More Details
Images are responsive. You can replace the template images with your own. You will find all non-gallery images in the "picts" folder. Hover over any image to view the size.
Responsive Image Note: If you want to make images larger in width, edit the image in the picts folder, then in the "style.css" you may need to edit the "max-width" style. Responsive image heights are automatic.
COLORS & STYLES: | More Details | Media Queries
Edit the font sizes, menu styles, background colors, page widths and heights, and all template colors in the "style.css" using any plain text editor (mobile menu colors are in the "media-queries.css"). Edit the "media-queries.css" only if you want to change how the template reacts on smaller screen mobile devices. See Media Queries above.
FONTS: | More Details | Media Queries | Google Fonts
This template uses Google Fonts. The code that "calls" the font files is the first line in the "style.css". Click link above for details.
Edit the font sizes in the "style.css" file. Change the class after the note "THE NEXT LINE CONTROLS THE DEFAULT FONT SIZE" px size to change the font sizes or colors on all pages. Change the "title" px size to change all the title sizes. You can find other web HEX colors by clicking here.
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.
SOCIAL ICONS: | More Details
Social icons are located in the "picts/icons" folder.
SITE MAP:
The "site_map.htm" is the 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.
PAGE HEIGHTS & WIDTHS:
So all your pages will maintain a minimum standard height and width ".pageheight-min" and "#pagewrapper" and "#contentwrapper" classes are included in the "style.css". Edit these heights and widths to any sizes you prefer.
ADDING IMAGES: | More Details
You can add new images to the template pages, however, you will want to keep your images 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. Images should be made responsive using the css "rimage" class.
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
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 links to the menu in the "menu.js". See menu editing above.
PAYPAL SHOPPING CART SETUP (TYPE 2 FORMS):
Paypal shopping cart forms have been included in the template "merchandise.htm". Follow the steps below to setup the shopping cart page. Click for more details.
- Setup a Paypal merchant account.
- Edit the "paypal@your-web-domain.com" in the "merchandise.htm" page in 1 place on about line #50 with your Paypal e-mail.
- Edit the "paypal@your-web-domain.com" in the "menu.js" under the store tab.
This will update the 2 view cart buttons.
- You will edit the "10909929" or "5290739" in each form in the "merchandise.htm" with your generated product number. This will be the following code (highlighted):
<input type="hidden" name="hosted_button_id" value="10909929">
You do not need to edit any part of the form other than the number indicated above and the options section if the form has one.
Edit the 1st Paypal form in the "merchandise.htm" page. Find this note "ITEM 1-1". Click here for steps to setup the forms.
- In the "merchandise.htm" edit all forms as shown on the Paypal Type 2 Forms support page.
- There is a thank you page included. When generating the code in your Paypal account edit the "return" URL with your web domain URL and the "thanks-payment.htm" so the return page will display after a payment is completed. Click for form setup details.