• ** WARNING - ACF CONTAINS ADULT CONTENT **
    Only persons aged 18 or over may read or post to the forums, without regard to whether an adult actually owns the registration or parental/guardian permission. AmberCutie's Forum (ACF) is for use by adults only and contains adult content. By continuing to use this site you are confirming that you are at least 18 years of age.
Jun 27, 2019
4
3
0
Italy
I recently made a CB profile for a friend in Colombia. She asked me to (1) make the page look good on mobile devices, and (2) improve SEO by using real text, and not text in pictures. Most of the methods suggested here do the latter, but it is pretty easy to have responsive CB pages that include text as text, and to make the text as scalable as the images, while maintaining the relative layout positions of both. Here is my friend's page: https://chaturbate.com/alejadollts/

You'll note the page is about as responsive as you can get for the html embedded in the CB platform; narrow your browser window as thin as it goes, and the page continues to look good. View it on an old low-resolution android phone and it looks fine too.

You can download the source to see how this was done. But if anyone wants to have responsive pages, let me give some guiding principles.

  • Never use absolute measures like points, cm, and so on. And do not uses px either; since the advent of retina displays, pixels have lost their relevance as a measure of distance. Rather, use measure like vw and vh (and if necessary, em). A width of 90vw is 90% of the viewport width, and it refers to the width of the browser window rather than some div container inside (same for height/vh, though you will use this rarely). It is way preferable to use viewport measures rather than percentages, because no matter what chaturbate does with the container for your bio, you can be more certain that the text and images will be visible and proportionate w.r.t each other.
  • In addition to relative measures like vw, you should always specify a minimum width in absolute terms, below which the object cannot be squished. Otherwise, especially on the iPhone, your content will be reduced to oblivion.
  • For images, always specify both the width and the height explicity, because many phones are terrible at scaling images automatically while retaining aspect ration.
Here is an example of some of these techniques, which is not contained in her current profile, but was previously.

