Κοινότητα Steam :: Οδηγός :: Creating a Basic Server MOTD

Σελίδα Καταστήματος

Team Fortress 2

Όλα Συζητήσεις Στιγμιότυπα Εικόνες Μεταδόσεις Βίντεο Εργαστήρι Νέα Οδηγοί Κριτικές

Team Fortress 2 > Οδηγοί > Οδηγοί του χρήστη Jimo

472 ψήφοι

Creating a Basic Server MOTD

Από 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.

Βραβείο

ΔΗΜΙΟΥΡΓΗΘΗΚΕ ΑΠΟ

Jimo
Εκτός σύνδεσης

ΚΑΤΗΓΟΡΙΑ: Τροποποίηση ή διαμόρφωση, Πολλών παικτών, Μυστικά, Οδηγοί

Languages: Αγγλικά

Αναρτήθηκε

Ενημερώθηκε

11 Μαϊ 2013, 15:22

11 Μαϊ 2022, 19:45

17,501	Μοναδικοί επισκέπτες
209	Αγαπημένο τώρα

ΕΥΡΕΤΗΡΙΟ ΟΔΗΓΟΥ

Επισκόπηση

Introduction

What You Will Need

Creating a Banner

Putting the HTML Together

Switching the MOTD

Closing Notes

Σχόλια

Introduction

This guide will explain how to create a basic MOTD for your dedicated Team Fortress 2 server.

Team Fortress 2 Wiki: Dedicated Server Configurations

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.

Adobe Photoshop[www.adobe.com] or
GIMP[www.gimp.org] or
http://www.getpaint.net

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.

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:

http://www.jimo.co.uk/motd

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.