• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

[PHP/HTML] Basic templates to build your layout

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
1,464
Solutions
27
Reaction score
843
Location
Santiago - Chile
GitHub
ralke23
Twitch
ralke23
Hi! I was thinking this thread might be usefull for some people! I'll start then. The goal of this thread is to recopile usefull coding examples to build layouts, such as tables, buttons, types of texting, linking, etc. With this, you will automatically get used to some concepts of PHP/HTML that will let you customize your layout, won't explain it too much, the idea is to make it self-explainatory.

Example of tables

Tables are very important. This will order our layout and make player see it much clear. I'm going to recopile 4 types of usefull tables.

1) Table divided by border
This table let you have a hard border to divide and surround text.

PHP:
<table border="1" cellspacing="1" cellpadding="4" width="100%" >
  <tr bgcolor="#505050">
  <td class="white"><b><u>Server information</b></u></td>
  </tr>
  <td><ul>
  <li> <p><b><span style="color: #C64125;">[Information]</b></span> Here you will find all <u>settings information</u> about <b><?php echo $config['site_title']; ?>. </b>If you want to see the experience rates visit the <a href="stages.php">stages section.</a></p></b></li></ul>
  </td>
</table>
table_1.png

2) Table with colspan
You can use <td colspan> to set how many rows the title will have in the next horizontal line. Colspan specifies how many columns does a cell span.

PHP:
    <table class="table tbl-hover">
        <tbody>
            <tr class="yellow">
                <td colspan="2">Connection information</td>
            </tr>
            <tr>
                <td>Client</td>
                <td>8.6</td>
            </tr>
            <tr>
                <td>IP</td>
                <td><?php echo $_SERVER['SERVER_NAME']; ?></td>
            </tr>
            <tr>
                <td>Port</td>
                <td><?php echo $luaConfig['loginProtocolPort']; ?></td>
            </tr>
        </tbody>
    </table>

conect_info.png

3) Table without border
This tables are perfect for index news. Doesn't have a border, and can be directly inserted when you're creating news for your website (in text editor).
PHP:
<table border="0" cellspacing="1" cellpadding="4" width="100%">
  <tr bgcolor="#505050">
  <td class="white"><b><?php echo $config['site_title'] ?> | Downloads<b></td>
  </tr>
  <td>
<p>In order to play on Greed, we <strong>REQUIERE</strong> to use our client to directly connect to the server.</p>

<p><span style="background-color: #31261D; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Download Greed for Windows</span> <a href="<?php echo $config['client_download']; ?>"><span style="background-color: #4485b8; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Mirror 1</span></a></p>
<p><span style="background-color: #31261D; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Download Greed for Mac</span> <a href="<?php echo $config['client_download']; ?>"><span style="background-color: #FF0000; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Unavaible</span></a></p>
  </td>
</table>
table_withoutborder.png

4) Rules table
Is important to have rules on your server. But they're annoying to read, that's why we have to make this space for them ;)
PHP:
 <td>
<body>
<div style="height:120px;width:auto;overflow:auto;background-color:white;color:black;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;"><p style = "font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; "><h3><b><u>Greed Online rules</b></u></h3>  <b><p style=”text-align: justify;”><u>Sobre las reglas generales de la comunidad de Greed:</u> </b> </p>
 
 <p style=”text-align: justify;”>I. No insultar de forma mal intencionada al God, GM Tutores, ni a los jugadores que juegan el servidor. Tampoco puede hacer uso inapropiado de los canales Spanish-Chat, Brazil-Chat, Trade, donde se atienden ventas y conversaciones sobre el servidor.</p>
 <p style=”text-align: justify;”>II. No abusar de cualquier posible bug o error del juego, notifica y da a conocer la situacion al GOD si ocurre y sera solucionado a la brevedad.</p>
 <p style=”text-align: justify;”>III. No publicitar contenido externo al servidor. Especificamente, se castigaran publicidades sobre cualquier otro servidor externo a Greed. Ademas se prohibe vender tus items o personajes de Greed por dinero REAL, tibia coins, o world-change por otro servidor que no sea greed.cl</p>

 <p style=”text-align: justify;”><b><u>Sobre los problemas de cuentas hackeadas, olvidadas o robadas:</u></b></p>

<p style=”text-align: justify;”>I. El equipo de Greed te solicita atentamente que utilices datos de buena seguridad, evitando repetir contraseñas que hayas utilizado en otros servidores o que sean faciles de predecir (por ejemplo: asd, 123, etc).</p>
<p style=”text-align: justify;”>II. En caso de tener problemas para ingresar puedes comunicarte via e-mail a [email protected] con el asunto "Greed OT".</p>

<p style=”text-align: justify;”> <b><u>Sobre la realizacion de donaciones al servidor:</u></b></p>

