How-To: Create a TF2 chalkboard style MOTD with HTML

1. Introduction
A lot of server admins want this and we have it: a message of the day (MOTD) that seamlessly fits into the standard Team Fortress 2 chalkboard, but offers a lot more flexibility. Good news: we have decided to share it with you. To better Illustrate what I'm talking about, here is a screenshot of the MOTD when you join our server #2.
As you can see, we provide more information on our MOTD than usual, but at the same time we can keep the layout clean.

2. The Basics
You can customize your message of the day through the file motd.txt in the tf directory of your dedicated server folder structure. If this file doesn't exist you can simply create it. Let's start with a simple example and put some text into your MOTD.

This is a simple MOTD.

Welcome to our servers.

Then your MOTD will look like this. A simple MOTD

Looks pretty and was simple, right? So why would anyone need something else? Well, imagine you would want to put your clan logo into the MOTD. Or maybe you would rather have a two column text layout. Those things can't be achieved with this method.

3. Using HTML
The next step is to use HTML in your MOTD. Yes, you can simply put HTML content into the same file and the Source engine will render it using the Internet Explorer engine. So, let's put some basic HTML with some styling into the file and see what happens:

<html>
	<head>
	
		<style type="text/css">
		<!--
			body {
				background-color:#676570;
                                color:#ECECEC;
				font-family: Verdana;
			}
		-->
		</style>
	
	</head>
	<body>
		<h1>Welcome to our servers</h1>
		
		<p>This is a simple HTML MOTD for TF2</p>
		<p style="float:right">It allows us to do some styling.</p>
	
	</body>
</html>

A HTML MOTD

Well, now we have the flexibillity of HTML, but it doesn't look as good as the simple text MOTD. Another drawback is, that the Source server doesn't allow us to link to any external files (e.g. stylesheet or image). So we need a better solution.

3. External HTML
One common practise in Counter-Strike: Source was to include a header redirect in the HTML code, so that the ingame browser would load an external file. Though this still works for TF2, it's not necessary, because the Orange Box server allows us to directly specify an external HTML file we want to load. So we edit our motd.txt again and write something like this:

http://content.specialattack.net/motd.html

This will instruct the client's ingame browser to load this file from our webserver. Now we can use the full set of HTML/CSS commands in our external HTML file. Let's see what our external HTML file could look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>Welcome to SpecialAttack</title>
		<style type="text/css">
			html, body {
				height: 100%;
				margin: 0;
				padding: 0;
                                overflow: hidden;
			}
			img#bg {
				position:fixed;
				top:0;
				left:0;
				width:100%;
				height:100%;
			}
			#content {
				position:relative;
				z-index:1;
                                margin:0 auto;
			}
		</style>
	</head>

	<body>
		<img src="http://content.specialattack.net/blackboard.png" id="bg"/>
		<div id="content">
                         <img src="http://content.specialattack.net/motd.png"/>
                </div>
	</body>
</html>

This is what it will look like ingame: An advanced HTML MOTD
We have created a background image that looks like the default chalkboard, set it so that it would always fill up the whole space and overlay another image with our text above it. So now we can show anything we want in our MOTD. Of course this method has one drawback too: scaling. Since the images have a fixed size, your MOTD will look differently on every screen resolution your clients will use. We have optimized the graphics in a way, that the scaling effects should only be barely visible. If you create your graphics in the same way we did, then you're gonna be fine, because it scales down to 1024x768 without scrolling. This way 98.3% of all Steam gamers will not need a scrollbar, which allows for a nearly seamless transition.

4. What's next?
So now that we have the abillity to put anything we want into the MOTD, what could we do next. Well, as you can see in the first screenshot, we have included live server stats. This shows what is currently going on, at our other servers and also shows you what the time left and next map on this server is. You can read how we did this, in our tutorial how to put live server stats into the MOTD.

5. Download
You can download the sample HTML and images here as zip file. If you want to spread this tutorial around, please link to this page, not just the zip file.

Comments

Thank you very much for this

18. September 2008 - 15:05 — Anonymous

Thank you very much for this useful article. ================== صور

Not appearing in Steam browser

16. September 2008 - 13:50 — Anonymous

Is there any reasons why certain ppl cannot view the MOTD in their steam browser, but can view it by direct link on their desktop browser? Some are reporting that they only see the blackboard image, but not the png that is on top of it. I myself can see it ok, and it shouldn't be a resolution issue. Some players have seen it before, but no longer can view it.

Taking this to a different level

1. August 2008 - 19:49 — Anonymous

On my server I took this idea and added my own thing instead of server stats I added an automatically updating RSS fee to it.

I can't get this working

29. July 2008 - 18:31 — Anonymous

