Multi-Gaming Community

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. Our TF2 chalkboard style MOTD
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

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

Not appearing in Steam browser

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

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

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

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

Need more information

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

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

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

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

yes,

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

Live Stats

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

Live server stats in MoTD

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

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

You are incorrect about your

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

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.

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

Font type

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

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

teh font is called TF2 Professor

 

its in the GCF at the TF Recources

widescreen

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

Widescreen scaling

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

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

I'd be very interested in how

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

Live server stats

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

RE: Live server stats

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

You cannot edit the .PNG

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.

edit.motd.png?

How do i edit the motd.png file? I tried opening it in photoshop but couldn't figure out how to edit the text. Thanks

help

Ive added the http://yoursite.com/motd.html , but it just displays the line of text and not display from the site anyone got any ideas why this might be happening?

I have the same problem

I have the same problem strnage huh