Pages and html/css...ugh!

Jo.

Well-known member
Okay so I know the section in the acp where you're creating a page says "template html", but I can't get it to work. Probably because I only know old version html and am clueless with css, which I'm presuming is why it won't work?

I'm trying to create a page with a selection of avatars that our users will be able to copy to their desktop and then add to their profile (for important reasons, we only want our members to use avatars from a selection we provide, and not use their own).

Anyway, so I'm trying to do it using tables but I'm pretty sure that's a mega outdated and stupid way to do it, but I really don't know how to do it any other way. My knowledge of html is pretty sparse, and as for css... well I can see what stuff means in a piece of code if it's in front of me but I don't have the knowledge to create from scratch. I've tried googling but I'm just not getting it. (I also have dyslexia which makes it difficult for me to learn from reading and I struggle with reading a load of code).

Can anybody help me?

This is what I'm trying to do in old version stuff:

<html>
<body>

*load of text here*
<br><br>
<b>Title1</b>
<br>
<table border="0"
cellpadding="15">
<tr>
<td><img src="" title=""></td>
<td><img src="" title=""></td>
<td><img src="" title=""></td>
<td><img src="" title=""></td>
<td><img src="" title=""></td>

</tr>
</table>

<br>
<b>Title2</b>
<br>
<table border="0"
cellpadding="15"><tr>
<td><img src="" title=""></td>
<td><img src="" title=""></td>
<td><img src="" title=""></td>
<td><img src="" title=""></td>
<td><img src="" title=""></td>

</tr>

*and so on...*

</table></body>
</html>
 
Is this any good?

Code:
<style type="text/css">
.my_avatar {
padding: 10px;
border: 1px solid #999999;
background-color: #cccccc;
}
</style>

<img src="../path/to/image1.png" class="my_avatar" alt="Avatar 1">
<img src="../path/to/image2.png" class="my_avatar" alt="Avatar 2">
<img src="../path/to/image3.png" class="my_avatar" alt="Avatar 3">
<img src="../path/to/image4.png" class="my_avatar" alt="Avatar 4">

You can edit the css to suit and the images will just keep overflowing into a new row.
 
  • Like
Reactions: Jo.
Thanks Brogan, that helps a bit... but I don't know how to even do the basic stuff like new lines or making a title for each section of avatars... I'm truly a bit hopeless at this lol!

I need to put a bit of text above the avatars, and then separate groups of avatars into different sections, with headers for each section... and maybe add a title to each image underneath it so that I can add copyright notices etc.

Edit: Forsaken's kindly offered to help write what I need, so don't worry about trying to do anything else. :) I think he's got it covered.
 
Ah, that's a bit more complicated and will require more classes and divs to build up the structure.

You could do it with tables also but it will still require css classes and/or inline styling, as well as HTML to build up the structure.
 
Thanks. :) Forsaken's offered to write something for me, so he's working on it (and I'm very grateful for that cos I'd never figure it out otherwise ha! ...well I'd probably get there eventually but it might take a loooong time!) Anyway, thanks for trying to help. I appreciate it!
 
Top Bottom