Coding-Spot

You are not connected. Please login or register

 
 

Animated Clock [Help]

Message (Page 1 of 1)


 
Advance Member

Posted on Tue Apr 23, 2013 7:20 pm

 
hey, i installed the animated clock from here http://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...")



View user profile



 
Administrator
Administrator

Posted on Tue Apr 23, 2013 7:25 pm

 
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;
}



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Tue Apr 23, 2013 7:32 pm

 
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



View user profile



 
Administrator
Administrator

Posted on Tue Apr 23, 2013 7:34 pm

 
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. :):



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Tue Apr 23, 2013 7:40 pm

 
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?



View user profile



 
Administrator
Administrator

Posted on Wed Apr 24, 2013 5:41 am

 
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:



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Wed Apr 24, 2013 5:49 am

 
god! :D



View user profile



 
Administrator
Administrator

Posted on Wed Apr 24, 2013 5:58 am

 
Is this solved now? :):



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Wed Apr 24, 2013 5:59 am

 
yy all good thanks :):



View user profile



 
Administrator
Administrator

Posted on Wed Apr 24, 2013 6:05 am

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



View user profile http://coding-spot.darkbb.com


#11

Sponsored content


 

Posted Today at 11:54 am

 





Message (Page 1 of 1)

Permissions in this forum:
You cannot reply to topics in this forum

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None