CSS Mobile Detection Overlay
Can be added to any website or any website template. For HTML 4.01, XHTML and HTML5 websites. Click here for current info and options for this add-on.
View Allwebco Design add-ons
Outline: (Steps on this page)
1. Unzip and place files and folders
2. Test
3. Add CSS to page head area
4. Add Javascript to webpages
5. Edit link
6. Test
7. Options
8. Troubleshooting
Important:
This add-on is added to your existing top level or "full" desktop website, NOT to the mobile website.
Step 1:
See the "help-do-first-mobile.html" before you do the steps below.
Step 1A:
AUTOMATIC MOBILE REDIRECTION
If you want to use automatic redirection for mobile, do NOT do the steps on this help page. Instead see automatic mobile redirection support.
Step 2:
COPY OVER FILES | More Details
Place the "select-overlay" folder and all files and subfolders in this zip file folder in your main template or website folder. Place the "colortheme-overlay.css" and "help-overlay.html" in this zip file in your main template or website folder with your other HTML pages. Open the "help-overlay.html" in your website folder to proceed.
Step 3:
TEST THE OVERLAY | More Details
Shrink this help page width to less than 652 pixels and the overlay should display (you may have to scroll up). If the overlay did not work, your browser may not be CSS3 compliant, or try doing step #1 again.
Step 4:
ADD CSS CODE
Select and copy the following line of code and paste this into the head section of your HTML webpages above the </head> tag. NOTE: Paste the following code into all HTML pages you want the overlay to display in. Backup your files before you start.
If you have a CSS file now in your template or website you may want to paste the above code just below your CSS code in your head area.
ADVANCED GLOBAL OPTION You can optionally copy the css code from the "select-overlay.css" and then one of the "sl-color.css" files in the "select-overlay" folder into your existing css file instead of adding the above line. Code should be added to the bottom of your css file.
Step 5:
ADD JAVASCRIPT
Select and copy the code in the box below. Paste this into the body section of your HTML webpages near the very bottom, just above the </body></html> tags. NOTE: Paste the following code into all HTML pages you want the overlay to display in. Backup your files before you start.
View the source of this page to see where to add the code above.
ADVANCED GLOBAL OPTION You can optionally copy the code from the "select-overlay.js" in the "select-overlay" folder into one of your existing .js files instead of adding the above line. If you choose this method the code should be added to one of your .js files that display in the body section of your webpages like the footer.js, footer-copyright.js, header.js, sidebar.js.
Step 6:
EDIT THE OVERLAY LINK | Editing Help | Overlay Options
If you did not change any file or folder names skip this step. Edit the webpage the overlay links to by editing the "var selectlink" in the "select-overlay.js". If you placed your mobile website inside a folder named "mobile" the link you use will look like the following:
var selectlink = "mobile/index.html" // PAGE LINK
Step 7:
TEST YOUR WEBPAGES | More Details
Open the HTML webpage you added the code into. Shrink the webpage width to less than 652 pixels and the overlay should display. If the overlay did not work your browser may not be CSS3 compliant or check the steps above or see troubleshooting below in this document. Test all pages you added the overlay to.
Search Engine Notes:
This is passive css code and is not considered a detection script. It will have no adverse effect on SEO ranking. By adding a mobile site you may improve your ranking.
SEO TIP: Add a text link to your mobile site on your homepage and/or site map page.
OPTIONS:
OPTIONS IN THE select-overlay.js | Editing Help | Overlay Options
There are some options in the "select-overlay.js" including the overlay link, text, icon color and phone icon style. The "select-overlay.js" can be found in the "select-overlay" folder and can be edited with Notepad or any plain text editor.
CHANGING THE COLOR THEME: | More Details
Edit the "colortheme-overlay.css" to change the color theme. Edit the following line from blue to any of the colors listed at the top of this file.
@import url("sl-blue.css");
ICON IMAGES: | More Details
Both black and white images are included. They are inside subfolders "black-images" and "white-images" inside the "select-overlay" folder. Optional PSD Photoshop files are included in the "extras" folder.
To change the icon color: Edit the 2 variables near the top of the "select-overlay.js" to "black" or "white" (all lowercase).
SETTING THE DISPLAY THRESHOLD: | More Details
Click link above for details.
OTHER OPTIONS AND CUSTOM COLORS: | More Details
Click link above for details.
TROUBLESHOOTING:
Overlay not working:
If you do the steps above and the overlay is not working:
Can be added to any website or any website template. For HTML 4.01, XHTML and HTML5 websites. Click here for current info and options for this add-on.
View Allwebco Design add-ons
Outline: (Steps on this page)
1. Unzip and place files and folders
2. Test
3. Add CSS to page head area
4. Add Javascript to webpages
5. Edit link
6. Test
7. Options
8. Troubleshooting
Important:
This add-on is added to your existing top level or "full" desktop website, NOT to the mobile website.
Step 1:
See the "help-do-first-mobile.html" before you do the steps below.
Step 1A:
AUTOMATIC MOBILE REDIRECTION
If you want to use automatic redirection for mobile, do NOT do the steps on this help page. Instead see automatic mobile redirection support.
Step 2:
COPY OVER FILES | More Details
Place the "select-overlay" folder and all files and subfolders in this zip file folder in your main template or website folder. Place the "colortheme-overlay.css" and "help-overlay.html" in this zip file in your main template or website folder with your other HTML pages. Open the "help-overlay.html" in your website folder to proceed.
Step 3:
TEST THE OVERLAY | More Details
Shrink this help page width to less than 652 pixels and the overlay should display (you may have to scroll up). If the overlay did not work, your browser may not be CSS3 compliant, or try doing step #1 again.
Step 4:
ADD CSS CODE
Select and copy the following line of code and paste this into the head section of your HTML webpages above the </head> tag. NOTE: Paste the following code into all HTML pages you want the overlay to display in. Backup your files before you start.
If you have a CSS file now in your template or website you may want to paste the above code just below your CSS code in your head area.
ADVANCED GLOBAL OPTION You can optionally copy the css code from the "select-overlay.css" and then one of the "sl-color.css" files in the "select-overlay" folder into your existing css file instead of adding the above line. Code should be added to the bottom of your css file.
Step 5:
ADD JAVASCRIPT
Select and copy the code in the box below. Paste this into the body section of your HTML webpages near the very bottom, just above the </body></html> tags. NOTE: Paste the following code into all HTML pages you want the overlay to display in. Backup your files before you start.
View the source of this page to see where to add the code above.
ADVANCED GLOBAL OPTION You can optionally copy the code from the "select-overlay.js" in the "select-overlay" folder into one of your existing .js files instead of adding the above line. If you choose this method the code should be added to one of your .js files that display in the body section of your webpages like the footer.js, footer-copyright.js, header.js, sidebar.js.
Step 6:
EDIT THE OVERLAY LINK | Editing Help | Overlay Options
If you did not change any file or folder names skip this step. Edit the webpage the overlay links to by editing the "var selectlink" in the "select-overlay.js". If you placed your mobile website inside a folder named "mobile" the link you use will look like the following:
var selectlink = "mobile/index.html" // PAGE LINK
Step 7:
TEST YOUR WEBPAGES | More Details
Open the HTML webpage you added the code into. Shrink the webpage width to less than 652 pixels and the overlay should display. If the overlay did not work your browser may not be CSS3 compliant or check the steps above or see troubleshooting below in this document. Test all pages you added the overlay to.
Search Engine Notes:
This is passive css code and is not considered a detection script. It will have no adverse effect on SEO ranking. By adding a mobile site you may improve your ranking.
SEO TIP: Add a text link to your mobile site on your homepage and/or site map page.
OPTIONS:
OPTIONS IN THE select-overlay.js | Editing Help | Overlay Options
There are some options in the "select-overlay.js" including the overlay link, text, icon color and phone icon style. The "select-overlay.js" can be found in the "select-overlay" folder and can be edited with Notepad or any plain text editor.
CHANGING THE COLOR THEME: | More Details
Edit the "colortheme-overlay.css" to change the color theme. Edit the following line from blue to any of the colors listed at the top of this file.
@import url("sl-blue.css");
ICON IMAGES: | More Details
Both black and white images are included. They are inside subfolders "black-images" and "white-images" inside the "select-overlay" folder. Optional PSD Photoshop files are included in the "extras" folder.
To change the icon color: Edit the 2 variables near the top of the "select-overlay.js" to "black" or "white" (all lowercase).
SETTING THE DISPLAY THRESHOLD: | More Details
Click link above for details.
OTHER OPTIONS AND CUSTOM COLORS: | More Details
Click link above for details.
TROUBLESHOOTING:
Overlay not working:
If you do the steps above and the overlay is not working:
- Be sure you have added both the lines of code in steps #3 and #4 to all pages you want the overlay to display in.
- Links not working. Remember that hosting areas are case sensitive. Be sure all file and link names match exactly.
- Your "select-overlay" folder does not exist or is named incorrectly.
- Try testing in other browser software. Some older browsers are not CSS3 compliant.
- Try doing the above steps again from the start.
- See the css overlay add-on for other possible issues.
- Check the Pages or Files not Updating After an Edit support page.
- Check the Parts of the Template are Missing After Uploading support page.
- FONT PROBLEMS: The .CSS files may define some fonts, styles or "classes" that your template or website .css file may also be using. If you have any font issues you can paste the line in step #3 just above or just below your current .css head code in your HTML pages, or use the step #3 advanced global option.