HTML:
<ul style="display:block;
       list-style-type:none;
       position:relative;
       margin-left:auto;
       margin-right:auto;
       align:center;
       width:60vw;
       min-width:155pt;
       height:calc(60vw*(520/629));
       min-height:calc(155pt*(520/629));
       padding-top:0;
       background-repeat:no-repeat;
       z-index:1;
       background-image:url(https://i.imgur.com/y7VSkNp.png);
       background-size:60vw calc(60vw*(520/629));>"
This is a block-level container with an image, inside of which we put some text. Most of the attributes are straightforward, but I'll point out a few. For example, the width, min-width, height and min-height. Note that the width is specified in a relative measure, whereas the minimum width is absolute. As noted above, the height and min-height properties should be explicitly added in terms of the image's proportions. This image is 629 x 520, so the height is always scaled by the ratio of the two.

While all this may seem like a pain, you can actually use this code above as a template for most situations like this, where you want to overlay text on an image. Here is a corresponding <li> element that goes along with the <ul>.

HTML:
      <li style="z-index:3;      <!-- must be greater background img  for bio -->
         position:absolute;      <!-- absolute w.r.t. background            -->
         top:20%;                    <!-- will require experimentation - y-axis pos      -->
         right:2vw;                  <!-- likewise - x-axis pos          -->
         display:inline-block;  <! -- important, <ul> substitutes the <div>, with the exact same results ->
         font-family:Brush Script MT;  <!-- Nice browser font for cursive style  -->
         font-size: 2.2vw;
         font-style:normal;
         color: white;
         line-height: 2.3vw;
         text-align:left;">My text here
                                   More text</li>
In inline contexts (and almost everywhere else), chaturbate converts linefeeds to <br> elements. It is a pain, but it is what it is.

I provided the info above since it may be useful to others in designing responsive pages with text. Plug the above into a sample HTML document, and then substitute the content with your own image and your own text. You will get the hang of it. The most you will have to do is to change the proportion and height to width, and to adjust the x an y-axes of your text. Good luck!

-- Rich
 
  • Like
Reactions: NaomiNyx
Jun 27, 2019
4
3
0
Italy
I forgot about scaling fonts. Here is an example:

Code:
<p  style="display:block;margin-left:auto;margin-right:auto;width:60vw;
       min-width:100pt;height:auto;font-family: Arial, Helvetica, sans-serif; 
       font-size: calc(2.3vw + 4pt); font-style:normal; text-align:center;  color: #ffffff; 
       line-height: calc(2.7vw + 5pt);">I want to introduce myself a bit.  I'm a Latina.....</p>
Again, you'll note that the font size and line-height are combinations of relative and absolute measure. This is to prevent the text from getting unreadable on small displays. Hence the text will scale more slowly w.r.t. the containing image, which is exactly what you want in responsive design.

Also, the formula of 2.3vw + 4pt, while a bit arbitrary, means the relative width will dominate the minimum of 4pt, untill it doesn't. This actually a nice style for text in a CB profile, so you may want to use it or something like it.

-- Rich
 
  • Like
Reactions: NaomiNyx
Jun 27, 2019
4
3
0
Italy
Good web design practice includes putting an alt attribute along with the image. However in the case of Chaturbate, good intentions are often negated by their content restrictions. Simply put, they will strip out all of your alt tags, as they do with many other elements, not even including the tags that they forbid, like <div>. In the case of the div, we can use <ul> instead, which is identical to div if styled correctly (see my post on pg 12 of this thread). But there is no substitute for alt, which sucks for people who cannot see well (but can hear adult content perfectly well), an it also screws with your SEO, if you were counting on the alt attributes to help. They also filter out the "title" and "label" elements, so there is no hope in giving alternative text for your images.

People should really <ctrl>-u to see the source code, after CB filters your nice bio. Such as transforming linfeeds into <br> tags. It took me quite a while to understand why my text was breaking in odd places, but I knew after looking at the source. You must look at the source of your live CB page to see what you can and cannot do.

-- Rich
 
Last edited:
  • Like
Reactions: NaomiNyx
Nov 12, 2017
992
870
63
UK
Twitter Username
@modelbios
Chaturbate Username
mrbeefy87
how to change the mouse cursor in a biography on chaturbat?
Here is a nice list of some for you:

CB doesn't allow you to assign class names and the likes, so on the above link you will just need to take the bit between { and } and add it to your style, for example, take the very first one in the list:

.alias {cursor: alias;}

Would become:

cursor: alias;

So in your coding it would be like this:

<p style="margin: 0; cursor: alias;">Blah blah text</p>
 
Sep 30, 2013
525
240
173
38
Bucharest
dan.camgirl.cloud
Twitter Username
@CSSMFC
Chaturbate Username
redglove
how to change the mouse cursor in a biography on chaturbat?
No need fo class. Simply add the cursor's inline css to any element you want, when your mouse is hovering that particular element the cursor will show the image you've set up, no matter if the element is a link or a paragraph or an image. Use with moderation.
HTML:
<p style="cursor:url('https://d31rb55u3y3kjs.cloudfront.net/c/u/520476279851687b6dabcc7189410390/2019/08/05055143/17f73985d5510d3c1ff3458bc26b835f.png'), auto; ">This is a demo test on how to use custom cursor image </p>
- Online Demo (on jsfiddle)
Make sure your images are not too big, if they are, the custom cursor will not be visible.
some pngs for cursors
 
Last edited:
Aug 25, 2019
1
0
0
@HiddenBadass Ignore those links I gave before, CB changed some stuff since, so they no longer allow the filter part for the gradient.
Instead, try these

Code:
<!-- SOCIAL MEDIA ICONS [SMALL]-->
<!-- TWITTER -->
<a href="http://twitter.com/modelbios" style="position: fixed; top: 270px; left: 1px; width: 29px; height: 29px; background: #2cafe3; background: -moz-linear-gradient(-45deg, #2cafe3 0%, #49c0f0 100%); background: -webkit-linear-gradient(-45deg, #2cafe3 0%,#49c0f0 100%); background: linear-gradient(135deg, #2cafe3 0%,#49c0f0 100%); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 99;"></a>
<a href="http://twitter.com/modelbios" style="position: fixed; top: 271px; left: 2px; width: 27px; height: 27px; background: transparent url('http://i.imgur.com/opAxml0.png'); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 100;"></a>
<a href="http://twitter.com/modelbios" style="position: fixed; top: 272px; left: 3px; width: 21px; height: 21px;  border: 2px solid rgba(255,255,255, 0.5);  -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 101;"></a>

<!-- AMAZON -->
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 300px; left: 1px; width: 29px; height: 29px; background: #000000; background: -moz-linear-gradient(-45deg, #000000 0%, #45484d 100%); background: -webkit-linear-gradient(-45deg, #000000 0%,#45484d 100%); background: linear-gradient(135deg, #000000 0%,#45484d 100%); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 99;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 301px; left: 2px; width: 27px; height: 23px; background: transparent url('http://i.imgur.com/Z7f8Abh.png'); background-size: 14px 11px; background-position: center; background-repeat: no-repeat; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 100;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 302px; left: 3px; width: 21px; height: 21px;  border: 2px solid rgba(255,255,255, 0.5);  -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 101;"></a>

<!-- SIGN UP -->
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 330px; left: 1px; width: 29px; height: 29px; background: #000000; background: background: #ed9017; background: background: #ed9017; background: -moz-linear-gradient(-45deg, #ed9017 0%, #f6e6b4 100%); background: background: #c79810; background: -moz-linear-gradient(-45deg, #c79810 0%, #eab92d 100%); background: -webkit-linear-gradient(-45deg, #c79810 0%,#eab92d 100%); background: linear-gradient(135deg, #c79810 0%,#eab92d 100%); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 99;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 331px; left: 2px; width: 27px; height: 27px; background: transparent url('http://i.imgur.com/U0R7WIU.png'); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 100;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 332px; left: 3px; width: 21px; height: 21px; border: 2px solid rgba(255,255,255, 0.5);  -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 101;"></a>

<!-- FACEBOOK -->
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 360px; left: 1px; width: 29px; height: 29px; background: #3b5998; background: -moz-linear-gradient(top, #3b5998 0%, #2f4c87 99%); background: -webkit-linear-gradient(top, #3b5998 0%,#2f4c87 99%); background: linear-gradient(to bottom, #3b5998 0%,#2f4c87 99%); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 99;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 361px; left: 2px; width: 27px; height: 27px; background: transparent url('http://i.imgur.com/K4jZa84.png'); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 100;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 362px; left: 3px; width: 21px; height: 21px; border: 2px solid rgba(255,255,255, 0.5);  -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 101;"></a>

<!-- INSTAGRAM -->
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 390px; left: 1px; width: 29px; height: 29px; background: #8134af; background: -moz-linear-gradient(top, #8134af 0%, #dd2a7b 55%, #f58529 99%); background: -webkit-linear-gradient(top, #8134af 0%,#dd2a7b 55%,#f58529 99%); background: linear-gradient(to bottom, #8134af 0%,#dd2a7b 55%,#f58529 99%); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 99;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 391px; left: 2px; width: 27px; height: 27px; background: transparent url('http://i.imgur.com/4j8Y4de.png'); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 100;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 392px; left: 3px; width: 21px; height: 21px; border: 2px solid rgba(255,255,255, 0.5);  -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 101;"></a>

<!-- SNAPCHAT -->
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 420px; left: 1px; width: 29px; height: 29px; background: #fffa00; background: -moz-linear-gradient(top, #fffa00 0%, #e7e72a 99%); background: -webkit-linear-gradient(top, #fffa00 0%,#e7e72a 99%); background: linear-gradient(to bottom, #fffa00 0%,#e7e72a 99%); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 99;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 421px; left: 2px; width: 27px; height: 27px; background: transparent url('http://i.imgur.com/EQvcSEi.png'); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 100;"></a>
<a href="https://chaturbate.com/affiliates/in/?track=default&tour=dT8X&campaign=t4JZp&room=mrbeefy87" style="position: fixed; top: 422px; left: 3px; width: 21px; height: 21px; border: 2px solid rgba(255,255,255, 0.5);  -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; z-index: 101;"></a>


Where do I insert my snap code into this coding?
 
Nov 12, 2017
992
870
63
UK
Twitter Username
@modelbios
Chaturbate Username
mrbeefy87
You would need to link to a gallery photo set on your page or something, so the user can click it, be directed to it, then it would show the details for them to buy.

Where do I insert my snap code into this coding?
At the start of each line where it says <a href="
the URL inside that, replace.



Replace those so they link to your "photo gallery" the specific one for SnapChat.

So it'd look something like this
Untitled.png
 
Sep 4, 2019
2
0
0
Hello guys,
How could help me with the codes for the secondary backround on cb profile? As you see in printscreen the box with bio is still generical white. When i use backround codes poste on about me it only displays it as picture above the ones i put as my tips menu. Can you please assist?
 

Attachments

Sep 30, 2013
525
240
173
38
Bucharest
dan.camgirl.cloud
Twitter Username
@CSSMFC
Chaturbate Username
redglove
Hello guys,
How could help me with the codes for the secondary backround on cb profile? As you see in printscreen the box with bio is still generical white. When i use backround codes poste on about me it only displays it as picture above the ones i put as my tips menu. Can you please assist?
I do not recommend such editing because not all your viewers use such big / wide screens
but it is possible using position:absolute;

Code:
<p style="display:block;width:50%;height:70px;top:370px;right:100px;background-color:#f1f1f1;position:absolute;padding:40px;z-index:2;">some text here</p>
please note that the above markup is creating a box with a text inside and might look different on other devices. Use on your own risk. Hopefully it will not interfere with your chat box when you go live on CB
Same backbone code can be used to add a background instead of a box with text, you'll need to tweak the z-index value.
Again, from my point of view, such editing is not recommended.
 
Sep 4, 2019
2
0
0
I do not recommend such editing because not all your viewers use such big / wide screens
but it is possible using position:absolute;

Code:
<p style="display:block;width:50%;height:70px;top:370px;right:100px;background-color:#f1f1f1;position:absolute;padding:40px;z-index:2;">some text here</p>
please note that the above markup is creating a box with a text inside and might look different on other devices. Use on your own risk. Hopefully it will not interfere with your chat box when you go live on CB
Same backbone code can be used to add a background instead of a box with text, you'll need to tweak the z-index value.
Again, from my point of view, such editing is not recommended.
Thank you lots!