ralke
(҂ ͠❛ ෴ ͡❛)ᕤ
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.
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
b) Then modify the text description inside <p></p>
c) If you wish to change the background from the image, just switch background-image parameter
The .php code
Hope you like it!
Regards
What does this .php page do?
It is a simple gallery on 207x100 format with description, very easy to modificate.
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.rar11 MB · Views: 30 · VirusTotal