Sword of the Wolf [Preview][Help?]

**AegisTheRed** · 05-30-2009, 07:45 PM

Please help me improve this!!!

There were no themes involving swords, so I felt the need to create my own. I started by making a slick wallpaper which is found attached. I use Blank Icons to keep the sword visible by itself.
I use a 5 column springboard/dock.
Ive created a bunch of custom icons, tho i still need to create Phone and Mail Icons. There are also a ton of icons that arent visible/enabled and you can choose which icons you want for which apps.

heres my dilemma, I really love the clock/calendar widget things that float over the wallpaper. Ielegance was where I saw the first, so im attempting to create something visually appealing to add to my theme and my creativity(and my html skills) lack horribly.

I attached 2 variations of the clock that i was able to scrabble together, a below the 9pack and above the 9pack to show different views.

I need your help! I need a graphical backdrop that fits my theme and icons and looks good, and i need help coding so that it falls into place. I also want to change the font to a custom font and dont know how to do that.

the font id like is Viking Font | dafont.com

the html code written for the clock i ripped from Ielegance.
<html>
<head><title>newclock</title></head>
<style>

SPAN#clock
{
font-family: Helvetica;
color: #1C1C1C;
font-size: 34px;
}

SPAN#ampm
{
font-family: Helvetica;
color: #1C1C1C;
font-size: 12px;
}

SPAN#calendar
{
font-family: Helvetica;
text-align: center;
color: #1C1C1C;
}

</style>

<script type="text/javascript">
function init ( )
{
timeDisplay = document.createTextNode ( "" );
document.getElementById("clock").appendChild ( timeDisplay );
}

function updateClock ( )
{
var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes;

// Update the time display
document.getElementById("clock").firstChild.nodeVa lue = currentTimeString;
}

function init3 ( )
{
timeDisplay = document.createTextNode ( "" );
document.getElementById("calendar").appendChild ( timeDisplay );
}

function calendarDate ( )
{
var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thu rsday","Friday","Saturday")
var this_month_name_array = new Array("January","February","March","April","May"," June","July","August","September","October","Novem ber","December") //predefine month names

var this_date_timestamp = new Date()

var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()

document.getElementById("calendar").firstChild.nod eValue = this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date //concat long date string
}

</script>

</head>

<body bgcolor="black" background="Wallpaper.png">

<table style="position: absolute; top: 13px; left: 0px; width: 180px; height: 461px;" cellspacing="0" cellpadding="0" align="left">
<tr align="center" valign="top" border="0" cellpadding="4.4">
<td style="padding-top:12px;" background="clockunderlay.png" height="101" valign="top">
<span id="clock">
<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span><span id="ampm">
<script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>
</span><br>
<span id="calendar">
<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
</span>
</td>
</tr>
<tr>
<td align="center" valign="top">
<span id="calendar">
<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
</span>
</td>
</tr>
</table>

</body>
</html>