<p style=”text-align: justify;”>I. Usted al momento de donar, esta totalmente de acuerdo con que su donacion es un aporte a fin de mantener y mejorar el servidor Greed. Por lo tanto, usted aprueba el hecho de que no esta comprando ni pagando ningun objeto, fin, o situacion en particular.</p>
<p style=”text-align: justify;”>II. Usted tambien esta de acuerdo en que no habra ningun reembolso por su donacion. El servidor Greed se compromete a entregar de buena fe las gratificaciones pertinentes en agradecimiento por las donaciones realizadas.</p>

 <p style=”text-align: justify;”><b><u>Sobre amonestaciones y baneos:</u></p></b>
 
<p style=”text-align: justify;”>I. El incumplimiento de alguna de estas reglas se traducira en distintos castigos, estos seran aplicados en consideracion de las circunstancias en que se incumplieron las reglas de Greed.</p>
<p style=”text-align: justify;”>II. El equipo de Greed no tendra la obligacion de avisar o justificar un baneo.Sin embargo, si consideras injusta la aplicacion de alguna de estas medidas puedes enviar un mai a [email protected]</p>
<p style=”text-align: justify;”>III. Los castigos por el incumplimiento de reglas son:</p>
<p style=”text-align: justify;”>a) Baneos normales (30 dias)</p>
<p style=”text-align: justify;”>b) Baneos permanentes (1 año)</p>
<p style=”text-align: justify;”>c) Eliminacion de cuentas</p>
<p style=”text-align: justify;”>d) Bloqueo de direccion IP</p></p>
 <p style=”text-align: justify;”><b><u>Sobre cambios en las reglas y servicios:</u></p></b>
<p style=”text-align: justify;”>En caso de existir algun cambio en las reglas, servicios, o sistemas de alta relevancia en Greed (donaciones, registros, accesos, etc.), los jugadores seran notificados por la via que sea considerada mas apropiada para su difusion inmediata. Reglas para http://www.greed.cl. Contacto: [email protected].</p>
</div>
</body>
</html>
</li></td>

rules.png

Example of texts

1) Linking text

Linking is something we do a lot in our website. For this we will use <a href> tag. You can fill the space with .php pages or with external links, you choose.
PHP:
<a href="register.php">Sign up</a>

2) Text button
Is important to have buttons, for example, download buttons. I saw that many OT owners use images to link, that is not bad, but a button will be much more optimized.
PHP:
<span style="background-color: #31261D; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Download Greed for Windows</span>

3) Coloured text
Colors are important tomake the user see something important. You can choose any color you want visiting any html color finder.
Code:
<span style="color: #C64125;">[Information]</span>

4) Image as linking
Using images to linking is a good idea. To show an image just use:
PHP:
<img src="layout/img/imagename.gif">
You can also add span types to this image (click on span types for a usefull link)
PHP:
<span style="background-image: url(layout/img/mybutton.png);"></span>
Or use it for linking
PHP:
<a href="http://website.com"><img alt="Website" src="layout/img/link.png" width=150" height="70"></a>

There's others usefull codes for texting. But is necessary to learn them all? The answer is no. Just go to a nice html text editor and you will start learning just by looking the results of your texts. For this I recommend Free online HTML editor - onlinehtmleditor.dev (https://onlinehtmleditor.dev/)

text_editor.png

That is for now, started from the very basic stuff, never did a PHP/HTML course, all of this has been learned by making OTS.
I will think about how to continue this guide if there's some replies with intresting questions 🤔 Regards!
 
Last edited:
Colouring palettes
To start colouring the layout, we can go for many combinations, but the main focus should be in choosing a color harmony that visually fits well, or mean something to the player.

a) To provoke a meaning, a fast way is to search a color palette related to a concept. Fox example, go to pinterest and seach "winter color palette", thoose paletes will let the player know it's something related to winter, ice... for example, Ice War Server?.

b) To visually fit well, an important thing is to apply color theory.
1620411359912.png
This are the fundamentals when choosing palettes. After that, choose a prepared color for html,, you can find them by searching pantone colors (for example, this Pantone Chart). Let's say my layout logotype will contain a Demon as protagonist. We search for a Demon reference, and see which Pantones of the chart fits for my layout.

pantone.png

Search the selected colors in a pantone to HEX converter. For example Pantone 485 C = DA291C.
And that's it. Now you have your color palette ready to use.

Colouring .css and borders
Now we need to set-up our layout to have the new colors on it. For this, we have to go to layout/style.css. Inside this file we will see the colour information of menus, backgrounds, tables, borders, etc. To make this easier, I will reference parts of the code that are good for setting palette colors. We will use 3 colors to fit the ambience, for example #afa9a0 #31261D #E1D3C4.

