Charming
Lou's networking code - Printable Version

+- Charming (https://charmingrp.com)
+-- Forum: OOC - Community (https://charmingrp.com/forumdisplay.php?fid=4)
+--- Forum: Charmers' Chit Chat (https://charmingrp.com/forumdisplay.php?fid=26)
+---- Forum: Graphics (https://charmingrp.com/forumdisplay.php?fid=28)
+---- Thread: Lou's networking code (/showthread.php?tid=16536)


Lou's networking code - Samuel Griffith - January 6, 2025

Since it got positive feedback I am sharing the code here for general use. It is fully functional for mobile and the images do not need to be sized to specific dimensions. It works better to use square images / gifs for the round portrait though.

This is what it looks like. Code below:

CHARACTER NAME

Morrigan Crowley

About

INFO

INFO

INFO

Best for

INFO

INFO

INFO

Header

CHARACTER NAME -- News and wants

Wants
TEXT

News
TEXT


Code:
<div style="max-width: 100%; font-family: Arial, sans-serif; border: 2px solid #444; padding: 10px; border-radius: 10px; box-sizing: border-box;"><div style="text-align: center; margin-bottom: 15px;"><img src="https://i.ibb.co/gD3CxnV/PLACEHOLDERGIF.gif" alt="CHARACTER NAME" style="width: 150px; height: 150px; border-radius: 50%; object-fit: cover;"></div><div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px; margin-bottom: 15px;"><p style="margin: 5px 0; text-align: center;">@"Morrigan Crowley"</p><center><p style="margin: 5px 0;"><strong>About</strong></p>
<p style="margin: 5px 0;">INFO</p>
<p style="margin: 5px 0;">INFO</p>
<p style="margin: 5px 0;">INFO</p>
</center> </div><div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px; margin-bottom: 15px;">
    <center><p style="margin: 5px 0; font-weight: bold;">Best for</p>
<p style="margin: 5px 0;">INFO</p>
<p style="margin: 5px 0;">INFO</p>
<p style="margin: 5px 0;">INFO</p></center></div><div><img src="https://i.ibb.co/VVLSk75/PLACEHOLDER-HEADER.jpg" alt="Header" style="width: 100%; max-height: 150px; object-fit: cover; margin-bottom: 15px; opacity: 0.8;">
    <center><h2 style="color: #333; margin-top: 0; font-size: 1.5em;">CHARACTER NAME -- News and wants</h2></center> <p><b>Wants</b>
TEXT

<b>News</b>
TEXT
</p></div></div>