Request for help with simple profile page HTML

[yossyos]

Hello, I'm a designer and have created a profile page design for a friend. However I'm not familiar with how chaturbate handles html, it seems very 'particular'.

I'm looking for help with the following: I want to slice up the image and have different links for different parts. But also to have no gaps between the slices, so it appears as one large image. The slices are both horizontal and vertical. I was assuming an imagemap would be the way to go but saw that imagemaps are not well supported by chaturbate.

Is anyone able to advise me on this, or assist?

thankyou.

 

[Aleloves]

Hey there, really is simpler than that, I can help you with the base code for be bio, in that case I'd suggest to use png files as you might want to use opacity on them as you may set a background for the complete profile. Same with the code for buttons linking to social media. If that's the case DM me so I can send you examples of code so you can work it out on your end.

 

[yossyos]

Hey there, really is simpler than that, I can help you with the base code for be bio, in that case I'd suggest to use png files as you might want to use opacity on them as you may set a background for the complete profile. Same with the code for buttons linking to social media. If that's the case DM me so I can send you examples of code so you can work it out on your end.

That's great, thank you, i'll DM you. I just signed up to this forum so i'm not sure about how to DM yet, or if i can. I'll see.. please DM me if you are able also.

 

[Aleloves]

That's great, thank you, i'll DM you. I just signed up to this forum so i'm not sure about how to DM yet, or if i can. I'll see.. please DM me if you are able also.

Just did pal

 

[NotYou]

In each section for the css, for each image, simply add something like

margin: 0px 0px -15px 0px

(The numbers are in this order TOP RIGHT BOTTOM LEFT)

So in the example above it doesn't alter the "top", "right" or "left" of the images, but on the "bottom" it removes (places it UP) by 15pixels.
If you wanted to INCREASE the already existing gap, don't use a negative, so for the "bottom", you would just use 15px instead of -15px, for example.

Edit it so it's the specific amount needed.

 

[yossyos]

Ok, so CSS is supported? I was unsure. thank you i'll try that.

Do you have an example of the overall code to use? Is it the standard css for positioning images ?

 

[NotYou]

I had written a huge reply/edit and then I accidentally closed the tab and lost it all!
In short, you may also want to add all of your images to a "sub" part of coding, such as <p style=""> and add a -150px margin to the LEFT, so it gives you an extra 150px to work with.

By default cb does this, with a 150px gap on the left to make it all in line with the other text, which makes sense:



But adding a -150x margin is good cos it frees up giving you more width for your design:

 

[yossyos]

Thank you. I can't check the attachments yet as i only just made this account. Once i'm 'an active poster' i'll be able to, so i guess i need to keep posting.

 

[NotYou]

Thank you. I can't check the attachments yet as i only just made this account. Once i'm 'an active poster' i'll be able to, so i guess i need to keep posting.

Default


With the -150px margin on the left

 

[cexmental]

Hi. If anyone could send a few bio code examples my way too, I would appreciate that. JavaScript and the CB API are one thing, but HTML and CSS I never bothered to learn. I just need a few examples and then I can go wild!

Cheers,
cexmental

 

[Dan N]

Hi. If anyone could send a few bio code examples my way too, I would appreciate that. JavaScript and the CB API are one thing, but HTML and CSS I never bothered to learn. I just need a few examples and then I can go wild!

Cheers,
cexmental

These might be helpful/inspiration:

1. Chaturbate accepted HTML tags
2. Chaturbate free bio design
3. Chaturbate Top Tippers section
4. Jen Chaturbate bio design

Focus is on markup rather than graphics...a few links on my CB page too... it's up to you to connect the dots