Bio Page help

[British_Rosie]

First off I apologies If I ramble on but really need some guidance/help for my wifes CB Bio.

My wifes chaturbate page is https://chaturbate.com/redliprose/ I got the template from https://videochatencasa.com/en/design-110-chaturbate-bio-profile-already-created/

I have edited it and changed all the links etc. Only thing left to do is change the images. However I looked at it in its current form on my mobile and it looks bloody awful.
So some questions
1. Do I have to add change something so it looks good on PC and Mobile?
2. I have adobe creative cloud and I love to learn how to do things myself, So I have included a few bios below of Models that I really like and I was just wondering how difficult would it be to do my own version of the 3 pages below for our pages.
Eva_fashionista bio is amazing and would love that for Redliprose bio
Emily_payton bio is good and would like to create a version of this for special times of the year (E.G halloween, Christmas)
Natural_british_emma Id like to do a version for our couples account

https://chaturbate.com/eva_fashionista/

https://chaturbate.com/emily_payton/

https://chaturbate.com/natural_british_emma/

3. I have envato account and on there they have Landing pages / portfolio pages / bios etc but they use HTML, CSS and JS would I be able to adapt one of these pages to work in Chaturbate.

I am currently trying to make everything look similar like a Brand. So BIO, BRB overlay, intro video, outro video and social media accounts so something I am able to create and edit myself would be great.

I have looked at https://camgirl.cloud/ and many other sites but they are either very boring or for the top plan $20 p/m and I already pay a monthly fee to Adobe and Envato to create content. So I have the tools and the content I just need a little guidance, help to get me on my way.

Thank you for your time Rose xxx

 

[Dan N]

Without css is useless work.
Chaturbate doesn't allow @media so fully responsive profile page design can't be done unless it is image based only.
In this case all you need to do is to add a piece of inline css to each image, something like

width:100%;min-width:300px;height:auto;

Please note that inline css must be specific for each image and intended use so if you have two images inline, width:100% will not be a good css to use.

