RepliClock Current date and time on main navbar

[Replicant]

RepliClock
This little mod will put the date and current time on the main navbar on every page. The date and time fonts, color, sizes, and visibility can be configured via CSS. It works on screens all the way down to 320px wide without interfering with view.

https://vborg.vbsupport.ru/external/2015/03/22.png Desktop view

https://vborg.vbsupport.ru/external/2015/03/23.png Mobile View

Demo - See it on my live site k5bp.com

To install, download the XML file. Go to AdminCP >> Manage Products >> [Add/Import Product].
This mod does not modify any core Vbulletin files.

Enjoy! Please mark as installed if you find this mod useful.:up:

ToDo: Add 12 hour time option

[Replicant]

Version 1.0.1
A CSS collision was identified in 1.0 that causes the Message center to not display properly in responsive mode. The CSS has been corrected in 1.0.1.

Version 1.0.1 is 24 hour format
Version 1.0.2 is 12 hour format with AM/PM

[anwar513]

Plug-good, text display only English?

[Replicant]

Plug-good, text display only English?

Only english, yes. It's all I know. I haven't done any type of translation programming and have no clue how to go about it. Sorry.

[Spangle]

Is it time zone specific or does it display the time where the server is based or the Admins time zone ?

[Replicant]

Is it time zone specific or does it display the time where the server is based or the Admins time zone ?

It should display the timezone you are in automatically.

[fionix]

Do you have any DEMO to see it?

[Replicant]

Do you have any DEMO to see it?

Sure, that would be nice huh? Added a link in the first post and here (k5bp.com)

[BugOutGirl]

Finally got around to getting this guy installed. Looks fantastic, I am probably more excited about it than I should be.
What CSS code can I use to change the font size/colour?

[Replicant]

This is the default css for the text

.rc-text {
color: #858585;
font-weight: bold;
}

All of the CSS is in the CSS template css_RepliClock.css
There is also CSS for smaller screens in that template.

You can play with the font sizes and colors in the development environment by right clicking on the clock and inspecting element. Then when you get it dialed in, edit the css template in the style manager for each style and change it to your code.

[BugOutGirl]

thanks!

[Replicant]

A CSS collision was identified that causes the Message center to not display properly in responsive mode. The CSS has been corrected in the new version. To upgrade, download the XML file. Go to AdminCP >> Manage Products >> [Add/Import Product].
Click the allow overwrite checkbox after selecting the XML file.

[JaySeeEm]

// Added after seconds variable
var ampm = h >= 12 ? 'PM' : 'AM';
h = h % 12;
h = h ? h : 12;

You then need to add the ampm variable to the end of this line: ' + ampm added before ;


document.getElementById('time').innerHTML = h + ":" + m + ":" + s + " " + ampm;

Incase anyone wants to display the time in the 12 hour format with am or pm.

If there is a better way, let me know!

- Justin

[Replicant]

// Added after seconds variable
var ampm = h >= 12 ? 'PM' : 'AM';
h = h % 12;
h = h ? h : 12;

Incase anyone wants to display the time in the 12 hour format with am or pm.

If there is a better way, let me know!

- Justin

Nice. I have an AM/PM version, I just never uploaded it since nobdy seamed too interested. Nice coding style. :up:

[joshskeety]

The only problem with that extra code is it doesn't say AM or PM, just the 12 hour time clock.. Not a big deal, and it works.. Thanks for taking the time to share both of yours...