This tutorial will show you how to make a template for viewing your MOTD offline so you can see how your MOTD is going to look without logging into your game. If you have the time, creativity, and some HTML and Photoshop skills this can help you really put some work into the design of your MOTD instead of just some text. This is not really a tutorial for making your MOTD. If you need more details on that visit Left4Dead411.com they have a nice explanation.
I have prepared a template with this method already that you can download here. My template is in the resolution of 1650×1080.
1. Join your server and take a screenshot of the MOTD using your Print Screen key.
2. Open Photoshop and hit CTRL+N for new file, and then CTRL+V to paste your screenshot
3. Use the Slice Tool to create a slice for the server graphic and the MOTD box just on the inside of the white borders.
4. Use the Slice Select Tool on each slice. Right-click > Edit slice options. Choose Slice Type: No Image.
4. Hit Alt+Shift+Ctrl+S (or File > Save for web & devices). Don’t be too worried about the compression unless you care and choose JPEG. Hit Save.
5. Hit Save. Then, Save As Type HTML and Images.
6. Open the .html file in Notepad or other plain text editor. Not MS Word.
7. Look for the empty TD cell that should be between img 2 and 4. And note the width and height. Mine is width=”588″ height=”118″. Add an iframe in the cell.
<td width=”588″ height=”118″ nowrap>
<iframe src=”host.html” width=”588″ height=”118″ frameborder=”0″></iframe>
</td>
8. Do the same for the larger empty cell. Might is width=”1048″ height=”523″
<td width=”1048″ height=”523″ colspan=”3″ nowrap>
<iframe src=”motd.html” width=”1048″ height=”523″ frameborder=”0″></iframe>
</td>
If your page alignments seem the break in the browser width white lines try reducing the size of width and height just a little bit.
9. Create both a host.html and motd.html file in the same directory as the .html file from Photoshop.
10. Add <img src=”host.jpg”> to host.html in Notepad. Create a 588 x 118 graphic named host.jpg and also place it in your directory.
11. Open motd.html and start creating your MOTD. Using very basic HTML.
Things to note:
- The host.jpg image and host.html needs to be on a web server so the full path to your graphic may be http://www.domain.com/folder/host.jpg. Or you could probably use imageshack.us
- The contents of host.txt on the game server needs to be the full url to the host.html on a web server.
- You can use some CSS to make your host banner flush on the corners of the banner box and also for it to adjust in size with different screen resolutions. I have included this in my template. Thanks to Left4Dead411.com for pointing this out.
- The contents of motd.html need to be put into the motd.txt file on the server.
- You can use this same technique for any MOTD of a game though with differences.