Setting up your website template
Responsive HTML5 / CSS3
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-S.css". See section below and also support details.
Step 1:
CHOOSE HOME PAGE TO USE: | More details
This template includes 2 homepage options:
EDIT HEADER: | More details
Edit the "logo.jpg" in the "picts-S" folder with your logo image. The header background HEX color can be found in the "style-S.css" file. A "logo.PSD" file is located in the "extras-S" folder. The default font used is 38 points "AvantGarde Bk BT".
Edit the "header-S.js" to change from a .jpg logo to a .png or other image type for the image. If you change the logo width, edit the "logo-respond" width in the "style-S.css".
OPTIONAL PLAIN TEXT HEADER: To use the text header option, edit the "var logotype" in the "header-S.js" from "graphic" to "text". Edit the "var logotext" "Your Website Title" text in the "header-S.js" with your site name.
Step 3:
EDIT CONTACT INFO:
In the "index.html" edit the company name, address, phone and fax number and email address. The email is using a Javascript so search engines can not see your email and you will receive less spam email. Edit these variables in the source code to update the email:
var emailname = "info";
var emailserver = "your-web-domain.com";
Step 4:
EDIT TWITTER, FACEBOOK GOOGLE+ LINKS: | More details
Edit the links near the bottom of the "index.html" with your link to Twitter, Facebook and the others. Delete any line for an icon you are not using. To remove all social icons, delete the code between the "START SOCIAL ICONS" and "END SOCIAL ICONS" notes.
Step 5:
REPLACE HOMEPAGE SLIDESHOW IMAGES (optional): | More details
The homepage (index.html) includes a jQuery responsive slideshow application. In the "JQuery-S" folder replace 4 images, "imageJQR-1.jpg" through "imageJQR-4.jpg". Make your images 1200 x 350 pixels. 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-S.css" and "responsive-slides.css" in the "JQuery-S" folder.
Step 6:
EDIT PAGE: | Software choices | Notepad editing
Edit the text in the "index.html" with your website 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 7:
EDIT TITLES, DESCRIPTIONS AND KEYWORDS: | More details
Edit the meta title (at the very top of the page) and also the description and the keywords with your product or service details. 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 8:
UPLOAD: | More details
Upload the page on to your hosting company 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-S" folder.
The Media Queries Responsive Code | More details
MQs in this template control areas of the webpage to conform for mobile and tablet. The responsive MQs css classes are located in the "media-queries-S.css". Three stages (breakpoints) are used for max screen widths of 890, 740 and 482.
As the browser width is made more narrow and each "stage" width threshold is reached, code defined in the "media-queries-S.css" will take effect changing the webpage layout. You can edit these sizes in the "media-queries-S.css" using any plain text editor.
The "media-queries-S.css" is for mobile and includes some of the same class names as the "style-S.css" to alter these classes as the browser width becomes more narrow.
When editing any font sizes in this template you will need to edit the class in the "style-S.css", then edit the duplicate class in the "media-queries-S.css" to setup the mobile font sizes. See responsive support details.
Options:
ADDING PAGES: | More details
You can add new webpages to your website by copying and pasting any one of the pages and renaming it to whatever you need. You can add text links to the other pages in your homepage.
ADDING APPLICATIONS: | More details
Scripts, video, jQuery and Flash applications, links, images and almost any feature you see on other websites can be added to the template page. Allwebco provides many free scripts and add-ons as well as reasonably priced premium add-ons that can be added to any template or website.
FONTS: | More details | Media Queries
This template uses Google Fonts. The code that "calls" the font files is the first line in the "style-S.css".
This template includes Media Queries css code. Edit font sizes in both the "style-S.css" and "media-queries-S.css". Click above for details.
You can change your font colors and sizes by editing the "style-S.css" with a text editor. You can find other font colors by clicking here. Change the class after the note "THE NEXT LINE CONTROLS THE FONT SIZE ON ALL PAGES" px size to change the default page font sizes or colors. Change the "title" px size to change the title size.
TEMPLATE COLORS: | More details
All template page colors can be edited in the "coolstyle-S.css" with a text editor. Click link above for more help.
PICTURES: | More details
You can replace all pictures with your own. Hover over any image to view the size. You will find all pictures in the "picts-S" and "JQuery-S" folders.
PAGE HEIGHT:
A "pageheight" class is included in the "style-S.css" with a "min-height" you can edit.
PAGE & CONTENT WIDTHS:
A ".pagewrapper" class is included in the "style-S.css" for the overall page width. Other classes define each individual section width.
Responsive HTML5 / CSS3
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-S.css". See section below and also support details.
Step 1:
CHOOSE HOME PAGE TO USE: | More details
This template includes 2 homepage options:
- To use the default homepage, move the "OPTIONAL-home.html" and "OPTIONAL-No-Animation-home.htm" into the "extras-S" folder.
- To use the OPTIONAL-home.html, move the "index.html" and "OPTIONAL-No-Animation-home.htm" into the "extras-S" folder. Rename the "OPTIONAL-home.html" to "index.html".
- To use the No-Animation homepage, move the "index.html" and "OPTIONAL-home.html" into the "extras-S" folder. Rename the "OPTIONAL-No-Animation-home.htm" to "index.html".
EDIT HEADER: | More details
Edit the "logo.jpg" in the "picts-S" folder with your logo image. The header background HEX color can be found in the "style-S.css" file. A "logo.PSD" file is located in the "extras-S" folder. The default font used is 38 points "AvantGarde Bk BT".
Edit the "header-S.js" to change from a .jpg logo to a .png or other image type for the image. If you change the logo width, edit the "logo-respond" width in the "style-S.css".
OPTIONAL PLAIN TEXT HEADER: To use the text header option, edit the "var logotype" in the "header-S.js" from "graphic" to "text". Edit the "var logotext" "Your Website Title" text in the "header-S.js" with your site name.
Step 3:
EDIT CONTACT INFO:
In the "index.html" edit the company name, address, phone and fax number and email address. The email is using a Javascript so search engines can not see your email and you will receive less spam email. Edit these variables in the source code to update the email:
var emailname = "info";
var emailserver = "your-web-domain.com";
Step 4:
EDIT TWITTER, FACEBOOK GOOGLE+ LINKS: | More details
Edit the links near the bottom of the "index.html" with your link to Twitter, Facebook and the others. Delete any line for an icon you are not using. To remove all social icons, delete the code between the "START SOCIAL ICONS" and "END SOCIAL ICONS" notes.
Step 5:
REPLACE HOMEPAGE SLIDESHOW IMAGES (optional): | More details
The homepage (index.html) includes a jQuery responsive slideshow application. In the "JQuery-S" folder replace 4 images, "imageJQR-1.jpg" through "imageJQR-4.jpg". Make your images 1200 x 350 pixels. 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-S.css" and "responsive-slides.css" in the "JQuery-S" folder.
Step 6:
EDIT PAGE: | Software choices | Notepad editing
Edit the text in the "index.html" with your website 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 7:
EDIT TITLES, DESCRIPTIONS AND KEYWORDS: | More details
Edit the meta title (at the very top of the page) and also the description and the keywords with your product or service details. 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 8:
UPLOAD: | More details
Upload the page on to your hosting company 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-S" folder.
The "media-queries-S.css" is for mobile and includes some of the same class names as the "style-S.css" to alter these classes as the browser width becomes more narrow.
When editing any font sizes in this template you will need to edit the class in the "style-S.css", then edit the duplicate class in the "media-queries-S.css" to setup the mobile font sizes. See responsive support details.
ADDING PAGES: | More details
You can add new webpages to your website by copying and pasting any one of the pages and renaming it to whatever you need. You can add text links to the other pages in your homepage.
ADDING APPLICATIONS: | More details
Scripts, video, jQuery and Flash applications, links, images and almost any feature you see on other websites can be added to the template page. Allwebco provides many free scripts and add-ons as well as reasonably priced premium add-ons that can be added to any template or website.
FONTS: | More details | Media Queries
This template uses Google Fonts. The code that "calls" the font files is the first line in the "style-S.css".
This template includes Media Queries css code. Edit font sizes in both the "style-S.css" and "media-queries-S.css". Click above for details.
You can change your font colors and sizes by editing the "style-S.css" with a text editor. You can find other font colors by clicking here. Change the class after the note "THE NEXT LINE CONTROLS THE FONT SIZE ON ALL PAGES" px size to change the default page font sizes or colors. Change the "title" px size to change the title size.
TEMPLATE COLORS: | More details
All template page colors can be edited in the "coolstyle-S.css" with a text editor. Click link above for more help.
PICTURES: | More details
You can replace all pictures with your own. Hover over any image to view the size. You will find all pictures in the "picts-S" and "JQuery-S" folders.
PAGE HEIGHT:
A "pageheight" class is included in the "style-S.css" with a "min-height" you can edit.
PAGE & CONTENT WIDTHS:
A ".pagewrapper" class is included in the "style-S.css" for the overall page width. Other classes define each individual section width.