Source

Link jQuery libraries

In order to make the script work you will need to link to jQuery libraries. You can either host the libraries yourself or link to public libs like google or microsoft (recommended). In order to link the libraries, you will need to add following line to your code within <head></head> tags (using google public libs for example):

1
2
3
4
5
<head>
	<!-- ... -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<!-- ... -->
</head>

Link CSS file

Next step is to link stylesheet this code uses. It is provided in package under name style.css. This element also goes within <head></head>:

1
2
3
4
5
<head>
	<!-- ... -->
	<link rel="stylesheet" type="text/css" href="style.css">
	<!-- ... -->
</head>

Alternatively you can add the contents of the file to your existing template CSS file. Note that if you already have CSS file of the same name used by your template, then change the name of the CSS for timer to something like timer.css and change the link in header accordingly.

Add code

Next step is the timer code itself. Open the file missiontimers.php and copy entire content of <body></body> tag anywhere you’d like to use the script on your page (without the body tags). The default HTML markup in the provided php file is perfectly suitable for sidebars for example, but the code can be used anywhere. Note that you may need to change some of the css files if you intend to display it in a wide element.

Setting up your plugin so it displays proper time

Unfortunately PHP currently doesn’t have an easy option to fetch date and time from another server. There are workarounds which I will implement in future updates, but for now the plugin calculates time based on your servers timezone. This means you will have to make small change in the code to adjust to proper time. Don’t worry, you don’t need any programming knowledge, all you’ll have to do is adjust time.

Find the following line of the timer code:

1
$rawDateStart = date('F j, Y H:i:s', date_timestamp_get(DateTime::createFromFormat('F j, Y H:i:s', 'December 30, 2015 23:00:00')));

If you look at the end of that line you will see a date, ‘December 30, 2015 23:00:00’. This is the start date for the counter, and the only thing you will have to change.

So what happens during the code execution is quite simple. Script gets two dates, the starting date mentioned previously, and current date of the server where script is located. Using those two dates it will then calculate remaining time until they reset again. Problem, however, is when your server is located in different timezone. Then your website will display dates and times a few hours off. What you have to do is figure what is that difference for your server. All you have to do is either “remove an hour” from the date and continue doing so until timers on your site match the ones on EQ2Library.

For example if you’re removing hours, replace:

‘December 30, 2015 23:00:00’ with ‘December 30, 2015 22:00:00’

If, the difference is increasing, then do the opposite and add an hour. Keep in mind through, that once you add +1 to 23, you will actually have to use 00, but increase the date by one. So adding an hour would replace:

‘December 30, 2015 23:00:00’ with ‘December 31, 2015 00:00:00’

Test it out until you have configured it right. Your timers and mission names and locations should match the ones Library.

Customize style

The default CSS file that comes packed with the code is one used by eq2lib. It goes neat with light templates, however for darker or multicolored ones it may not fit in as nicely. CSS files comes with the commented lines you may want to change (like color, font, size, etc properties). Here are few examples of what mostly needs changing to get different colors.

Box width

Entire timer feature is wrapped within missionTimerWrapper. You can adjust the width of it by changing the value of width parameter. You can either use percentages or pixels.

1
2
3
.missionTimerWrapper {
	width: 100%;
}

Countdown Box

The box that contains countdowns for daily and weekly mission reset can be changed to reflect proper colors used by your own template. To change background color of the box adjust background, you can either use words (like white, black, grey, red, blue…) or use hex values. The box also casts shadow on the background, defined in box-shadow property. In case you don’t want either property, just remove that line from css.

1
2
3
4
5
6
.missionTimerBox {
	margin: 10px 5px 10px 5px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
	background: #f2f2f2;
	text-align: center;
}

Countdown Displayed Numbers

Numbers displayed in counter use specified font, though it can be changed to any one you’d like as long as you import it in your CSS. To change color of numbers adjust color, you can either use words (like white, black, grey, red, blue…) or use hex values. The numbers also cast shadow on the background, defined in text-shadow property. In case you don’t want any of these properties, just remove that line from css. Since these numbers are supposed to be very visible, the font-size can be changed accordingly.

1
2
3
4
5
6
7
8
9
10
11
12
.timerNumbers {
	display: table;
	width: 100%;
	table-layout: fixed;
	padding-top: 25px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	text-align: center;
	color: #00004d;
	text-shadow: 1px 1px 5px black;
	font-size: 2rem;
}

Tabbed Menu Buttons

There are 2 properties that need changing here, color for the color of the text inside the button, and background-color to change the color of inactive button (the one that is not selected). To change the color adjust color and/or background-color, you can either use words (like white, black, grey, red, blue…) or use hex values.

1
2
3
4
5
6
7
8
9
10
11
.tab-links a {
	padding: 9px 15px;
	display: inline-block;
	border-radius: 3px 3px 0px 0px;
	font-size: 16px;
	font-weight: 600;
	color: #4c4c4c;
	transition: all linear 0.15s;
	text-decoration: none;
	background-color: white;
}

Accordingly change the background parameter in following class which defines color of active button (the one that is currently selected).

1
2
3
4
li.active a {
	background: #f2f2f2;
	text-decoration: none;
}

And finally change the background parameter in following class which defines color of buttons when you hover your mouse over it.

1
2
3
4
.tab-links a:hover,  li.active a:hover {
	background: #a7cce5;
	text-decoration: none;
}

Tabbed Content

Last part is to adjust color of tabbed box content where mission names and locations are displayed. Two parameters can be changed here background which defines background of the box and box-shadow which casts shadow on the parent box.

1
2
3
4
5
6
.tab-content {
	padding: 5px;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
	background: #f2f2f2;
}

A few links to help with customization: