Team Fortress 2

Team Fortress 2

448 ratings
Creating a Basic Server MOTD
By Jimo
I will explain how to create a basic MOTD for your dedicated Team Fortress 2 server. For this guide you will require Adobe Photoshop, GIMP or PAINT.NET and a web server.
 
Rate  
Favorite
Favorited
Unfavorite
Introduction
This guide will explain how to create a basic MOTD for your dedicated Team Fortress 2 server.

What You Will Need
Before we get started you are going to need a few tools so you can follow along with the guide.

You will need some form of image editor. In the guide I will be using Adobe Photoshop CS5 but other versions of the program should work just fine. You can use GIMP or PAINT.NET as a free alternative to Photoshop as well. You'll also need a text editor such as Notepad or an equivalent to it.

Additionally you'll need your own web server and a Dedicated TF2 server.


Creating a Banner
In this section we're going to create a simple banner for our server to serve as an advertisement to new players. This section has been written with beginner's in mind.

Whenever somebody connects to the server the size of the MOTD will depend on their resolution. Because of this we want to make the size of our banner one that most resolutions will appreciate.

Open up Photoshop and navigate to File > New. In this example I will be setting Width to 600 Pixels and the Height to 225 Pixels. I'll also be setting the Background Contents to Transparent. You can adjust these settings to your own preference if you'd like.



Click Ok and you should now have something which looks like this.



For my example I'm going to have my server name in large text and I'm also going to include a mascot next to it. Creating Stylized text in Photoshop is easy, select the text tool from the Tools bar. If you cannot find the Tools bar click on the Window menu from the top of Photoshop and select the option at the button which says Tools.

Click anywhere on the blank canvas to begin placing text. If you look at the top bar of Photoshop you'll be able to adjust the font being used, color, size and the type of smoothing you'd like. In my example I'm strictly using TF2 fonts which can be found here[wiki.teamfortress.com].



Once you're happy with how the text looks we can begin adding some effects to it. Right click on the text layer from the Layers panel and select Blending Options. If you don't have a Layers panel you can click on the Windows button at the top of Photoshop and select Layers.



On the Blending Options window you can select a number of different effects to apply to this specific layer. To apply an effect check the box to the left of the name. Once you have the box selected, clicking on the name of the effect will allow you to adjust the settings of the effect you just applied.

In the example below I have two effects applied, a Drop Shadow and a Pattern Overlay. You can view the effects in real time, so mess around until you have it where you like. If you want you can apply a temporary background layer to the image so you can see what it will look like on top of different colors.



Once you click Ok your layer effects will be applied. You can return to the menu at any time to adjust or remove them.

After applying effects this is what my text looks like.



Once you're happy with how your text looks like we can begin adding our mascot. Images with a transparent background will work best with our text. If you'd like to learn how to cut out your own images for your banner you can read the first few section of my guide on Creating Transparent Sprays which gives you instructions on how to do this.

http://steamcommunity.com/sharedfiles/filedetails/?id=121115553

For my example I've already got some transparent background images prepared that i'd like to use saved to my Desktop. All you do is simply drag and drop the image on to the canvas.

When the image initially imports you will have something which looks like this.



If you'd like to resize it grab one of the corners and hold down Shift on your keyboard. This will keep the image constrained perfectly so it's impossible to make it look squished or deformed.

Move the image to your desired position and click Enter on your keyboard. The image we just imported will now be on its own separate layer, so you can follow the same steps we did with our text to adjust the looks of it by applying Layer Effects.

After some tweaking this is what my banner now looks like.



Once you're happy with your banner save your work by going to File and then Save As. Select PNG as the image type and name the file 'banner'.



We're now ready to begin building our MOTD.
Putting the HTML Together
Once you've finished designing your banner it's time to put your Message of the Day together. For this we will be creating a HTML file which we will be hosting on a web server. To do this open up Notepad and paste in the code of your choosing, I've listed a few examples below.

This first example will display our banner with a background color. If you'd like to change the background color you can adjust where it says #b0bac1 with a different Hex color code[www.w3schools.com].

<html> <head> <style type="text/css"> body { background-color:#b0bac1; } </style> </head> <body> <center> <img src="banner.png"> </center> </body> </html>



In this second example there are two boxes where we can place text. Look at the example image below the code to figure out where each line of text goes where. You can use </br> tags to add linebreakers if you want to list something, such as server rules.

Additionally we have also added two lines under the style tags. Color will control the color of the text, and font-family will control which font our text will use. To figure out which fonts are web friendly click here for a list. [www.w3schools.com]

<html> <head> <style type="text/css"> body { background-color:#b0bac1; color:#42474e; font-family:Lucida Console; } </style> </head> <body> <center> <img src="banner.png"> <div style="width: 650px;"> <div style="width: 300px; display: inline-block; float: left; text-align: left;"> This text will appear on the left.</div> <div style="width: 300px; display: inline-block; float: right; text-align: right;"><b>Server Rules:</b></br></br> 01. This text will appear on the right side</br></br> 02. You can add a linebreaker with the br tags</br></br> 03. Huzzah!</div> </center> </body> </html>



In this final example I've added three buttons underneath my banner which are intended to link to my website, steam group, and my servers donation page. In my example I've placed dummy links in the code, you can replace these with your own links.


<html> <head> <style type="text/css"> body { background-color:#b0bac1; color:#42474e; font-family:Lucida Console; } </style> </head> <body> <center> <img src="banner.png"></br> <a href="http://www.Jimo.co.uk"><img src="website.png"></a> <a href="http://www.Jimo.co.uk/radio/lse"><img src="steam.png"></a> <a href="http://www.Jimo.co.uk/radio/borealis"><img src="donate.png"></a> <div style="width: 650px;"> <div style="width: 300px; display: inline-block; float: left; text-align: left;"> This text will appear on the left.</div> <div style="width: 300px; display: inline-block; float: right; text-align: right;"><b>Server Rules:</b></br></br> 01. This text will appear on the right side</br></br> 02. You can add a linebreaker with the br tags</br></br> 03. Huzzah!</div> </div> </center> </body> </html>



Once you're done editing the code navigate to File and then Save As within Notepad. In the File name box type in index.html and save it to the same folder that we placed our banner.



Navigate to the newly created index.html file and double click on it. If everything looks correct you're now ready to upload it.

If you have broken images, revisit the code by reopening the index.html with Notepad. Make sure that the image file names are consistent, and make sure that everything is saved into one directory.

Your folder should be similar to mine.



Upload the entire directory that contains your motd to your web server and take note of the URL, we will be using it in the next section.
Switching the MOTD
Open up a separate file in your text editor and type in the URL for the MOTD on your webserver. The file we are creating will tell our server where to point our Message of the Day to.

For example, mine would look like this:


If you want to use your Steam Group for your Message of the Day you'd need to type in the URL to it. If you'd like to know how to create a Steam Group check out my guide below.

http://steamcommunity.com/sharedfiles/filedetails/?id=334896308

When you're done save this file as motd.txt by navigating to File and Save As within Notepad.



From your Dedicated TF2 server's FTP navigate to the orangebox/tf folder and replace the existing motd.txt with the one we just created.

Once you've replaced the file you may need to restart your server or wait for a map change for the changes to take effect.

If everything was done correctly your brand new Message of the Day will be in place on your server.

Closing Notes
If you have any questions or comments regarding this guide please feel free to leave a comment below or get in touch with me on Steam or through my website[www.Jimo.co.uk].

You can also check out all of my other Steam Guides here.


http://steamcommunity.com/sharedfiles/filedetails/?id=121269706
http://steamcommunity.com/sharedfiles/filedetails/?id=121356624
< >
76 Comments
Chris Redfield Aug 7 @ 3:35am 
can you make server MOTD title only
Furious Aug 21, 2017 @ 2:39pm 
This isn't working for me on my CS:GO server. Are motd's not allowed anymore. When I type in the address on my motd it's working.
Dogheadfish Sep 13, 2016 @ 7:26am 
It worked for me, on CS:GO server.... good guide +1
The Name Is Potato Sep 12, 2016 @ 3:43pm 
Works For CS:GO?
Dogheadfish Jun 3, 2016 @ 7:48pm 
What folder do u put the banner.png into on the server?
Spilled Coffee Jun 16, 2015 @ 12:28pm 
It's really weird, but my server is also called The Coffee House. I'm so tempted to just copy your banner as a template. :P
Stormish Jun 3, 2015 @ 3:11pm 
*click* noice
Eutow Mar 2, 2015 @ 4:38pm 
The motd picture isn't working for me. I made a photoshopped image same size as you explained. And it looks like a broken image when I load the motd.
Xxzu1p May 22, 2013 @ 12:31pm 
since everyone is saying ''nice'' then.....................NICENICENICENICENICE......
Hunt3r May 21, 2013 @ 12:04pm 
THX