Chaturbate Profile Help!

[mfcgraphic]

Well it seems there is no thread that is all about Chaturbate so i make one now. You can post and reply here if you have advice, services or helpful HTML and css code.


Chaturbate top left image change.

code soon

Preview:

<img style="left: 0px; top: 0px; position: absolute;" src="https://drive.google.com/uc?export=view&id=0B8ThrQg8aYESMVd0dTRYVGlRMjA">
<img src="https://drive.google.com/uc?export=view&id=0B8ThrQg8aYESeHh0ejZxZUtEUkE" style="left: 0px; top: 0px; position: absolute; width: 200px; height: 88px;">
<img style="left: 0px; top: 0px; position: absolute;" src="https://drive.google.com/uc?export=view&id=0B8ThrQg8aYESdWF6Wk5Fb2VEWGc">

Just replace the linkin the code:

https://drive.google.com/uc?export=view&id=0B8ThrQg8aYESeHh0ejZxZUtEUkE

to Your image width 200px nad height 88px

Have fun )


__________________________________________________________________________________


Download chaturbate free raffle menu here: https://jsfiddle.net/9vptw2s1/

__________________________________________________________________________________


New chaturbate black style Now You can watch chaturbate at night no burning eyes again

To get it pm me. You need to have installed plugin for firefox or chrome "stylish"

__________________________________________________________________________________

Chaturbate christmas tips tree

https://jsfiddle.net/o42ntphs/#&togetherjs=F2w06d4grs

 

[DoD404]

yes, Chaturbate interprets (filter, translate adresses, and so on...) this html from bio before outputting to display

ie on the contrary, 2 consecutives Newlines would stop Html interpretation from CB.
so, if you need to keep it readable and have empty lines this works :
<br>
<br>
<br><.... and so on

 

[Dan N]

I didn't even know there was any cam services for bio etc ahahahha I'll have a look into that first thank you, if I'm not happy with it can u send you a pm?

I'll be off for a while... personal time and in the mountains I don't think there's a good wifi signal so no idea when I'll be able to assist.

@billiboy
Use the css attributes to position them. It depends on image size
Example

<a href="#" style="display:inline-block;"><img scr="image-url-path"/></a><a href="#" style="display:inline-block;"><img scr="image-url-path"/></a><a href="#" style="display:inline-block;"><img scr="image-url-path"/></a>

Codes that work on Chaturbate

Code Chaturbate Bios | Learn 2 Code

Learn to code your own Chaturbate MyFreeCams Camsoda Niteflirt bio

cgc-dan.github.io

Also you can test the markup in Source Editor tool
Example of two images side by side

<a href="#" style="display:inline-block;width:220px;height:auto;margin:3px auto 7px 1px;background-color:#f1f1f1;border:4px solid black;text-align:center;"><img src="https://cgc-dan.github.io/cgc-designers/img/cdcoffee.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a><a href="#" style="display:inline-block;width:220px;height:auto;margin:3px auto 7px 1px;background-color:#f1f1f1;border:4px solid black;text-align:center;"><img src="https://cgc-dan.github.io/cgc-designers/img/cdcoffee.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a>

copy the code above and add it in Markup Code box after that click the Show button

A HREF HTML TAG <a href=" | Learn 2 Code DIY

Learn to code your own Chaturbate bio

cgc-dan.github.io

 

[pazzorich]

I wanted to follow-up on some of my previous posts, to note that Chaturbate has made some changes recently in the way white space in profiles is interpreted. Now, the only way to ensure that your HTML will work as expected is to minimize it using a tool like this: http://minifycode.com/html-minifier/ . Happy coding to all, and stay well during this stressful time.

 

[Dan N]

I wanted to follow-up on some of my previous posts, to note that Chaturbate has made some changes recently in the way white space in profiles is interpreted. Now, the only way to ensure that your HTML will work as expected is to minimize it using a tool like this: http://minifycode.com/html-minifier/ . Happy coding to all, and stay well during this stressful time.

Emmm... quite old this news as ... from always Chaturbate is rendering white space as <br> tags but yes... its a good reminder for those who search how to remove white space between block or graphic elements

 

[pazzorich]

It is old news that space between elements was replaced by <br>. But around February 10 or so, they started replacing all newlines with <br>, even inside the quotes of a style attribute, which of course render an undesirable result. One example is this site, which previously looked nice: https://chaturbate.com/miranda_madison/ . I didn't design the page, but the person who did tried to make his inline style more readable (in the programming sense) by breaking it up into several lines. The moral of the story is to always minimize your code before uploading, because you don't know when or how Chaturbate will alter the white space.

 

[DoD404]

they started replacing all newlines with <br>, even inside the quotes of a style attribute, which of course render an undesirable result.

it's better than stopping to interpret html on the 2nd line break as they did before
but OK, that helps

 

[MissAllyRay]

This might help you

