• 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!

[Znote AAC] CIP based Gallery

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
1,470
Solutions
27
Reaction score
844
Location
Santiago - Chile
GitHub
ralke23
Twitch
ralke23
Hi! I'm starting to understand the basics of html, css and js thanks to this forum. Now, I can contribute with new designs for Znote AAC and I hope to continue doing so in the future.

What does this .php page do?
It is a simple gallery on 207x100 format with description, very easy to modificate.
gallery_page.png

How it was built?
I simply entered to Tibia site, copied their gallery, and pasted in Word to HTML editor.
Then I just modified the html code according to what I wanted as outcome.

How to install?
First, place gallery.php inside your www folder. Then, create a new folder named "gallery" in your layout's folder (in my case www\layout) and paste all the images inside (1-6.png and gallery_bg.png). All the content is attached on the .rar below. The pack also contains a .psd file to modificate the images easily.

How to edit?
a) To load an image, set the directory on img src="" parameter
Code:
<img src="layout/gallery/1.png" style="border: 1px solid rgb(123, 110, 76); width: 207px; height: 100px; cursor: default;">

b) Then modify the text description inside <p></p>
Code:
<p style="text-align: center; vertical-align: middle; display: table-cell;">Greed has many custom monsters from higher versions.</p>

c) If you wish to change the background from the image, just switch background-image parameter
Code:
background-image: url(layout/gallery/gallery_bg.png)

The .php code
PHP:
<?php require_once 'engine/init.php'; include 'layout/overall/header.php'; ?>
<table border="0" cellspacing="1" cellpadding="4" width="100%">
  <tr bgcolor="#505050">
  <td class="white"><b><?php echo $config['site_title'] ?> | Gallery</b></td>
  </tr>
  <td><center><p></p>
<div class="ScreenshotThumbnailContainer" style='position: relative; margin: 3px; padding: 3px; width: 232px; border: 1px solid rgb(123, 110, 76); color: rgb(201, 189, 171); display: inline-block; font-family: Verdana, Arial, "Times New Roman", sans-serif; font-size: 13.3333px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 242, 219); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-image: url(layout/gallery/gallery_bg.png); cursor: default;'><a class="ScreenshotGalleryLink" style='font-family: Verdana, Arial, "Times New Roman", sans-serif; font-weight: 700; color: rgb(0, 66, 148); text-decoration: none; cursor: default;'><img src="layout/gallery/1.png" style="border: 1px solid rgb(123, 110, 76); width: 207px; height: 100px; cursor: default;"></a>
    <div class="ScreenshotText" style="position: relative; width: 230px; height: 75px; display: table;">
        <p style="text-align: center; vertical-align: middle; display: table-cell;">Greed has many custom monsters from higher versions.</p>
    </div>
</div>
<div class="ScreenshotThumbnailContainer" style='position: relative; margin: 3px; padding: 3px; width: 232px; border: 1px solid rgb(123, 110, 76); color: rgb(201, 189, 171); display: inline-block; font-family: Verdana, Arial, "Times New Roman", sans-serif; font-size: 13.3333px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 242, 219); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-image: url(layout/gallery/gallery_bg.png); cursor: default;'><a class="ScreenshotGalleryLink" style='font-family: Verdana, Arial, "Times New Roman", sans-serif; font-weight: 700; color: rgb(0, 66, 148); text-decoration: none; cursor: default;'><img src="layout/gallery/2.png" style="border: 1px solid rgb(123, 110, 76); width: 207px; height: 100px; cursor: default;"></a>
    <div class="ScreenshotText" style="position: relative; width: 230px; height: 75px; display: table;">
        <p style="text-align: center; vertical-align: middle; display: table-cell;">You can recover stamina while training in our special rooms.</p>
    </div>
</div>
<div class="ScreenshotThumbnailContainer" style='position: relative; margin: 3px; padding: 3px; width: 230px; border: 1px solid rgb(123, 110, 76); color: rgb(201, 189, 171); display: inline-block; font-family: Verdana, Arial, "Times New Roman", sans-serif; font-size: 13.3333px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 242, 219); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-image: url(layout/gallery/gallery_bg.png); cursor: default;'><a class="ScreenshotGalleryLink" style='font-family: Verdana, Arial, "Times New Roman", sans-serif; font-weight: 700; color: rgb(0, 66, 148); text-decoration: none; cursor: default;'><img src="layout/gallery/3.png" style="border: 1px solid rgb(123, 110, 76); width: 207px; height: 100px; cursor: default;"></a>
    <div class="ScreenshotText" style="position: relative; width: 230px; height: 75px; display: table;">
        <p style="text-align: center; vertical-align: middle; display: table-cell;">Addons are obtainable looting creatures or trading players.</p>
    </div>
