Home > Apps > Clocks for your web site > Options for Your Free Text-Based Clock

Options for Your Free Text-Based Clock

There are many options that you can select to personalize your Free Clock. Discover how you can create a custom clock for your personal website or blog.

How do I start making my Free Text Clock?

Choose to modify an existing clock or make a new one

From the main page of the Free Clocks, you can choose to create your free clock by selecting the “Continue” button and going through the step-by-step wizard or selecting the “All on one page” button to view all of the options in a single page.

If you would like to update an existing clock that you have already created, select the “Copy/modify clock” button.

Select the Clock Type

In this section, you can choose between a text based clock and a variety of flash-designed analog clocks. It is important to note that the text based clocks are for HTML and Javascript users only, while the analog clocks are Flash based. Select a text based clock that you would like to customize and then select the “Continue” button.

You can select the “Go back” button at any step of the wizard to make any changes on previous steps. A preview of your selection will be displayed in the lower right hand corner of the screen.

Pick your Clocks Location

You can pick your location or time zone that is available under the option “Select location clock should show time for”. Here, you can choose a place from the drop-down menu. Alternatively, you can click on the “Other locations” button if you cannot find your place of choice, or you can click on the “Time zones” button.

Customize the Clock Display

In this section, you can customize how you want your clock to be numerically displayed. The clocks support many languages and can be customized to show the Month, Day, Hour, Seconds and Time Zone abbreviation. 

Choose Text and Font

Select the type of font you would like to have for your free clock from the drop-down menu. You can view sample fonts by selecting the box “Show font samples”. You can choose the font size, and whether you would like the time and date to be displayed in bold, italic or underlined text by selecting the boxes located next to the selection.

Select Borders and Padding

You can add a common border or a separate top/left/bottom/right border to your custom free clock. When you choose this option, you can also pick a border size (listed from 1 being the smallest to 9 being the largest), style and color. Alternatively, you can also opt for having no borders.

You can also choose padding for your free clock – either a common padding on each side, or separate top/left/bottom/right padding. You can also pick your padding size (listed from 1, being the smallest to 20 being the largest). You can also opt for having no padding.

Choose Background Color and Alignment

You can select the clock background color and page background color from our color palette under the “Background and alignment” section. This section also allows you to change the horizontal alignment of the text from left, center or right, and the vertical alignment from top, center, or bottom.

Create HTML code for Custom Text Based Clock

Once you are done customizing your text based clock, select the “Continue” button. You can choose the type of web page or server and create the HTML for your free countdown timer. You can do this by simply selecting the “Normal web page (http server)” option, or the “Secure web page (https/SSL server)” option.

For the latter option, you should only use this if your website is on a secure server (https). If you are unsure, it is best that you select the first option ““Normal web page (http server)”.

What’s Next?

Once this is selected, the HTML code for the clock will be displayed in the following box where you can highlight and copy the given code and insert the HTML code onto your web page.

You should now be able to have your customized free clock available on your website or blog.


Related links

Related time zone tools