LoyceV's Avatar and Signature log (campaign managers read this!)

[LoyceV]

Design Code help needed

Since I still know nothing about CSS, I need some help:
Take this test page for example: I want to place the avatar left from the signature. The signature code is copied as-is from the forum. Example:

Code:

<td colspan="2" width="100%" class="smalltext"><div class="signature"><div align="center"><table style="font: inherit; color: inherit;"><tr><td valign="top" style="font: inherit; color: inherit;"></td><td valign="top" style="font: inherit; color: inherit;"><a rel="ugc" class="ul" href="https://agoradesk.com/"><span style="color: #005cef;"><span style="font-size: 2pt !important; line-height: 1.3em;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;&#9600;&#9600;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9600;&#9600;&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9600;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9600;&#9608;&#9608;&#9608;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9612;<span style="color: #fff;">&#9608;</span>&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;&#9604;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;</span>&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9604;&#9604;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;</span>&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9604;&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span></span></a></td><td valign="top" style="font: inherit; color: inherit;"><a rel="ugc" class="ul" href="https://agoradesk.com/"><span style="color: transparent;"><span style="font-size: 1pt !important; line-height: 1.3em;">.</span><br /><span style="font-family: arial black;"><span style="font-size: 24pt !important; line-height: 1.3em;"><span style="background-color: #dbe3f3;"><span style="font-size: 7pt !important; line-height: 1.3em;">.</span></span><span style="background-color: #afc8f2;"><span style="font-size: 7pt !important; line-height: 1.3em;">.</span></span><span style="background-color: #74a3f1;"><span style="font-size: 7pt !important; line-height: 1.3em;">.</span></span><span style="background-color: #4285f0;"><span style="font-size: 7pt !important; line-height: 1.3em;">.</span></span><span style="background-color: #1267ef;"><span style="font-size: 7pt !important; line-height: 1.3em;">.</span></span><span style="background-color: #005cef;"><span style="color: #005cef;">.</span><span style="font-size: 5pt !important; line-height: 1.3em;"><sup><span style="font-family: tahoma;"><span style="font-size: 20pt !important; line-height: 1.3em;"><b><span style="color: #fff;">AgoraDesk</span></b></span></span></sup></span><span style="background-color: #005cef;"><span style="font-size: 7pt !important; line-height: 1.3em;">..</span></span><span style="background-color: #1267ef;"><span style="font-size: 7pt !important; line-height: 1.3em;">.</span></span><span style="background-color: #4285f0;"><span style="font-size: 7pt !important; line-height: 1.3em;">.</span></span><span style="background-color: #74a3f1;"><span style="font-size: 7pt !important; line-height: 1.3em;">.</span></span><span style="background-color: #afc8f2;"><span style="font-size: 7pt !important; line-height: 1.3em;">.</span></span><span style="background-color: #dbe3f3;"></span></span></span></span></span></a></td><td valign="top" style="font: inherit; color: inherit;"><span style="color: transparent;"><span style="font-size: 6pt !important; line-height: 1.3em;">.</span><br /><a rel="ugc" class="ul" href="https://agoradesk.com/"><span style="font-size: 15pt !important; line-height: 1.3em;"><span style="font-family: arial black;"><span style="color: #040F26;"><b>&nbsp; &nbsp; &nbsp;P2P Bitcoin Exchange&nbsp; &nbsp; </b></span></span></span></a></span></td><td valign="top" style="font: inherit; color: inherit;"><span style="font-size: 2pt !important; line-height: 1.3em;"><span style="color: #005cef;">&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;</span></span></td><td valign="top" style="font: inherit; color: inherit;"><div align="center"><span style="font-size: 2pt !important; line-height: 1.3em;"><span style="color: #005cef;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br /><br /><span style="color: #061536;">&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9604;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9604;&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9604;&#9604;<br />&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;<br />&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;&#9600;<br />&#9604;&#9604;&#9604;&#9604;&#9604;&#9604;&#9604;&#9604;&#9604;&nbsp; &nbsp;&#9604;&#9604;&#9604;&#9604;&#9604;&#9604;&#9604;&#9604;&#9604;<br />&#9600;&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;&#9600;<br />&#9600;&#9608;&#9608;&#9608;&#9608;&#9600;&nbsp; &nbsp;&#9600;&#9608;&#9608;&#9608;&#9608;&#9600;</span><br /><br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span></span></div></td><td valign="top" style="font: inherit; color: inherit;"><div align="center"><span style="font-size: 2pt !important; line-height: 1.3em;"><span style="color: #005cef;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br /><span style="font-size: 5pt !important; line-height: 1.3em;"><span style="color: transparent;">.<br /><span style="font-family: Arial black;"><span style="font-size: 12pt !important; line-height: 1.3em;"><span style="color: #061536;">NO KYC</span></span></span><br />.</span></span><br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span></span></div></td><td valign="top" style="font: inherit; color: inherit;"><div style="text-align: right;"><span style="font-size: 2pt !important; line-height: 1.3em;"><span style="color: #005cef;">&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;</span></span></div></td><td valign="top" style="font: inherit; color: inherit;"><a rel="ugc" class="ul" href="http://2jopbxfi2mrw6pfpmufm7smacrgniglr7a4raaila3kwlhlumflxfxad.onion/"><span style="font-size: 2pt !important; line-height: 1.3em;"><span style="color: #005cef;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;&#9604;&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;<span style="color: #fff;">&#9608;</span>&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;&#9612;<span style="color: #fff;">&#9608;</span>&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9612;&#9604;<span style="color: #fff;">&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;&#9604;&#9608;<span style="color: #fff;">&#9608;&#9608;</span>&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;&#9604;&#9604;&#9608;<span style="color: #fff;">&#9608;</span>&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;</span>&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;&#9604;&#9608;&#9600;&#9604;&#9608;&#9608;<span style="color: #fff;">&#9608;</span>&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;</span>&#9608;<span style="color: #fff;">&#9608;</span>&#9608;&#9600;&#9604;&#9608;&#9612;&#9616;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9616;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;</span>&#9612;&#9616;<span style="color: #fff;">&#9608;</span>&#9608;&#9600;&#9612;&#9616;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9616;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;</span>&#9608;<span style="color: #fff;">&#9608;</span>&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9604;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span></span></a></td><td valign="top" style="font: inherit; color: inherit;"><span style="font-size: 2pt !important; line-height: 1.3em;"><a rel="ugc" class="ul" href="https://agoradesk.com/"><span style="color: #005cef;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;&#9600;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9600;&#9600;&#9608;&#9600;&#9600;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;</span>&#9604;&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9604;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9600;&#9604;&#9604;&#9604;&#9604;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;</span>&#9604;&#9604;&#9608;&#9604;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;</span>&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;</span>&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;</span>&#9600;&#9600;&#9608;&#9600;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9600;&#9600;&#9600;&#9600;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;<span style="color: #fff;">&#9608;&#9608;&#9608;</span>&#9600;&#9600;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9600;&#9600;<span style="color: #fff;">&#9608;&#9608;</span>&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9604;&#9604;&#9608;&#9604;&#9604;<span style="color: #fff;">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&#9604;&#9604;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;<br />&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span></a></span></td><td valign="top" style="font: inherit; color: inherit;"></td></tr></table></div></div></td><BR><BR>

It's probably very easy if you know what you're doing (unlike me, I'm flying blind here). Who helps me out?

[hopenotlate]

I'm still waiting for a campaign that pays extra to users who have tens of thousands of old posts.

As far as I know there was only one campaign awarding users for their past activity, in addition to the posts they made weekly, on this forum but maybe I'm missing some others

-snip-
We will pay:
- $0.25 per new post
- $0.0005 daily * total post count (all posts for your account(s) are counted. The stat on your profile.)
Ex: You have 1000 posts total on forum and you make 10 more after joining. You will get $2.5 for the 10 posts at the end of the day. You will also get $0.505 for the day. If you then stopped posting, you would keep getting $0.505 daily for keeping the signature.

Amount is credited in BTC at current exchange rate (adjusted daily, you will see amount to pay in USD and corresponding BTC amount credited). Payments will be processed once per week (during weekend) to allow us to review reputation and post quality for users.

-snip -

[examplens]

Design help needed

Since I still know nothing about CSS, I need some help:
Take this test page for example: I want to place the avatar left from the signature. The signature code is copied as-is from the forum. Example:
...

It's probably very easy if you know what you're doing (unlike me, I'm flying blind here). Who helps me out?

I'm not sure that design is the right word for what you want, at least looking at the design of other parts of the loyce.club site 

The minimum for you is an ordinary table, I would suggest structure something like this:



or as an HTML document:



I know that you are not a supporter of using external services, but Bootstrap is something completely different and has a lot of advantages. Finally, you can host it yourself if you don't want these calls.
Here is the code:

Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h6 class="">last checked: 2023-09-19_Tue_10:12h </h3>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="row">
            <div class="col-md-12 text-center">
              <h4 class="">insert Avatar here</h4>
            </div>
          </div>
        </div>
        <div class="col-md-8">
          <div class="row">
            <div class="col-md-12">
              <h4 class="text-center">Insert Signature code here</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

[digaran]

I don't know why you haven't designed a good looking site to automate everything, you could provide all your services via the site and only announce new services in here.
Would doing that require backend development which you don't have?  I can imagine learning full stack development would take you less than 6 months considering your intelligence.

It's a waste of your talent if you don't try to harness all it's potential. Feel free to burn this letter after reading. Lol.

[LoyceV]

Design Code help needed

I'm not sure that design is the right word for what you want, at least looking at the design of other parts of the loyce.club site  

Good point, I need Code help

The minimum for you is an ordinary table, I would suggest structure something like this:

That's within my skill set, but I was hoping for something better. Tables are annoying with amongst others scroll bars.

I know that you are not a supporter of using external services, but Bootstrap is something completely different and has a lot of advantages. Finally, you can host it yourself if you don't want these calls.

The problem is that it adds many lines of code. I'm looking for something simple that works with the existing code inside the forum's signature code.

I don't know why you haven't designed a good looking site to automate everything, you could provide all your services via the site and only announce new services in here.

I care about data, not looks Although things would be much easier with a big database, but I'm too locked in to start changing things now.

[FatFork]

The problem is that it adds many lines of code. I'm looking for something simple that works with the existing code inside the forum's signature code.

The easiest way to achieve this is by adding a float attribute to the avatar image.

For example, if you want the avatar on the left side of the signature, just include this in your <img> tag: style="float: left;"

Code:

<img src="da10e998b86302f64dc0c2f0d16583b1b6f3d1e4abed1b007eb264173b5a7804.png" alt="Avatar first detected on 2023-09-19_Tue_12:11h" width="120" height="80" style="float: left;">

Everything that comes after that (in this case, the signature code) will be displayed to the right of the image.


When you want to break away from the float (to force a newline), add this attribute: style="clear: both;"

For example, in your case, I would suggest adding this to the date/time content:

Code:

<b style="clear: both;">2023-07-03_Mon_06:10h</b>

This will help in cases where there is no signature code present but the following content should go below the image.

[NotATether]

Design Code help needed

Since I still know nothing about CSS, I need some help:
Take this test page for example: I want to place the avatar left from the signature. The signature code is copied as-is from the forum. Example:

Code:

<removed obnoxious signature code>

It's probably very easy if you know what you're doing (unlike me, I'm flying blind here). Who helps me out?

Your HTML is making elements that look like this:

Code:

<b>2023-07-03_Mon_21:50h</b>
<br>
<img src="da10e998b86302f64dc0c2f0d16583b1b6f3d1e4abed1b007eb264173b5a7804.png" alt="Avatar first detected on 2023-09-19_Tue_12:11h" width="120" height="80">
<div class="signature">
  <!-- very long signature code omitted -->
</div>

You should change whatever is generating this code to make each entry print like this:

Code:

<div class="row">
  <div class="image">
    <b>2023-07-03_Mon_21:50h</b>
    <img src="da10e998b86302f64dc0c2f0d16583b1b6f3d1e4abed1b007eb264173b5a7804.png" alt="Avatar first detected on 2023-09-19_Tue_12:11h" width="120" height="80">
  </div>
  <div class="signature">
    <!-- very long signature code omitted -->
  </div>
</div>

Now put this inside your <head> element:

Code:

<style>
.row {
  display: flex;
  flex-direction: row; /* makes images and signatures appear on the same line horizontally (redundant - it is already the default setting for flex) */
}
.image {
  display: flex;
  flex-direction: column; /* makes the date and the image appear vertically stacked */
  margin-right: 10%; /* Make some space between avatar and signature */
}
.signature {
  position: relative;
  top: 24px; /* Use these to align the signatures to the middle of the entry instead of stuck at the top area. */
}
</style>

Source: I'm a full stack dev.

[LoyceMobile]

Source: I'm a full stack dev.

This looks good, I'll test it tomorrow. Thanks!

[LoyceV]

Bump!

I'm still working on adding avatars.

[promise444c5]

Bump!

I'm still working on adding avatars.

You can create a div that contains both

<div class="container" style='display:flex,>
      <div class='avater' style='flex:1' >// depending on how you want it to be you can specify the flex : 2 if you want it to be on equal scale with that of signature
           <img src='path' />
           <small> date</small> <-- you can specify the style of box-model[ margin-top,padding] play with them using pixels(px) as unit --->
       </div>
       <div class='signatures'>
             <--your signature --->
       </div>
</div>
I added classes because the inline css my look to bumpy  so you can use external css. This is just only a write up