</div>
<div class="ScreenshotThumbnailContainer" style='position: relative; margin: 3px; padding: 3px; width: 232px; border: 1px solid rgb(123, 110, 76); color: rgb(201, 189, 171); display: inline-block; font-family: Verdana, Arial, "Times New Roman", sans-serif; font-size: 13.3333px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 242, 219); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-image: url(layout/gallery/gallery_bg.png); cursor: default;'><a class="ScreenshotGalleryLink" style='font-family: Verdana, Arial, "Times New Roman", sans-serif; font-weight: 700; color: rgb(0, 66, 148); text-decoration: none; cursor: default;'><img src="layout/gallery/4.png" style="border: 1px solid rgb(123, 110, 76); width: 207px; height: 100px; cursor: default;"></a>
    <div class="ScreenshotText" style="position: relative; width: 230px; height: 75px; display: table;">
        <p style="text-align: center; vertical-align: middle; display: table-cell;">Our monsters has the lastest damage formulas, skills reductions and waves.</p>
    </div>
</div>
<div class="ScreenshotThumbnailContainer" style='position: relative; margin: 3px; padding: 3px; width: 232px; border: 1px solid rgb(123, 110, 76); color: rgb(201, 189, 171); display: inline-block; font-family: Verdana, Arial, "Times New Roman", sans-serif; font-size: 13.3333px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 242, 219); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-image: url(layout/gallery/gallery_bg.png); cursor: default;'><a class="ScreenshotGalleryLink" style='font-family: Verdana, Arial, "Times New Roman", sans-serif; font-weight: 700; color: rgb(0, 66, 148); text-decoration: none; cursor: default;'><img src="layout/gallery/5.png" style="border: 1px solid rgb(123, 110, 76); width: 207px; height: 100px; cursor: default;"></a>
    <div class="ScreenshotText" style="position: relative; width: 230px; height: 75px; display: table;">
        <p style="text-align: center; vertical-align: middle; display: table-cell;">You can travel between the city of Mi'hen and Kilika by using boats.</p>
    </div>
</div>
<div class="ScreenshotThumbnailContainer" style='position: relative; margin: 3px; padding: 3px; width: 232px; border: 1px solid rgb(123, 110, 76); color: rgb(201, 189, 171); display: inline-block; font-family: Verdana, Arial, "Times New Roman", sans-serif; font-size: 13.3333px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 242, 219); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-image: url(layout/gallery/gallery_bg.png); cursor: default;'><a class="ScreenshotGalleryLink" style='font-family: Verdana, Arial, "Times New Roman", sans-serif; font-weight: 700; color: rgb(0, 66, 148); text-decoration: none; cursor: default;'><img src="layout/gallery/6.png" style="border: 1px solid rgb(123, 110, 76); width: 207px; height: 100px; cursor: default;"></a>
    <div class="ScreenshotText" style="position: relative; width: 230px; height: 75px; display: table;">
        <p style="text-align: center; vertical-align: middle; display: table-cell;">Wear oldschool outfits or unlock and collect the classic outfit addons.</p>
    </div>
</div>
</div>
</div></center>
<p></p>
  </td>
</table>
<?php
include 'layout/overall/footer.php'; ?>

Hope you like it!
Regards ;)
 

Attachments

  • Ralke_Gallery_ZNoteAAC.rar
    11 MB · Views: 30 · VirusTotal
Nice!

Znote AAC also comes by default with a gallery page, that allows players to post their images and present them on website. (With admin moderation).
(AcidsOT Demo)

It would be cool to have a variation with this design (with small tweaks like add title), that retains the community driven functionality. :)

You probably don't have to change the PHP code at all. If you inspect the gallery page, you can see when I enter PHP mode and leave PHP mode:
<?php = start PHP code mode.
?> = leave PHP code mode.

So anything that is not between <?php and ?> is HTML code.
 
Last edited:

Similar threads

Back
Top