For the first color:
PHP:
table.stripped tr:nth-child(even) td {
  background-color: #afa9a0 ;

Second color:
PHP:
table tr th{
  background: #31261D;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;
}

tr.yellow td {
  background: #31261D;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;

Third color:
PHP:
table tr td {
  background: #E1D3C4;
  color: #47433F;
}
table.stripped tr:nth-child(even) td {
  background-color: #afa9a0 ;
}
table.stripped tr:nth-child(odd) td{
  background-color: #E1D3C4;
}
table.TableContent tr td , table.Table3 tr td {
  background: #f1e0c5;
}
table.TableContent tr.LabelH td {
  background: #E1D3C4;

With this, you will make a default table design with a color harmony.
table_sample.png

And this was the second part of this tutorial. Still have some ideas of how to continue this guide, will see how it goes.
Thanks for reading, share your outcomes 😮. Regards!
 
Last edited:
The intention is good, the execution not so much.

To begin with, there's not such thing as "diving by border", border by itself surrounds an element by one or multiple sides.

"Table with colspan" - "you can use <td colspan> to set how many rows the title will have in the next horizontal line" - colspan specifies how many columns does a cell span, not rows.

There are also outdated suggestions on how to style various elements and what they do.
Saying
Lua:
<a href="register.php">Register</a>
Would link x.y/register.php is a false statement as that relies on the current page's URI.
When visiting a page such as x.y/test/ the anchor element would link to x.y/test/register.php instead, making the guide reader confused as to why would it not work as suggested.

In general this guide seems to suggest many bad practices and code styles which were used before HTML5 & CSS3, while not discussing very important aspects of real web development such as UX, various browsers, page speed, SEO, etc.

The interesting bonus is for some unknown reason linking Spanish documentations.

In the end there's a reason why serious websites consider mobile devices as a major part, while OpenTibia servers still seem to be using terrible templates which are basically unusable on mobile devices.


Web development is not simple.
 
The intention is good, the execution not so much.

To begin with, there's not such thing as "diving by border", border by itself surrounds an element by one or multiple sides.

"Table with colspan" - "you can use <td colspan> to set how many rows the title will have in the next horizontal line" - colspan specifies how many columns does a cell span, not rows.

There are also outdated suggestions on how to style various elements and what they do.
Saying
Lua:
<a href="register.php">Register</a>
Would link x.y/register.php is a false statement as that relies on the current page's URI.
When visiting a page such as x.y/test/ the anchor element would link to x.y/test/register.php instead, making the guide reader confused as to why would it not work as suggested.

In general this guide seems to suggest many bad practices and code styles which were used before HTML5 & CSS3, while not discussing very important aspects of real web development such as UX, various browsers, page speed, SEO, etc.

The interesting bonus is for some unknown reason linking Spanish documentations.

In the end there's a reason why serious websites consider mobile devices as a major part, while OpenTibia servers still seem to be using terrible templates which are basically unusable on mobile devices.


Web development is not simple.

@Jacobs thanks for the comment! It's good to know. It's true there's bad html practices, what you said is good contribution for the readers. Have'nt clarified, but I'm planning to focus on color harmonies instead of coding for this thread, taking the very basic to build something. For that, I will follow with:

Colouring borders, titles and corners

First we get Photoshop and a good layout from OTland, that has buttons and corners that you like. For this example we will use this one:

The layout I selected has this buttons on its img folder.
example_buttons.png

We have selected our color palette in post #2. The next step is to colour buttons, corners and headers with the 3 colors we choose to fit the ambience. In other words, the ones we applied directly to .css. Let's say we will use Pantone 483, Pantone 484 and Pantone 485 for this. That will be #653024, #9A3324, and #DA291C.

Now, we going to apply the more opaque color to the darkest img. We will use Pantone 483 (653024), go to Photoshop and open the widget_bg image, once it is opened, create a new uniform color with the HEX code 653024.

color_solido.png

Now select widget_bg layer, open effects panel again, and use black and white. This is to get a greyscale of the button, for our next step, you can open the black and white properties and change preset to a lighter one if you want. I recommend to go default, but if you want more light, change it.

blacnandwhite.png

And finally you have to Overlay the color fill layer. You can choose between Overlay, Soft Light or Hard Light to apply the color to the button. The goal is to apply the palette we chosen and maintain the greyscale, to make a color armony between the website elements.

overlay.png

Repeat the same to every image, corner, button, etc. of the img folder. You will have to make this carefully, the darkest color (653024) to the darkest buttons, the midtones (9A3324) to the midtones, and the hightlighted to the highlighted (DA291C). At the end you will get something like this.

buttons_end.png

And that's for now. Just replace the old buttons with the news and press CTRL + F5 in your browser to reload. I don't have space to upload more images to the post, so I challenge you to do it and see how it changes, share the outcomes ;) Regards!
 
Last edited:
Back
Top