CSS explained:
width:100% - will resize the image to specific width of the main parent width, usually 100%, meaning full width.
min-width:300px - means the image will shrink/resize to the minimum of 300px width (smaller mobile device's screen), smaller than that, not worth watching porn
height:auto - means that the image will display in full height but width being set will be as reference

100% means fluid size
here's a boring example of a CB image-based design

For those who find this material useful, Learn2Code Chaturbate designs

 

[British_Rosie]

Without css is useless work.
Chaturbate doesn't allow @media so fully responsive profile page design can't be done unless it is image based only.
In this case all you need to do is to add a piece of inline css to each image, something like

width:100%;min-width:300px;height:auto;

Please note that inline css must be specific for each image and intended use so if you have two images inline, width:100% will not be a good css to use.

CSS explained:
width:100% - will resize the image to specific width of the main parent width, usually 100%, meaning full width.
min-width:300px - means the image will shrink/resize to the minimum of 300px width (smaller mobile device's screen), smaller than that, not worth watching porn
height:auto - means that the image will display in full height but width being set will be as reference

100% means fluid size
here's a boring example of a CB image-based design

For those who find this material useful, Learn2Code Chaturbate designs

Thank you for your time.

I have looked into all of the model examples shown above and they are all images not a lot of code at all. All it looks like is 1 main image as the background then 5,6,7 images used like boxes. Quick question if I wanted to have images like this on our bio then some clickable images for say allmylinks, Onlyfans, Wishlists would this be possible?
Also how do models keep take of top tippers do they manually update this daily/weekly or is there a way to do this automatically?

 

[British_Rosie]

Is there a

Without css is useless work.
Chaturbate doesn't allow @media so fully responsive profile page design can't be done unless it is image based only.
In this case all you need to do is to add a piece of inline css to each image, something like

width:100%;min-width:300px;height:auto;

Please note that inline css must be specific for each image and intended use so if you have two images inline, width:100% will not be a good css to use.

CSS explained:
width:100% - will resize the image to specific width of the main parent width, usually 100%, meaning full width.
min-width:300px - means the image will shrink/resize to the minimum of 300px width (smaller mobile device's screen), smaller than that, not worth watching porn
height:auto - means that the image will display in full height but width being set will be as reference

100% means fluid size
here's a boring example of a CB image-based design

For those who find this material useful, Learn2Code Chaturbate designs

Is there a hosting website that you would recommend to use because all the examples I shown above the address starts https://camo.mmcdn.com/

 

[Vixxen81]

All of those were made by someone else. Here's the profile for the person who made Emily's page.

https://chaturbate.com/p/profilesdesigner/?tab=bio

 

[Dan N]

Is there a

Is there a hosting website that you would recommend to use because all the examples I shown above the address starts https://camo.mmcdn.com/

I can't recommend any service to host your images except your own domain and hosting, otherwise a lot of issues like bandwidth exceeded, image was deleted, adult policy issues or other similar problems. I recommend a cloud based environment for world wide distribution.

I have looked into all of the model examples shown above and they are all images not a lot of code at all. All it looks like is 1 main image as the background then 5,6,7 images used like boxes. Quick question if I wanted to have images like this on our bio then some clickable images for say allmylinks, Onlyfans, Wishlists would this be possible?
Also how do models keep take of top tippers do they manually update this daily/weekly or is there a way to do this automatically?

Clickable images aka banners. Yes, possible to have multiple images and some of them act like banners (clickable images)*
Top tippers. Chaturbate doesn't allow programming language like javascript in Bio so all editing is done manually by model or model's assistant.

* - focus your attention for a bit, I've already posted a basic image based design using clickable images Source Code on CodePen and the Learn2Code material is also providing demos and source codes here's a demo from 2019 and here's the source code
If you don't have an code editor installed on your device go to the "source code above" copy the markup code and paste the markup code inside the Markup Code Box and click the Show button to render the code in browser.

Straight forward basic markup code

<p style="display:block;width:100%;min-width:300px;padding:0;margin:0 auto;text-align:center;">
<img src="image-url-header" style="display:block;width:100%;height:auto;margin:0 auto;"/>
<img src="image-url-about-me" style="display:block;width:100%;height:auto;margin:0 auto;"/>
<img src="image-url-whatever" style="display:block;width:100%;height:auto;margin:0 auto;"/>
<a href="#"><img src="image-url-some-banner" style="display:block;width:50%;height:auto;margin:0 auto;"/></a><a href="#"><img src="image-url-some-banner" style="display:block;width:50%;height:auto;margin:0 auto;"/></a>
<img src="image-url-whatever" style="display:block;width:100%;height:auto;margin:0 auto;"/>
</p>

Beware of empty spaces (white lines) between markup tags, CB will interpret them as paragraphs or brake line tags, result is a gap between elements
And will display a basic layout with
- 1 header image full width
- 2 sections full width (About Me and another section)
- 2 inline half size banners
- 1 custom section

Of course, additional css can be added to style-up the background image or color for the entire layout and the other sections.

 

[British_Rosie]

I can't recommend any service to host your images except your own domain and hosting, otherwise a lot of issues like bandwidth exceeded, image was deleted, adult policy issues or other similar problems. I recommend a cloud based environment for world wide distribution.



Clickable images aka banners. Yes, possible to have multiple images and some of them act like banners (clickable images)*
Top tippers. Chaturbate doesn't allow programming language like javascript in Bio so all editing is done manually by model or model's assistant.

* - focus your attention for a bit, I've already posted a basic image based design using clickable images Source Code on CodePen and the Learn2Code material is also providing demos and source codes here's a demo from 2019 and here's the source code
If you don't have an code editor installed on your device go to the "source code above" copy the markup code and paste the markup code inside the Markup Code Box and click the Show button to render the code in browser.

Straight forward basic markup code

<p style="display:block;width:100%;min-width:300px;padding:0;margin:0 auto;text-align:center;">
<img src="image-url-header" style="display:block;width:100%;height:auto;margin:0 auto;"/>
<img src="image-url-about-me" style="display:block;width:100%;height:auto;margin:0 auto;"/>
<img src="image-url-whatever" style="display:block;width:100%;height:auto;margin:0 auto;"/>
<a href="#"><img src="image-url-some-banner" style="display:block;width:50%;height:auto;margin:0 auto;"/></a><a href="#"><img src="image-url-some-banner" style="display:block;width:50%;height:auto;margin:0 auto;"/></a>
<img src="image-url-whatever" style="display:block;width:100%;height:auto;margin:0 auto;"/>
</p>

Beware of empty spaces (white lines) between markup tags, CB will interpret them as paragraphs or brake line tags, result is a gap between elements
And will display a basic layout with
- 1 header image full width
- 2 sections full width (About Me and another section)
- 2 inline half size banners
- 1 custom section

Of course, additional css can be added to style-up the background image or color for the entire layout and the other sections.

Thank you for this I have already started making the template and adding extra buttons etc Ill come back if I run into any problems. Hopefully it will go smoothly Thanks again.

 

[British_Rosie]

I can't recommend any service to host your images except your own domain and hosting, otherwise a lot of issues like bandwidth exceeded, image was deleted, adult policy issues or other similar problems. I recommend a cloud based environment for world wide distribution.



Clickable images aka banners. Yes, possible to have multiple images and some of them act like banners (clickable images)*
Top tippers. Chaturbate doesn't allow programming language like javascript in Bio so all editing is done manually by model or model's assistant.

* - focus your attention for a bit, I've already posted a basic image based design using clickable images Source Code on CodePen and the Learn2Code material is also providing demos and source codes here's a demo from 2019 and here's the source code
If you don't have an code editor installed on your device go to the "source code above" copy the markup code and paste the markup code inside the Markup Code Box and click the Show button to render the code in browser.

Straight forward basic markup code

<p style="display:block;width:100%;min-width:300px;padding:0;margin:0 auto;text-align:center;">
<img src="image-url-header" style="display:block;width:100%;height:auto;margin:0 auto;"/>
<img src="image-url-about-me" style="display:block;width:100%;height:auto;margin:0 auto;"/>
<img src="image-url-whatever" style="display:block;width:100%;height:auto;margin:0 auto;"/>
<a href="#"><img src="image-url-some-banner" style="display:block;width:50%;height:auto;margin:0 auto;"/></a><a href="#"><img src="image-url-some-banner" style="display:block;width:50%;height:auto;margin:0 auto;"/></a>
<img src="image-url-whatever" style="display:block;width:100%;height:auto;margin:0 auto;"/>
</p>

Beware of empty spaces (white lines) between markup tags, CB will interpret them as paragraphs or brake line tags, result is a gap between elements
And will display a basic layout with
- 1 header image full width
- 2 sections full width (About Me and another section)
- 2 inline half size banners
- 1 custom section

Of course, additional css can be added to style-up the background image or color for the entire layout and the other sections.

I have created the html in dreamweaver and all works fine locally on my pc but when i upload images to imgur or any other hosting site the image does not display even though I changed the image location to be the hosted image.
Is there something I am missing?

 

[Dan N]

I have created the html in dreamweaver and all works fine locally on my pc but when i upload images to imgur or any other hosting site the image does not display even though I changed the image location to be the hosted image.
Is there something I am missing?

Without inspecting the markup code it is difficult to debug anyway, one of the reason can be the image extension.
Usually the image url must end with image extension like .jpeg or .jpg or .gif or .png (most common ones)
Another problem might be the hosting service which doesn't allow some sites.
Again, just spinning ideas. Useful is inspecting the markup code.

 

[British_Rosie]

Without inspecting the markup code it is difficult to debug anyway, one of the reason can be the image extension.
Usually the image url must end with image extension like .jpeg or .jpg or .gif or .png (most common ones)
Another problem might be the hosting service which doesn't allow some sites.
Again, just spinning ideas. Useful is inspecting the markup code.

I have got it working now however when viewed on Mobile the buttons are bigger than the rest.
On the pc it looks for a first bio OK and now I have done one I can build on it. Just don't fully understand the difference between the PC and Mobile versions.
I would like to make hovering buttons and a background next but this can wait.

https://chaturbate.com/redliprose

Love Rose XXX

 

[Dan N]

I have got it working now however when viewed on Mobile the buttons are bigger than the rest.
On the pc it looks for a first bio OK and now I have done one I can build on it. Just don't fully understand the difference between the PC and Mobile versions.
I would like to make hovering buttons and a background next but this can wait.

https://chaturbate.com/redliprose

Love Rose XXX

First you need to understand the platform's shortcomings like not allowing full responsiveness via @media query (a css rule which looks like this :

@media only screen and (min-width: 220px) and (max-width: 550px){ mobile optimized css }

That's needed to make full responsive bio on Chaturbate platform but users are not allowed to use additional CSS.
Hover effects are also part of external styles and can not be added via inline css.
The generic approach for responsive images is setting a width value using percentage like width:100% for example.

width:100%;min-width:100px;height:auto;

will also work and defines that the image should be full width yet minimal width starts with 100px

Workaround for hover effects on different elements:
- for text based content, custom cursors can be used
- banners, micro banners and buttons can be animated (basically to attract attention) to that specific content

Full workaround for responsive:
- is having one single image as bio instead of multiple clickable images...
- multiple images but full width, one below the other

CB will never display full responsiveness of custom bios on mobile versions because it is not their concern. The main idea, main focus is for their live player to work and monetization/transaction system (tools to make money) the rest is secondary.
Maybe sounds rough or mean but it is not, that's the rule when having a business, making money is primary objective...