I've tried the above HTML and I've tried using the CSS from the live server stats. But nothing works.

Thank you very much for this

3. August 2008 - 17:51 — Anonymous

Thank you very much for this useful article. Regards, Cristiano ------------- Şarkı dinle

Need more information

29. July 2008 - 19:08 — demm

In order to help you, we need more information about your errors. What are you trying to do? How did you do it? What is the result?

Need Help With IE6

6. July 2008 - 6:23 — Anonymous

I know you got this working with IE6 because when I join a SpA server it works (and I have IE6). So what's the secret? I tried JavaScript but it seemed to be ignored so I tried AlphaImageLoader but it crashed the game! I picked up on the CSS changes you made in the live stats article example and those helped a lot (the image actually shows up now). I just can't seem to solve the image transparency problem.

As far as we know there is no

6. July 2008 - 18:48 — lacop

As far as we know there is no way how to use transparent PNGs in IE6. There are some solutions (like the imagealphaloader) but scripting is disabled ingame. Our solution is using different image (PNG24, without transparency) for IE6

live server stats

27. June 2008 - 11:37 — Anonymous

the tutorial for live server stats is it finish now ??? can we see it ??

yes,

6. July 2008 - 18:45 — Anonymous

yes, http://www.specialattack.net/node/54

Live Stats

26. June 2008 - 0:47 — Anonymous

There's definitely demand. I'd love to know how you included live server stats.

Live server stats in MoTD

28. June 2008 - 20:38 — lacop

As posted in the latest news on homepage, I'm working on making the script more universal, easier configurable and then I'll write the guide. It should be posted this monday so stay tuned :)

Awesome guide, looking

22. June 2008 - 8:24 — Anonymous

Awesome guide, looking forward to guide on how to add the dynamic content

You are incorrect about your

18. June 2008 - 11:49 — Anonymous

You are incorrect about your facts and figures. "If you create your graphics in the same way we did, then you're gonna be fine, because it scales down to 1024x768 without scrolling which covers 98.3% of all Steam gamers." Valve has this fancy hardware survey they've been using for years. Check it out: http://www.steampowered.com/status/survey.html Also, please note that 1024x768 is the second popular single monitor resolution, and is used by 32.01% of users. No where near your figures.

Figures

19. June 2008 - 7:47 — demm

With the 98.3% I am actually referring to all Steam gamers that have a resolution of 1024x768 or greater according to data from the Steam survey. Because at all those resolution, the MOTD will be displayed without a scrollbar, which is the preferred behaviour because the transition will be nearly seamless. The scrollbar is only needed on smaller resolutions. I've clarified the language on that part a bit.

Nextmap tutorial.

13. June 2008 - 3:46 — Anonymous

Hey I would love to see the tutorial for nextmap/timeleft etc. Good work boys and thanks for sharing :D

Font type

12. June 2008 - 20:46 — Anonymous

Thanks for this, i'd like to know what font type you use since it's really clean. Also i'd love to know how to had dynamic infos.

Font type

12. June 2008 - 21:05 — demm

The font is called 'Tekton Pro', but I'm gonna have to disappoint you, because it is not a free font. Since we've got a lot of replies asking for how we include the dynamic infos in our MOTD, we have decided to work on a guide covering this area. It will be out within the next week.

Lawl Font type for ORIGINAL Tf2

20. February 2009 - 14:34 — Anonymous

teh font is called TF2 Professor

its in the GCF at the TF Recources

widescreen

12. June 2008 - 20:18 — Anonymous

How will that background image work with different, high widescreen resolutions?

Widescreen scaling

12. June 2008 - 20:24 — demm

It scales very well, even with widescreen displays. It is optimized for 1680x1050 where you'll have a 100% smooth transition. All except the first screenshot in this tutorial where taken with widescreen settings.

I'd be very interested in how

12. June 2008 - 19:31 — Anonymous

I'd be very interested in how you included live server stats. Thanks

I'd be very interested in how

12. June 2008 - 14:30 — Anonymous

I'd be very interested in how you got the server details up like that

Live server stats

12. June 2008 - 19:30 — Anonymous

I'd be very interested in how you added those in. Thanks

RE: Live server stats

13. June 2008 - 9:49 — Spikespiegel

We are currently working on the guide to adding in live server stats. Please check back again later :)

You cannot edit the .PNG

21. June 2008 - 23:30 — Spikespiegel

You cannot edit the .PNG file. You have to make your own. I would advise you to make it in illustrator to ensure the best possible quality. You can use any font, the one I used was Tekton Pro. Once finished, save it for web as a PNG-24 file with tranparency on.

Donations counter

Navigation

User login