ralke
(҂ ͠❛ ෴ ͡❛)ᕤ
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.
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.
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).
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
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.
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.
3) Coloured text
Colors are important tomake the user see something important. You can choose any color you want visiting any html color finder.
4) Image as linking
Using images to linking is a good idea. To show an image just use:
You can also add span types to this image (click on span types for a usefull link)
Or use it for linking
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/)
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!
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>
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>
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>
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>
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">
PHP:
<span style="background-image: url(layout/img/mybutton.png);"></span>
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/)
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: