HTML Software Showing a Blank Page

Web templates with a fade-in css script

Pinned Note Software Shows a Blank Page
When opening the template HTML pages in wysiwyg software a blank page is displayed. This is caused by the fade-in css and fade Javascript.

See Also…

Fix for the blank page
This blank page view is caused by the template fade-in script. To work around this, edit the "style.css" and near the top change the "#fadediv" to "#fadedivxxx". Be sure to change this class name back when you are done editing to allow your webpages to fade-in.

Script for the fade-in
In addition to the css code used for the webpage fade-in, a jQuery script is included in the "javascripts-footer.js" that does the actual fade-in function. This file may be in your template "includes" folder.

What is the fade script for?
This script allows the template webpages to fade-in. In some web browsers the page elements may "jump" as they load and this script hides them for 0.5 seconds as the page loads so they fade-in instead.

Templates that include this script
To see if your template includes the fade-in script, look in your .css file (style.css) and look for a class called #fadediv near the top, or check in your "javascripts-footer.js" (in the "includes" folder) for the jQuery function $("#fadediv").fadeOut("fast").

Removing the fade-in
If you do not want to use the fade function it can be removed a few different ways:
  • Option #1: Edit the following line in your "style.css":

    ...edit from the following...

    #fadediv { background-color: #FFFFFF; position: absolute; top: 0; left: 0; z-index: 22000; height: 100%; width: 100%; } this instead...

    #fadediv { position: absolute; top: 0; left: -10; z-index: -10; height: 2px; width: 2px; }

  • Option #2: Remove the following in each of your HTML pages near the top just after the <body> tag:

    <div id="fadediv"></div>

  • If you only do Option #1: above, do not remove the following function in the "javascripts-footer.js" or it may cause webpage loading errors:

    If you do Option #2: above, you will need to remove the following code in your "javascripts-footer.js" to prevent any webpage loading errors:


    $(window).load(function() {

  • Option #3: You can do both option #1 and #2, and then remove the script in the "javascripts-footer.js". In this case you can then remove the entire line for the #fadediv class in your "style.css".