hey, i installed the animated clock from here https://coding-spot.darkbb.com/t47-animated-clock but i want some settings.


1st: i want to be in the center, now its at the left side as u see in the pic




2nd: theres a problem with the numbers they r not in the center of the cyrcles


and 3rd: can we change the corners of the rectangular with the time to be like the fieldset from top? ("all copyrights, blabla...")

Find this part:

Code:

.clock .display{
      /* Holds the number of seconds, minutes or hours respectfully */
      position:absolute;
      width:200px;
      font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
      z-index:20;
      color:#F5F5F5;
      font-size:60px;
      text-align:center;
      top:90px;
      left:0;
     
      /* CSS3 text shadow: */
      text-shadow:4px 4px 5px #333333;
    }

Change it with this one:

Code:

.clock .display{
      /* Holds the number of seconds, minutes or hours respectfully */
      position:absolute;
      width:200px;
      font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
      z-index:20;
      color:#F5F5F5;
      font-size:60px;
      text-align:center;
      top:65px;
      left:0;
     
      /* CSS3 text shadow: */
      text-shadow:4px 4px 5px #333333;
    }

For the alignment, put this on your CSS:

Code:

#fancyClock {
margin-left: 400px;
}


For the border, add this to your CSS:

Code:

.clock {
border-radius: 13px;
}


2nd problem, solved

3rd problem, with radius, now its like that, i tihnk there isnt way to make it only the corners ah?



1st problem, solved

Remove the 3rd code i gave, replace it with this one:

Code:

#fancyClock {
margin-left: 400px;
border-radius: 13px;
}


Also, play with the value of the margin-left, until it fit's you to be on center. :):

yy i found the right position.
now we have only to solve the radius problem.
i posted a screen to see the corners... hours, mins, secs are like 3 pics and all have 4 radius if u understand what i mean :P
can we make it to ave only 4 radius at right and left?

Remove the previous border-radius i have given you.
Then put this instead in your CSS:

Code:

div.green.clock {
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
}
div.orange.clock {
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
}

:D:

god! :D

Is this solved now? :):

yy all good thanks :):

Since the problem is solved, i'll locked this and move to archive section.
~ Locked and Moved