Add the Date to a Website Template

Add the Date to Any Template

This is some simple code to add the date to your template pages and then locate it anywhere on the page. Follow the steps below:

Step #1
Select and copy the following code, then paste this into your header.js template file. At the bottom is fine (be sure you copy every line in the box below):


// START DATE SCRIPT

var showd	= "yes"  	// SHOW THE DATE
var dateLR	= "left"  	// DATE LEFT OR RIGHT
var dateX	= "125"  	// DATE X LOCATION
var dateY	= "150"  	// DATE Y LOCATION
   if (showd == "yes") {
document.write('<div id="date-location" style="'+dateLR+': '+dateX+'px; POSITION: absolute; TOP: '+dateY+'px">');
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<span class=\"date-font\"><nobr>" + weekday[d.getDay()] + " ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getDate() + ". ")
document.write(d.getFullYear())
document.write("</nobr><br></span>")
document.write('</div>');
}

Step #2
Highlight, copy, and then paste the following code into your corporatestyle.css or coolstyle.css file. Somewhere near the bottom is fine:

.date-font { color: #999999; font: 12px verdana, arial, sans-serif; font-weight: bold; }

Options:
Now you can change the location of the date on the page. Edit the header.js and change the "var" options, edit the code you added in step #1. You will see 4 options to change. You can change the font size and color, edit the new .css code you added in step #2.

Troubleshooting:
If you added the above code and do not see the date:

Perhaps the date is located under the flash animation. You can not have items on top of the Flash. Try changing the location variables seen in step #1.
Perhaps you need to change the color of the font. Try editing the .css code you added in step #2. Change the 999999 to another hex number like 000000 or FFFFFF.
You may have missed a line of the code in step #1 or step #2. Try copying the code again and be sure you get every line.

Related Topics:
More Scripts
Date Options

Allwebco Web Templates
Complete websites with built in scripts.
AllwebcoDesign.com

Free Javascripts
Free scripts for any website or template.
Allwebco-Templates

Mobile Business Website Templates
HTML5 websites for mobile.
AllwebcoDesign.com

Shopping Cart Templates
Professional templates with built-in Paypal.
AllwebcoDesign.com