Countdown Plugin [library support]

[Wormopolis]

your best course of action is to read up on everything CSS can do for you. you can control pretty much everything including size and color with it. w3schools.com is a good place to start. or just google CSS tutorials. and its easy to experiment with because you can have one window open to where you are setting it, and another open to where you are displaying it, and just make little changes to see how its affected. my default CSS I have on it, is basically to cater to the animated gif background it gets when countdown is reached. but you can overwrite all of that with your own stuff if you wanted.

[volkswagenaholic]

Thanks @wormopolis I'll be studying CSS

[deltaq]

Two questions:
1- Which clock is this using? Can I use the Live clock from you Wormopolis?

2- I used this in my sidebar Redux from Brian, with this code:
<countdown class="countdown" title="" timestamp="June 29 9:00 AM"
message="Next Event" width="90%" height="90%"></countdown>

It seems to be working, but I can't see all of it. I tried the with and heigh... any idea what I'm doing wrong?
Forum: Forum is here

Thanks

[Wormopolis]

the default width for a box is 590px. you just have to add in some CSS to set it to a lower size.

the current CSS is:

.countdown_default {width: 590px; height: 110px; color: #FFFFFF; background-color: #000000; border: 1px #FFFFFF solid}
.countdown_reached {width: 590px; height: 110px; color: #FFFFFF; background-color: #000000; background-image: url(http://i197./aa250/WORMOPOLIS/Animated-Border-Marquee.gif);}
.countdown_title {text-align: left; font-size: 12px;}
.countdown_timer {text-align: center; font-size: 16px;}
.countdown_message {text-align: right; font-size: 14px;]


so if you add in your own using those same selectors, it gets overrided.

[deltaq]

Thank you !

I will try it in a few minutes and give a feedback

------------------
Edit:
Sorry Wormopolis... I can't figure out where to put this.
I put it in the Global header (at the bottom)... didn't work
I put it in the Sidebar field, before calling the countdown, and because is a css I used the Style Text/css tag
also didn't work.

can you give me a hint to where put this, so I can change the size of the countdown?

Thanks

[Wormopolis]

put this in the side box under the countdown itself:
<style type="text/css">
.countdown_default {
background-color: #000000;
border: 1px solid #FFFFFF;
color: #FFFFFF;
height: 80px !important;
width: 220px !important;
}
</style>

[deltaq]

Thx! It works perfectly !!

[perryandbrock]

im confused as to how i can edit the look of this..... im new to css (more along the line ive never done css)
is it possible to have a image option itself in the plugin? to alter the look of it? otherwise great plug in and thanks for your work!

[Wormopolis]

I dont understand the "image option itself" part...

I used CSS because its really the fastest and easiest way to manipulate the look of the the basic structure. if I start making it where anyone can manipulate the structure itself, things will stop working because the places where I hid data will get deleted.


I bet everything you want to do to it can be done with CSS if you give an example

[perryandbrock]

i guess its just having no idea where to begin or comprehend css.... i tried messing with it and i failed miserably but im also ok with the default you have provided

[Wormopolis]

thats also one of the good things about CSS is you CAN make a mistake and it isnt catastrophic because it can be undone easily.

perhaps tell me how you would like to change the before and after? the size? the color?

[perryandbrock]

well on my forum we host competitions for a game called fantastic contraption and i think we want to have a bunch of small widget type countdowns for each competition that i will turn into hyperlinks for each competition

[Wormopolis]

so you want to make the entire countdown clickable right? is this in a post or just the html?

[perryandbrock]

i know how to make the countdown clickable

i need to know how to shrink the entire thing

[Wormopolis]

<style type="text/css">
.countdown_default {
height: 80px !important;
width: 100px !important;
}
</style>