<b style="display:block;width:40px;height:auto;position:fixed;top:166px;left:0px;text-align:center;"><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #FFF;"><img src="https://editbio.files.wordpress.com/2016/09/2twt.png" style="width:35px;height:35px;background-color:#F39;"></a><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #FFF;"><img src="https://editbio.files.wordpress.com/2016/09/1ama.png" style="width:35px;height:35px;background-color:#F39"></a><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #FFF;"><img src="https://editbio.files.wordpress.com/2016/09/2insta.png" style="width:35px;height:35px;background-color:#F39"></a><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #FFF;"><img src="https://editbio.files.wordpress.com/2016/09/mv2.png" style="width:35px;height:35px;background-color:#F39"></a>
</b>

The above code has icons for Twitter, Amazon, Instagram and Manyvids
sticky/floating in the left side of the video stream, you can change the background color to match a certain design, currently the background is set as pink (#F39) . The icons are white with transparent background.

if you want other icons let me know... or you can use the Media Library -- there are over 80 icons to choose from
(you need to be registered to access Media Library section)

Still finding this to be a bit difficult, where in this code to I put my address for the link?

 

[melezouriou]

replace the hashtag # with your link

 

[calideebynyc]

Already posted but I will post again.
The basic code for full background image

<p style="display:block;width:100%;height:100%;position:fixed;top:0;left:0;background-image:url(your-image-here);background-repeat:no-repeat:background-size:cover;background-position:center;background-attachment:fixed;z-index;-500;"></p>

I wont explain again the attributes variables because it is a waste of time.

I dropped this in my bio and it locks me out of editing or anyting on the bio....how can I get this fixed?

 

[Dan N]

I dropped this in my bio and it locks me out of editing or anyting on the bio....how can I get this fixed?

https://chaturbate.com/accounts/editbio/ and add the px at the very end of z-index:-500px;

 

[Dan N]

I dropped this in my bio and it locks me out of editing or anyting on the bio....how can I get this fixed?

Sorry, my mistake, way to early and I run only with coffee.... z-index has no px value, there's a mistype there instead of ; there must be :

<p style="display:block;width:100%;height:100%;position:fixed;top:0;left:0;background-image:url(your-image-here);background-repeat:no-repeat:background-size:cover;background-position:center;background-attachment:fixed;z-index:-500;"></p>

and don't forget to add your full image url path (your-image-here)

 

[DoD404]

it locks me out of editing or anyting on the bio

I guess that your pic covers the 'Edit Your Bio' button... not good, but don't desperate

So, ofc you have first to recover an access to this edit button
Have you tried this way ? (under chrome, firefox or brave... I don't know for other browsers):
- Right click on the button (or on what is over the button)
- Choose in the context menu 'Inspect' => Your browser will show you the source of what is under the mouse.
And you can edit it.

You can delete it or modify it. It is safe :
that edits only what you are viewing at this moment, not the server's version.
So that you can retrieve this button and make it working (unless you delete the button itself... if this happens, just refresh and do it again).

Also if you success in it : using this way to edit, you'll see in real time the effect of different values for Pic's positions. When you have a good sets of value then you can validate them in bio.

 

[tifalock_]

Codes that work on Chaturbate

Code Chaturbate Bios | Learn 2 Code

Learn to code your own Chaturbate MyFreeCams Camsoda Niteflirt bio

cgc-dan.github.io

Also you can test the markup in Source Editor tool
Example of two images side by side

Wow... thanks, i try to learn and make my bio! Thanks

 

[Dan N]

Wow... thanks, i try to learn and make my bio! Thanks

No problem... it might look complex and way to geeky (sometimes even frustrating) but I can assure you it is pretty basic and simple, I've personally assisted a young lady and in 1 week (7 workdays) + available materials open source, she managed to "connect the dots" and made astonishing progress. I even think about hiring her in the near feature

 

[diasysmith101]

This thread was very helpful! Thank you so much for sharing!

 

[Intercooler]

Hello everyone,
I have a little issue with a bio which I made for my gf.
It is based on an example from Dan, but I do not figure out at the moment how to solve my problem...

I just want to adjust the section "Room Rules" centered below the other two topics above (About me and Tip-Menu).
There is on the left side the box for the picture - it's fine, but I have no chance to get the "Room-Rules" underneath
the other text with the same space to the left side.

Is there anyone who can help me out or lead me to the right code for that ?

Thanks in advance

<ul id="main" style="display:block;width:100%;height:auto;min-width:500px;font-weight:normal;list-style:none;box-sizing:border-box;padding:0;background-color:#066;background-image: url(https://i.ibb.co/c1P1y8P/fucsia-background.jpg);background-repeat:repeat;background-size:cover;-webkit-background-size:cover;background-position:top center;background-attachment: fixed;border:4px solid #fff;box-shadow:0 0 8px #999;-webkit-box-shadow:0 0 8px #999;margin:120px auto 50px 0px;">
    
<li style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:50px auto 40px auto;"><p style="display:block;width:90%;height:auto;margin:0 auto;text-align:center;font-size:5.333rem;color:#066;">Welcome to Helen's cam</p></li>

<li style="display:block;width:90%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:20px auto 30px auto;"><ul style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:0 auto;background-color:rgba(255,255,255,0.70);box-shadow:0 11px 11px -11px #000;-webkit-box-shadow:0 11px 11px -11px #000;border-radius:10px;-webkit-border-radius:10px;border:7px solid #fff;">

<li style="display:block;width:25%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:110px auto 70px 20px;float:left;text-align:center;background-color:rgba(255,255,255,0.50);border:8px double #f1f1f1;border-radius:100%;-webkit-border-radius:100%;overflow:hidden;box-shadow:0 11px 11px -11px #000;-webkit-box-shadow:0 11px 11px -11px #000;"><img src="https://i.ibb.co/kJwywkT/helen-bw.jpg>" style="display:block;width:100%;height:auto;margin:0 auto;border-radius:100%;-webkit-border-radius:100%;"/></li>

<li style="display:block;width:57%;height:auto;list-style:none;box-sizing:border-box;padding:20px 20px 20px;margin:60px auto 70px auto;float:left;text-align:center;font-size:20px;font-family:Century Gothic;color:#066;line-height:normal;">
<p style="display:block;width:90%;height:auto;padding:10px 8px;text-align:center;font-size:30px;color:#066;text-shadow:0 1px 1px #999;margin:10px auto 11px auto;"><strong>About Me</strong></p>
<p style="display:block;width:90%;height:auto;padding:10px 11px;text-align:center;font-size:24px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;"><strong>Yes, it's me - Helen !</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>

<li style="display:block;width:57%;height:auto;list-style:none;box-sizing:border-box;padding:20px 20px 20px;margin:0px auto 70px auto;float:left;text-align:center;font-size:20px;font-family:Century Gothic;color:#066;line-height:normal;">
<p style="display:block;width:90%;height:auto;padding:10px 8px;text-align:center;font-size:30px;color:#066;text-shadow:0 1px 1px #999;margin:10px auto 11px auto;"><strong>Tip - Menu</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:22px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">my prices as follows</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>10</strong> tok = <strong>pm</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>15</strong> tok = <strong>a kiss</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>20</strong> tok = <strong>flash nails</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>25</strong> tok = <strong>if you love me</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>35</strong> tok = <strong>stand up</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>60</strong> tok = <strong>flash boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">-<strong> 65</strong> tok = <strong>bounce boobs hard</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>70</strong> tok = <strong>lick nipples</strong><br>
</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>75</strong> tok = <strong>suck boobs</strong>&nbsp; &nbsp;&nbsp;</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>90</strong> tok = <strong>oil boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>95</strong> tok = <strong>your name on my boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>100</strong> tok = <strong>jump</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>110</strong> tok = <strong>suck dildo</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>120</strong> tok = <strong>flash pussy</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>130</strong> tok = <strong>smoke</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>175</strong> tok = <strong>spit on boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>190</strong> tok = <strong>finger pussy</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>200</strong> tok = <strong>dance naked&nbsp;</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>210</strong> tok = <strong>ride dildo</strong></p>
<p style="display:block;width:90%;height:auto;padding:10px 11px;text-align:center;font-size:22px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">If you want to know my price for something more, or a special question, write me in a tip-note or pay the price for a pm.</p>
</li>
    
<li style="display:block;width:57%;height:auto;list-style:none;box-sizing:border-box;padding:20px 20px 20px;margin:40px  auto 70px auto;float:left;text-align:center;font-size:20px;font-family:Century Gothic;color:#066;line-height:normal;">
<p style="display:block;width:90%;height:auto;padding:10px 8px;text-align:center;font-size:30px;color:#066;text-shadow:0 1px 1px #999;margin:10px auto 11px auto;"><strong>Room - Rules</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:19px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Add your custom text here</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:0 auto;float:none;clear:left;"></li>
</ul></li>
</ul>

 

[cbhours]

I am not great at this but you can easily match the first 2 parts by expanding the margin needed for that photo which is whats pushing the first 2 sections to the right.
Instead of:

<li style="display:block;width:25%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:110px auto 70px 20px;float:left;text-align:center;background-color:rgba(255,255,255,0.50);border:8px double #f1f1f1;border-radius:100%;-webkit-border-radius:100%;overflow:hidden;box-shadow:0 11px 11px -11px #000;-webkit-box-shadow:0 11px 11px -11px #000;"><img src="https://i.ibb.co/kJwywkT/helen-bw.jpg>" style="display:block;width:100%;height:auto;margin:0 auto;border-radius:100%;-webkit-border-radius:100%;"/></li>

Try:

<li style="display:block;width:25%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:110px auto 2000px 20px;float:left;text-align:center;background-color:rgba(255,255,255,0.50);border:8px double #f1f1f1;border-radius:100%;-webkit-border-radius:100%;overflow:hidden;box-shadow:0 11px 11px -11px #000;-webkit-box-shadow:0 11px 11px -11px #000;"><img src="https://i.ibb.co/kJwywkT/helen-bw.jpg>" style="display:block;width:100%;height:auto;margin:0 auto;border-radius:100%;-webkit-border-radius:100%;"/></li>

If the bio gets longer simply raise the number beyond 2000.

 

[Dan N]

Hello everyone,
I have a little issue with a bio which I made for my gf.
It is based on an example from Dan, but I do not figure out at the moment how to solve my problem...

I just want to adjust the section "Room Rules" centered below the other two topics above (About me and Tip-Menu).
There is on the left side the box for the picture - it's fine, but I have no chance to get the "Room-Rules" underneath
the other text with the same space to the left side.

Is there anyone who can help me out or lead me to the right code for that ?

Thanks in advance

<ul id="main" style="display:block;width:100%;height:auto;min-width:500px;font-weight:normal;list-style:none;box-sizing:border-box;padding:0;background-color:#066;background-image: url(https://i.ibb.co/c1P1y8P/fucsia-background.jpg);background-repeat:repeat;background-size:cover;-webkit-background-size:cover;background-position:top center;background-attachment: fixed;border:4px solid #fff;box-shadow:0 0 8px #999;-webkit-box-shadow:0 0 8px #999;margin:120px auto 50px 0px;">
 
<li style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:50px auto 40px auto;"><p style="display:block;width:90%;height:auto;margin:0 auto;text-align:center;font-size:5.333rem;color:#066;">Welcome to Helen's cam</p></li>

<li style="display:block;width:90%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:20px auto 30px auto;"><ul style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:0 auto;background-color:rgba(255,255,255,0.70);box-shadow:0 11px 11px -11px #000;-webkit-box-shadow:0 11px 11px -11px #000;border-radius:10px;-webkit-border-radius:10px;border:7px solid #fff;">

<li style="display:block;width:25%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:110px auto 70px 20px;float:left;text-align:center;background-color:rgba(255,255,255,0.50);border:8px double #f1f1f1;border-radius:100%;-webkit-border-radius:100%;overflow:hidden;box-shadow:0 11px 11px -11px #000;-webkit-box-shadow:0 11px 11px -11px #000;"><img src="https://i.ibb.co/kJwywkT/helen-bw.jpg>" style="display:block;width:100%;height:auto;margin:0 auto;border-radius:100%;-webkit-border-radius:100%;"/></li>

<li style="display:block;width:57%;height:auto;list-style:none;box-sizing:border-box;padding:20px 20px 20px;margin:60px auto 70px auto;float:left;text-align:center;font-size:20px;font-family:Century Gothic;color:#066;line-height:normal;">
<p style="display:block;width:90%;height:auto;padding:10px 8px;text-align:center;font-size:30px;color:#066;text-shadow:0 1px 1px #999;margin:10px auto 11px auto;"><strong>About Me</strong></p>
<p style="display:block;width:90%;height:auto;padding:10px 11px;text-align:center;font-size:24px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;"><strong>Yes, it's me - Helen !</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>

<li style="display:block;width:57%;height:auto;list-style:none;box-sizing:border-box;padding:20px 20px 20px;margin:0px auto 70px auto;float:left;text-align:center;font-size:20px;font-family:Century Gothic;color:#066;line-height:normal;">
<p style="display:block;width:90%;height:auto;padding:10px 8px;text-align:center;font-size:30px;color:#066;text-shadow:0 1px 1px #999;margin:10px auto 11px auto;"><strong>Tip - Menu</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:22px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">my prices as follows</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>10</strong> tok = <strong>pm</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>15</strong> tok = <strong>a kiss</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>20</strong> tok = <strong>flash nails</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>25</strong> tok = <strong>if you love me</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>35</strong> tok = <strong>stand up</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>60</strong> tok = <strong>flash boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">-<strong> 65</strong> tok = <strong>bounce boobs hard</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>70</strong> tok = <strong>lick nipples</strong><br>
</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>75</strong> tok = <strong>suck boobs</strong>&nbsp; &nbsp;&nbsp;</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>90</strong> tok = <strong>oil boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>95</strong> tok = <strong>your name on my boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>100</strong> tok = <strong>jump</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>110</strong> tok = <strong>suck dildo</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>120</strong> tok = <strong>flash pussy</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>130</strong> tok = <strong>smoke</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>175</strong> tok = <strong>spit on boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>190</strong> tok = <strong>finger pussy</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>200</strong> tok = <strong>dance naked&nbsp;</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>210</strong> tok = <strong>ride dildo</strong></p>
<p style="display:block;width:90%;height:auto;padding:10px 11px;text-align:center;font-size:22px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">If you want to know my price for something more, or a special question, write me in a tip-note or pay the price for a pm.</p>
</li>
 
<li style="display:block;width:57%;height:auto;list-style:none;box-sizing:border-box;padding:20px 20px 20px;margin:40px  auto 70px auto;float:left;text-align:center;font-size:20px;font-family:Century Gothic;color:#066;line-height:normal;">
<p style="display:block;width:90%;height:auto;padding:10px 8px;text-align:center;font-size:30px;color:#066;text-shadow:0 1px 1px #999;margin:10px auto 11px auto;"><strong>Room - Rules</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:19px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Add your custom text here</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:0 auto;float:none;clear:left;"></li>
</ul></li>
</ul>

Well, it's quite simple, change the float:left with float:none;clear:left and it keeps the width but centers the section... here's edited markup code (you can test it here)

<ul id="main" style="display:block;width:100%;height:auto;min-width:500px;font-weight:normal;list-style:none;box-sizing:border-box;padding:0;background-color:#066;background-image: url(https://i.ibb.co/c1P1y8P/fucsia-background.jpg);background-repeat:repeat;background-size:cover;-webkit-background-size:cover;background-position:top center;background-attachment: fixed;border:4px solid #fff;box-shadow:0 0 8px #999;-webkit-box-shadow:0 0 8px #999;margin:120px auto 50px 0px;">
  
<li style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:50px auto 40px auto;"><p style="display:block;width:90%;height:auto;margin:0 auto;text-align:center;font-size:5.333rem;color:#066;">Welcome to Helen's cam</p></li>

<li style="display:block;width:90%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:20px auto 30px auto;"><ul style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:0 auto;background-color:rgba(255,255,255,0.70);box-shadow:0 11px 11px -11px #000;-webkit-box-shadow:0 11px 11px -11px #000;border-radius:10px;-webkit-border-radius:10px;border:7px solid #fff;">

<li style="display:block;width:25%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:110px auto 70px 20px;float:left;text-align:center;background-color:rgba(255,255,255,0.50);border:8px double #f1f1f1;border-radius:100%;-webkit-border-radius:100%;overflow:hidden;box-shadow:0 11px 11px -11px #000;-webkit-box-shadow:0 11px 11px -11px #000;"><img src="https://i.ibb.co/kJwywkT/helen-bw.jpg>" style="display:block;width:100%;height:auto;margin:0 auto;border-radius:100%;-webkit-border-radius:100%;"/></li>

<li style="display:block;width:57%;height:auto;list-style:none;box-sizing:border-box;padding:20px 20px 20px;margin:60px auto 70px auto;float:left;text-align:center;font-size:20px;font-family:Century Gothic;color:#066;line-height:normal;">
<p style="display:block;width:90%;height:auto;padding:10px 8px;text-align:center;font-size:30px;color:#066;text-shadow:0 1px 1px #999;margin:10px auto 11px auto;"><strong>About Me</strong></p>
<p style="display:block;width:90%;height:auto;padding:10px 11px;text-align:center;font-size:24px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;"><strong>Yes, it's me - Helen !</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>

<li style="display:block;width:57%;height:auto;list-style:none;box-sizing:border-box;padding:20px 20px 20px;margin:0px auto 70px auto;float:left;text-align:center;font-size:20px;font-family:Century Gothic;color:#066;line-height:normal;">
<p style="display:block;width:90%;height:auto;padding:10px 8px;text-align:center;font-size:30px;color:#066;text-shadow:0 1px 1px #999;margin:10px auto 11px auto;"><strong>Tip - Menu</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:22px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">my prices as follows</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>10</strong> tok = <strong>pm</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>15</strong> tok = <strong>a kiss</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>20</strong> tok = <strong>flash nails</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>25</strong> tok = <strong>if you love me</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>35</strong> tok = <strong>stand up</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>60</strong> tok = <strong>flash boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">-<strong> 65</strong> tok = <strong>bounce boobs hard</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>70</strong> tok = <strong>lick nipples</strong><br>
</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>75</strong> tok = <strong>suck boobs</strong>&nbsp; &nbsp;&nbsp;</p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>90</strong> tok = <strong>oil boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>95</strong> tok = <strong>your name on my boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>100</strong> tok = <strong>jump</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>110</strong> tok = <strong>suck dildo</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>120</strong> tok = <strong>flash pussy</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>130</strong> tok = <strong>smoke</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>175</strong> tok = <strong>spit on boobs</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>190</strong> tok = <strong>finger pussy</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>200</strong> tok = <strong>dance naked&nbsp;</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:center;font-size:20px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">- <strong>210</strong> tok = <strong>ride dildo</strong></p>
<p style="display:block;width:90%;height:auto;padding:10px 11px;text-align:center;font-size:22px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">If you want to know my price for something more, or a special question, write me in a tip-note or pay the price for a pm.</p>
</li>
  
<li style="display:block;width:57%;height:auto;list-style:none;box-sizing:border-box;padding:20px 20px 20px;margin:40px  auto 70px auto;float:none;clear:left;text-align:center;font-size:20px;font-family:Century Gothic;color:#066;line-height:normal;">
<p style="display:block;width:90%;height:auto;padding:10px 8px;text-align:center;font-size:30px;color:#066;text-shadow:0 1px 1px #999;margin:10px auto 11px auto;"><strong>Room - Rules</strong></p>
<p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:19px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Add your custom text here</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p style="display:block;width:90%;height:auto;padding:5px 11px;text-align:left;font-size:17px;color:#066;text-shadow:0 1px 1px #999;margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:0 auto;float:none;clear:left;"></li>
</ul></li>
</ul>

And there are a few suggestions for you, change the background size from cover to auto, background position (like so background-repeat:repeat;background-size:auto;-webkit-background-size:auto;background-position:0 0 also make sure that there are no empty spaces between your HTML markup tags .... the font color can also be changed for the header text as it is a bit difficult to read right now. Font size... if you want to make the font-size responsive, use the formula for font instead of fixed value in pixels.

font-size: calc(19px + 6 * ((100vw - 320px) / 680));font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

For better positioning use margin:120px auto 50px -146px but i think you already know why!

 

[prettypixieslut]

Chaturbate won’t take my age verification...my drivers license is valid and my face and hair isn’t cut out of my picture either! What can I do? Would change in my hairstyle have any effect on it? Like if my hair is different from my license? I’m so ready to broadcast and can’t because of this...please help someone

 

[Dan N]

Chaturbate won’t take my age verification...my drivers license is valid and my face and hair isn’t cut out of my picture either! What can I do? Would change in my hairstyle have any effect on it? Like if my hair is different from my license? I’m so ready to broadcast and can’t because of this...please help someone

My humble suggestion is to try reaching out @punker barbie go to this topic and maybe things will sort out

https://www.ambercutie.com/forums/threads/please-help-me-to-help-you.31992/

 

[philbustier]

Hi everyone.

Maybe a bit off topic, but could anyone tell me how this CB bio was created ? I mean with which tool ( animated bio..) , I am not really inquiring about the code...

chaturbate.com/emiliajons/

Thanks, and also thanks to all the contributors here, i learned a lot of things..

Cheers, be well.

Phil

 

[Dan N]

Hi everyone.

Maybe a bit off topic, but could anyone tell me how this CB bio was created ? I mean with which tool ( animated bio..) , I am not really inquiring about the code...

chaturbate.com/emiliajons/

Thanks, and also thanks to all the contributors here, i learned a lot of things..

Cheers, be well.

Phil

Can be done using Photoshop, Photopea, or even Camtasia Studio and save as animated gif file, but of course its a matter of what software you are comfortable to work with, any decent program/service (online or app/web app) which supports animations and exports (saves as) gif will do the trick.

 

[philbustier]

Thanks Dan, I am a total ignorant, and I know none of these ( well, I have heard of Photoshop, but won't buy it or any other program, I stick to free stuff, cheap Charlie that I am....), the bios I have made are really basic, I can't code, and they are made of bits and pieces I have collected around. I mostly use Canva , do you think it could be used for animated bios such as the one I indicated ? ( I tried and did not find..)

I'll dig further in your blog and CB page. Take care.

Phil

 

[Jennaxoxo]

Can someone please help me. Im new to Chaturbate and see a lot of people have the clickable social media icons to the left of their camera that redirects people to things like their onlyfans/instagram/twitter. I know you have to use a code for that but I dont know what that code is. Anyone willing to help? I did find a tutorial on Youtube but it was in a different language and they didnt show the code =(

Thank you in advance! =)

 

[Dan N]

Can someone please help me. Im new to Chaturbate and see a lot of people have the clickable social media icons to the left of their camera that redirects people to things like their onlyfans/instagram/twitter. I know you have to use a code for that but I dont know what that code is. Anyone willing to help? I did find a tutorial on Youtube but it was in a different language and they didnt show the code =(

Thank you in advance! =)

This might help

https://dandesign.camgirl.cloud

And this

Code Chaturbate Bios | Learn 2 Code

Learn to code your own Chaturbate MyFreeCams Camsoda Niteflirt bio

cgc-dan.github.io

 

[Prvrtdhermit]

Hi ya, much like a few others here I'm new to broadcasting on CB and working on my profile atm.

Currently, I am having some issues with my profile and officially out of ideas on how to correct this.

I found this template and been working on it the best I can and now I'm stuck trying to add an image into one of the Black Transparent scroll boxes.

Whenever I test it in my editor it works great. But when I cut and paste into my profile the image it comes up with a broken image file.

If anyone would be interested in checking out my code and willing to offer any help I would greatly appreciate it.

<ul id="main" style="display:block;width:100%;min-width:300px;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;font-weight:normal;background-color:#000;background-image:url(https://i.imgur.com/AqVC9sa.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center;background-attachment:fixed;margin:120px auto 50px -14px;">

<a href="https://www.instagram.com/prvrtdhermit/" target="_blank"><img style="position:fixed;left:2px;bottom:465px; width:36px; height:36px;" src="https://i.imgur.com/fFTJF00.png"></a>

<a href="https://twitter.com/PrvrtdH" target="_blank"><img style="position:fixed;left:2px;bottom:420px; width:36px; height:36px;" src="https://i.imgur.com/ce706uc.png"></a>

<a href="https://prvrtdhermit.tumblr.com/" target="_blank"><img style="position:fixed;left:2px;bottom:375px; width:36px; height:36px;" src="https://i.imgur.com/QaeQEPJ.png"></a>

<a href="https://onlyfans.com/prvrtdhermit" target="_blank"><img style="position:fixed;left:2px;bottom:330px; width:36px; height:36px;" src="https://i.imgur.com/0YreewX.png"></a>

<a href="https://www.lovense.com/wish-list/a5sc" target="_blank"><img style="position:fixed;left:0px;bottom:280px; width:36px; height:36px;" src="https://i.imgur.com/ugWxfH7.png"></a>


<li style="display:block;width:100%;height:auto;padding:20px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;"></li>

<li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;font-family:sans-serif;"><ul style="display:block;width:80%;height:auto;padding:20px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;background-color:rgba(0,0,0,.70);-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;border:1px solid #333;">

<li style="display:block;width:90%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:12px auto 14px auto;text-align:center;">

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:center;line-height:normal;font-size:33px;color:#666;text-shadow:0 2px 5px #000;">About Me</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Greetings!</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">I am the Perverted Hermit and I will be your host during your stay here.</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">BIO</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">is</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Currently</p>


<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Under</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Construction</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;"></p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;"></p>


<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">~~~~~</p></li></ul></li>

<li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:20px auto 22px auto;text-align:center;font-family:sans-serif;color:#999;"><ul style="display:block;width:80%;height:auto;padding:20px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;background-color:rgba(0,0,0,.70);-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;border:1px solid #333;">

<li style="display:block;width:90%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:12px auto 14px auto;text-align:center;">

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:center;line-height:normal;font-size:33px;color:#666;text-shadow:0 2px 5px #000;">My Room Rules</p>

</li><li style="display:block;width:40%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:left;margin:0 auto;text-align:center;font-family:sans-serif;"><img src="https://i.imgur.com/evnrAGn.png" style="display:block;width:100%;height:auto;float:none;clear:left;"/></li>

<li style="display:block;width:60%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:left;margin:0 auto;text-align:center;font-family:sans-serif;">

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Add your custom Room Rules text here / one per line will look good</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Add your custom Room Rules text here / one per line will look good</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Add your custom Room Rules text here / one per line will look good</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Add your custom Room Rules text here / one per line will look good</p>

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Add your custom Room Rules text here / one per line will look good</p></li>

<li style="display:block;width:100%;height:0px;float:none;clear:left;box-sizing:border-box;list-style:none;margin:0 auto;opacity:0;overflow:hidden;">Black Transparent Scroll Box</li></ul></li>


<li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:20px auto 22px auto;text-align:center;font-family:sans-serif;color:#999;"><ul style="display:block;width:80%;height:auto;padding:20px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;background-color:rgba(0,0,0,.70);-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;border:1px solid #333;">

<li style="display:block;width:90%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:12px auto 14px auto;text-align:center;">

<p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:center;line-height:normal;font-size:33px;color:#666;text-shadow:0 2px 5px #000;">My Tip Menu</p></li>

<li style="display:block;width:97%;height:auto;padding:10px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;font-family:sans-serif;">

<p style="display:block;width:90%;height:35px;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;border-bottom:1px solid #222;"><i style="display:block;width:65%;height:auto;float:left;margin:0 auto;padding:5px 6px;line-height:normal;font-style:normal;">Single Card</i><i style="display:block;width:25%;height:auto;float:left;margin:0 auto;padding:5px 6px;line-height:normal;font-style:normal;background-color:#222;color:#f1f1f1;text-align:center;">50 tokens</i></p>

<p style="display:block;width:90%;height:35px;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;border-bottom:1px solid #222;"><i style="display:block;width:65%;height:auto;float:left;margin:0 auto;padding:5px 6px;line-height:normal;font-style:normal;">Three Card</i><i style="display:block;width:25%;height:auto;float:left;margin:0 auto;padding:5px 6px;line-height:normal;font-style:normal;background-color:#222;color:#f1f1f1;text-align:center;">100 tokens</i></p>

<p style="display:block;width:90%;height:35px;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;border-bottom:1px solid #222;"><i style="display:block;width:65%;height:auto;float:left;margin:0 auto;padding:5px 6px;line-height:normal;font-style:normal;">Celtic Cross (10cards)</i><i style="display:block;width:25%;height:auto;float:left;margin:0 auto;padding:5px 6px;line-height:normal;font-style:normal;background-color:#222;color:#f1f1f1;text-align:center;">250 tokens</i></p>

</li><li style="display:block;width:100%;height:0px;float:none;clear:left;box-sizing:border-box;list-style:none;margin:0 auto;opacity:0;overflow:hidden;">Black Transparent Scroll Box</li></ul></li>

<li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:20px auto 22px auto;text-align:center;font-family:sans-serif;color:#999;">

<ul style="display:block;width:80%;height:auto;padding:20px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;background-color:rgba(0,0,0,.70);-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;border:1px solid #333;">


<li style="display:block;width:90%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:12px auto 14px auto;text-align:center;">

<li style="display:block;width:100%;height:0px;float:none;clear:left;box-sizing:border-box;list-style:none;margin:0 auto;opacity:0;overflow:hidden;">Black Transparent Scroll Box</li></ul></li>

<li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:20px auto 22px auto;text-align:center;font-family:sans-serif;color:#999;">

<ul style="display:block;width:80%;height:auto;padding:20px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;background-color:rgba(0,0,0,.70);-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;border:1px solid #333;">

<li style="display:block;width:90%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:12px auto 14px auto;text-align:center;">

<li style="display:block;width:100%;height:0px;float:none;clear:left;box-sizing:border-box;list-style:none;margin:0 auto;opacity:0;overflow:hidden;">Black Transparent Scroll Box</li></ul></li>


<ul style="display:block;width:80%;height:auto;padding:15px;line-height:normal;float:none;clear:left;box-sizing:border-box;list-style:none;margin:20px auto 0px auto;">

<li style="display:block;width:44px;height:auto;position:fixed;top:166px;left:0;padding:3px 0 5px;box-sizing:border-box;list-style:none;text-align:center;"><a href="#"></a></li>
<li style="display:block;width:100%;height:auto;padding:10px 0 0;line-height:normal;float:none;clear:left;box-sizing:border-box;list-style:none;margin:20px auto 0px auto;background-color:rgba(0,0,0,0.70);">

<p style="display:block;width:90%;height:auto;margin:3px auto 5px auto;text-align:center;font-size:13px;padding:4px 6px;color:#999;">All rights reserved 2020 (c) PrvrtdHermit / Hermits_Lounge. Any Unauthorized use of my profile, video, pictures or media content, in any form, now or in the future is NOT Permissible, without expressed written consent. Any act to promote or gain profit in any manner (e.g. either monetarily or socially) from the use of my profile, video, pictures or media content in any form from my profile is a violation of my privacy and subject to legal action. By Reading This - You acknowledge and agree that you shall not post, upload, publish, transmit or make available content of this page including images and recording stream from my online activity and make available for download. This is intended as, and presented as a one time, one view presentation Only. You are Not Allowed to record my cam, or take snapshots of my cam. Penalties of Copyright Infringement. By reproducing, republishing or redistributing the work of a Copyright Holder without permission, You may be violating website's Terms and Conditions</p>

</ul>

 

[philbustier]

Hi all

I have another question..

I am a mod on CB and an amator bio maker, as said earlier, I cannot code, so my bios are made of odd bits and pieces I have gathered around, and I have been helped by other mods or bio makers..

I mainly use Chrome. I have recently changed my hosting site ( not sure I can mention them here...), and when I check some rooms in which I have made bios, some of the slides do not show, replaced by a little "vignette" where the slide should be..I have this problem on Chrome only... But all works well on Firefox.

Any clue ? I have tried to search on internet, but to no avail ..

Thanks and cheers

Phil

 

[NotYou]

@Prvrtdhermit which image (which section) exactly is the image broken?
For me, I see the 5 social media icons on the left. I see a "background" image in the content area (not behind the entire profile), and then in the second section, I see a wizard image. I see no other image anywhere?
Can you be more specific?
One thing I would suggest in the top part of your code, change the "left" margin to be -150px instead of -14px (it's at the very end of the first line)

background-attachment:fixed;margin:120px auto 50px -14px;">

BECOMES THIS

background-attachment:fixed;margin:120px auto 50px -150px;">

---------------

@philbustier any way you can show a screenshot or code for us to see? Have you tried using a different image or uploading that specific image again? Just to test. Of course, try hard refreshing ctrl+f5 on chrome, on the profile page with the code, see if that reloads it. It could just be broken link on CB side because they change your URLs to their own.


https://codepen.io/pen/
Really great site (and free) and it will show you errors, formatting to make the code much tidier, etc.

 

[Prvrtdhermit]

@Prvrtdhermit
which image (which section) exactly is the image broken?
For me, I see the 5 social media icons on the left. I see a "background" image in the content area (not behind the entire profile), and then in the second section, I see a wizard image. I see no other image anywhere?
Can you be more specific?
One thing I would suggest in the top part of your code, change the "left" margin to be -150px instead of -14px (it's at the very end of the first line)

background-attachment:fixed;margin:120px auto 50px -14px;">

BECOMES THIS

background-attachment:fixed;margin:120px auto 50px -150px;">

There was another image that was placed in one of the boxes JUST under the tip options to give a little more info. All-day yesterday it showed up as a broken image. After seeing your questions I went to load my profile today and see its working perfectly fine. >.<

Also just corrected the -14 to -150. Thank you again!

P.s. You all are awesome. Been following this thread prior to joining and it has helped out a lot.

 

[NotYou]

Damn, I tried editing but i was just out of time, I wanted to just give this little trick for you (i will copy-paste what I have on my clipboard what I wrote in the edit field but it won't let me post)


(A little tip or trick for you to remember how to place the coding for the Top Left, Top Right, Bottom Left, Bottom Right - or Top, Right, Bottom, and Left...
Think of the Word "Trouble" but minus the continents so it becomes TRBL - this can then help you always remember what order the numbers for the coding goes in, such as rounded borders, and everything else.)