Help!! Profile Layout and HTML

So I’m thinking about changing the layout of my profile page to have more specific links on the mood and genre of my music. I understand a little bit about HTML but in all honesty I’m a complete novice with this stuff!

I want to have categories similar to stuff like this (without copying the layout of course)

my problem is I don’t know how to have multiple pictures in a row that each individually link to the public collections that I will set up, and have struggled to find how to do this on the web. Im fine with creating/sourcing the pictures to use but do I need to set them at a specific size? I used Envatitor on the current pictures set for my profile but couldnt work out how to set them to be smaller and next to each other.

Sorry if this is really simple to figure out but I would be very grateful if anyone could help me out!

Hi, maybe this tool will help you a bit:

Thanks, I’ve used this before like I said but I wanted to know more specifically how to have multiple thumbnails next to each other like Soundroll’s page if you look at the link I posted.

I’m sorry I should have read more carefully what you have written. I’m also interested how to make such links and buttons.

Can anyone help?

The render engine of profile pages automatically arranges embedded images in a row when the sum of the embedded images width is less than 616px. So if you want to have 4 icons or images arranged in a row on your profile, - assuming all of your images/icons will have the same width - each image width should be less than 616 / 4 = 154px.

If want your layout to be similar to soundroll’s, like if you want white spaces between icons or something like that, you’ll need to take some pixels at the right or left of each icon and keep them blank/transparent (I’d say 6-12 pixels would be perfect). So that the width of the visible part + the width of the transparent part should be equal to 154px.

Now you’re almost there, upload your icons somewhere online, and just embed them in the order you designed them.
I hope that helps :thumbsup:

Thank you this has helped me understand a lot! I’m gonna get some layout graphics sorted and will give this a go :smiley:

You’re welcome. Looking forward to see how it goes :smile:

Just made some basic graphics for now and got them on my page :slight_smile:

1 Like

Hi, Sorry but I think I’ve missed a part as my images are 202 * 50 and I’d like 3 rows.
However, I’m still stuck on the space between each box. Do you have any copy of the code you’re using for it ?