PDA

View Full Version : Mini Mods - Attractive Analog Clock In Header With Date

ramesh_umk3
06-01-2013, 10:00 PM
Attractive analog clock based on flash which works on any vbulletin version

Styles & Templates >> Styles >> Header

Add the below code to the very end Header Template

<div style="float: right; position:relative; top:-100px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="170" height="69">
<param name="movie" value="http://www.mobilescommunity.com/clock1.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="http://www.mobilescommunity.com/clock1.swf" width="170" height="69" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>

I have defined In-line css to adjust my clock at header you can change according to yours

Live Demo:
MobilesCommunity.com (http://www.mobilescommunity.com)
K4GAP
06-03-2013, 11:42 PM
Why not include the clock1.swf file for a download and let users host it on their own server?

http://www.mobilescommunity.com/clock1.swf
ramesh_umk3
06-04-2013, 10:18 AM
You can download it bro if you want , As i am using google page mod every extension on our server are fully optimized so you don't need to worry about PAGE LOAD TIME ;)
Charro~
06-04-2013, 10:48 AM
Installed & Rated....Thanks!
hoangserip
06-04-2013, 01:17 PM
thanks for share
Nirjonadda
06-04-2013, 03:58 PM
Please can you make it work on without manual template edit?
ramesh_umk3
06-04-2013, 06:21 PM
Please can you make it work on without manual template edit?

There is no risk in editing template bro, simply add the coded to the end of the headerinclude template !

Once done Clear your cache in vbulletin or either browser :)

Regards,
Nirjonadda
06-05-2013, 06:51 PM
There is no risk in editing template bro, simply add the coded to the end of the headerinclude template !

Once done Clear your cache in vbulletin or either browser :)

Regards,

Template edits are a bad, bad thing. Every time you upgrade vB you need to edit every template you've done edits in. That's no fun. I hate doing any manual edits to my forum because of this.
ramesh_umk3
06-06-2013, 10:03 AM
I can understand your problem brother, but not in this case here because i didn't used any class file or id which is related to vbulletin it's simple and basic flash code which works on any html page ...

it's 100% safe on any vBulletin and also after upgrade i can sure you that :)
Toorak Times
06-08-2013, 04:46 AM
Its great Ramesh, I was asking for it from a developer the other day as it really suits my newspaper idea and is discreet, excellent work. I change the banners from light to dark is there a way of changing the colour easily from my end? http://www.tooraktimes.com.au/content.php/2669-Bargain-Basement-Book-Club-Horror-Thriller-Bargain-Basement-Book-Club-Horror-Thriller
Nirjonadda
06-08-2013, 03:22 PM
Installed ! Please can you give me code for this Clock?

145318
ramesh_umk3
06-08-2013, 08:23 PM
Installed ! Please can you give me code for this Clock?

145318

Here it is bro

<body onLoad="goforit()">
<script>
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year<1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var cdate="<small><font color='FFFFFF' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
</script>

<div style="font-size:11pt;" align="right"><span id="clock"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

Just add the code to the end of header template :)
ramesh_umk3
06-08-2013, 08:26 PM
Its great Ramesh, I was asking for it from a developer the other day as it really suits my newspaper idea and is discreet, excellent work. I change the banners from light to dark is there a way of changing the colour easily from my end? http://www.tooraktimes.com.au/content.php/2669-Bargain-Basement-Book-Club-Horror-Thriller-Bargain-Basement-Book-Club-Horror-Thriller

You can change background colors and black will be matching for your forum :)

<embed src="http://www.mobilescommunity.com/clock1.swf" width="170" height="69" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" wmode="black"></embed>
Toorak Times
06-09-2013, 06:34 AM
I'm a learner mate, where do I find that to change it? Thanks
Krusty1231
06-09-2013, 09:17 AM
Delete the code in the header template.

Add this:

<div style="float: right; position:relative; top:-100px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="170" height="69">
<param name="movie" value="http://www.mobilescommunity.com/clock1.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="http://www.mobilescommunity.com/clock1.swf" width="170" height="69" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" wmode="black"></embed>
</object>
</div>

Notice the change in RED....in the original code it said "Transparent"....you can change it like that, but I did it for you in the provided code so you can see what he meant.
Toorak Times
06-09-2013, 10:21 AM
Thanks Krusty, that actually put an opaque panel behind the same grey type, but very useful anyway on other themes, cheers