I got bored so I decided to create a simple signature template for the geeks who enjoy showing off their special machines that they love so much and maybe for those who don't even have a signature.
The signature will look like this =>
Template here =>
<ul style="font-weight: bold; float: left; list-style-type: none; width: 30%; padding-left: 1px; margin-top: -14px;">
<li><img alt="OS" src="https://cdn.geekzone.co.nz/imagessubs/f6bb1d2dd7c777c9e93546c5de031737.jpg"> Operating System - TEXT HERE</li>
<li><img alt="Monitors" src="https://cdn.geekzone.co.nz/imagessubs/9c2ccd32617bef13c625488551336ba5.jpg "> Monitors - TEXT HERE </li>
<li><img alt="CPU" src="https://cdn.geekzone.co.nz/imagessubs/557029ffbb7f2f38a1d43877135d3f2c.jpg "> CPU - TEXT HERE</li>
<ul style="font-weight: bold; float: left; list-style-type: none; width: 22%; display: block; margin-top: -29px;">
<li><img alt="RAM" src="https://cdn.geekzone.co.nz/imagessubs/dcd6dc1846799a9f42009ca2649ad490.jpg"> RAM - TEXT HERE</li>
<li><img alt="GPU" src="https://cdn.geekzone.co.nz/imagessubs/57ee114b8ddc89a81c3ad73f7303191b.jpg"> GPU - TEXT HERE</li>
<li><img alt="HDD" src="https://cdn.geekzone.co.nz/imagessubs/24390755e7c988fdaf35cd570f889484.jpg "> Drives - TEXT HERE</li>
Sorry for the messy code, but GeekZone doesn't support pre-formatted text (that I'm aware of).
Just replace all your specs in the designated areas (TEXT HERE), if you are adding a lot of information then adjust the CSS width for each <ul> so it all fits in.
Here's the trick, for some reason Geekzones HTML editor keeps adding <br /> when ever you save your signature, and it kinda messes up all the spacing of this template. I've added CSS to counteract this but it only works with one save.
What? Explain Please? - If you add this to your signature, make sure to fill in all the information correctly, then click save. It will add the <br /> where it wants to, but the CSS should fix it. If you decide to go back and save it again it will add even more <br /> in the code, therefor screwing up the template.
You would have to start all over again, copy paste the code, edit and save only once. So make sure you fill in your specs correctly the first time.
If you would like to improve this code, feel free to do so but please paste the code below so we can keep this all in one thread.