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.
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>
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:
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.
- Login to post comments
Comments
Need more information
29. July 2008 - 19:08 — demmIn 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?
As far as we know there is no
6. July 2008 - 18:48 — lacopAs 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 in MoTD
28. June 2008 - 20:38 — lacopAs 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 :)
Figures
19. June 2008 - 7:47 — demmWith 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.
Font type
12. June 2008 - 21:05 — demmThe 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.
Widescreen scaling
12. June 2008 - 20:24 — demmIt 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.
RE: Live server stats
13. June 2008 - 9:49 — SpikespiegelWe 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 — SpikespiegelYou 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.