Editing CSS

[Lionel]

Hi you there;

I know this topic has been treated before but cannot find it. I need to edit the look of a script (The one in the red circle in tha attached image) The css to use is this:

clock {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #F00;
text-align: left;
}

I need some one to tell me how to do it. The placeholder where the script is placed is named "clock"

Thanks

[jimhanus]

Not sure what you are asking. The font, font size, and font color are all shown in your example. Do you mean the actual script, language, location? Can you attach the placeholder clock code that you are using?
I use a script like this on one of my sites:

<B> <font face=arial size=3 color=black>
<script type="text/javascript">
var d = new Date()
document.write(d.getMonth() + 1)
document.write("-")
document.write(d.getDate())
document.write("-")
document.write(d.getFullYear())
</script>
</font></B>

Which gives me 11-28-2009

[Lionel]

Here is the code; what I want is to apply the css I mentioned in my example.
{ font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #F00;
text-align: left;}

<!-- Clock Part 1 - Holder for Display of Clock -->

<span id="tP">&nbsp;</span>

<!-- Clock Part 1 - Ends Here -->


<!-- Clock Part 2 - Put Anywhere AFTER Part 1 -->

<script type="text/javascript">
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }
function lZ(x){ return (x>9)?x:'0'+x; }
function tH(x){ if(x==0){ x=12; } return (x>12)?x-=12:x; }
function dT(){ window.status=''+eval(oT)+''; document.title=''+eval(oT)+''; document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }
function aP(x){ return (x>11)?'pm':'am'; }
function y4(x){ return (x<500)?x+1900:x; }
var dN=new Array('Domingo','Lunes','Martes','Miércoles','Juev es','Viernes','Sábado'),mN=new Array('Enero','Febrero','Marzo','Abril','Mayo','Ju nio','Julio','Agosto','Septiembre','Octubre','Novi embre','Diciembre'),oT="dN[tS().getDay()]+' '+tS().getDate()+' '+mN[tS().getMonth()]+' '+y4(tS().getYear())+' '+':'+':'+' '+lZ(tH(tS().getHours()))+':'+lZ(tS().getMinutes() )+':'+lZ(tS().getSeconds())+aP(tS().getHours())";
if(!document.all){ window.onload=dT; }else{ dT(); }
</script>

<!-- Clock Part 2 - Ends Here --

[jimhanus]

Not sure exactly how to do what you are asking, but I tried putting your script on a page with other graphics and only the clock shows, nothing else, when previewing within Xara. In a browser it shows OK. I added this line as the very first line of the script: <B> <font face=verdana size=2 color=red> Like this:

<B> <font face=verdana size=2 color=red>
<!-- Clock Part 1 - Holder for Display of Clock -->

<span id="tP">&nbsp;</span>

<!-- Clock Part 1 - Ends Here -->


<!-- Clock Part 2 - Put Anywhere AFTER Part 1 -->

<script type="text/javascript">
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }
function lZ(x){ return (x>9)?x:'0'+x; }
function tH(x){ if(x==0){ x=12; } return (x>12)?x-=12:x; }
function dT(){ window.status=''+eval(oT)+''; document.title=''+eval(oT)+''; document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }
function aP(x){ return (x>11)?'pm':'am'; }
function y4(x){ return (x<500)?x+1900:x; }
var dN=new Array('Domingo','Lunes','Martes','Miércoles','Juev es','Viernes','Sábado'),mN=new Array('Enero','Febrero','Marzo','Abril','Mayo','Ju nio','Julio','Agosto','Septiembre','Octubre','Novi embre','Diciembre'),oT="dN[tS().getDay()]+' '+tS().getDate()+' '+mN[tS().getMonth()]+' '+y4(tS().getYear())+' '+':'+':'+' '+lZ(tH(tS().getHours()))+':'+lZ(tS().getMinutes() )+':'+lZ(tS().getSeconds())+aP(tS().getHours())";
if(!document.all){ window.onload=dT; }else{ dT(); }
</script>

<!-- Clock Part 2 - Ends Here --

I made a placeholder approximately the size this will be and copied this script into the "Replace With HTML Code" box. As an example I took a blank page and placed a star on it with the placeholder on top of it. The attached file is what it looked like in a browser. I know this isn't exactly what you want, but I hope it helps.

Jim

[Lionel]

Thanks Jim.

This does the work and I am satisfied with the result. As soon as I upload the site I will let you know. Really I appreciate your help. It is nice to know there is always someone willing to help.

Best regards.

Lionel

[Lionel]

Hi Jim;

Xara CS answered me with an example. Attached you will find it. Of course your advice is easier but I had some problem writing the CSS. The example sent by Xara is more the way I am used to do it since I am Dreamweaver user. As a matter of fact this is my first site with Xara and I decided to use my Company site. I hope to upload it in a couple of days. As I have told you I appreciate your kindly help.

Lionel