Hide Header in Chaturbate Bio (Model's Bio and Free Webcam)

[SIREN]

Just sharing a tip for models and custom bio creators.
The header in the top-left corner of a Chaturbate bio isn’t very useful since the model’s name is already visible in plenty of other places.
Plus, it takes up valuable space that could be better used for things like social media or content site icons.

I’ve seen many people try to hide this header using different tricks. One of the best approaches right now is probably using backdrop-filter: blur(999px).
This method avoids light and dark mode issues, where a coloured rectangle never works in one of them.

Even with this solution, the rectangle can stand out, especially in dark mode or with a long username.
Here’s a tweak to make it less noticeable (almost invisible but though not perfect). Hope it helps!

<!-- BIO HEADER REMOVER BEGIN --><b style="
    width: 500px;
    height: 62px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    backdrop-filter: blur(230px);
    -webkit-backdrop-filter: blur(230px);
    mask:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 18px,
            rgba(0, 0, 0, 1) calc(100% - 50px),
            rgba(0, 0, 0, 0) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 20px,
            rgba(0, 0, 0, 1) calc(100% - 25px),
            rgba(0, 0, 0, 0) 100%
        );
    mask-composite: intersect;
"></b><!-- BIO HEADER REMOVER END -->

For example, compare backdrop-filter: blur(999px):


And the code above:


It’s still noticeable on a good screen but feels much more visually appealing.
So far, I haven’t run into any issues with this approach, aside from the slightly larger code size.
I’ve already implemented it in our https://siren.chat/chic service.

If there’s interest, I can publish it — maybe as a gist — to provide an up-to-date link and make updates if better ideas come along. Let me know if that would be helpful!

 

[cbhours]

Nice find!

 

[droopla]

all " position: fixed;" (and "var") are replace by CB with "absolute".
Fixed will place it on top of your screen (and CB don't want that).
And you also want it absolute , you want it on top of your bio.
So for good coding , make position: absolute; .

 

[SIREN]

all " position: fixed;" (and "var") are replace by CB with "absolute".
Fixed will place it on top of your screen (and CB don't want that).
And you also want it absolute , you want it on top of your bio.
So for good coding , make position: absolute; .

Good point, thanks! I’ve fixed fixed to the absolutely correct absolute.
Also, width: 500px; was causing a scrollbar in mobile mode, so I updated it to width: 100%; max-width: 500px;.

Since I can’t edit my initial post, I’ve created a gist, which I’ll update if anyone finds a better solution:

 

[Sequential]

I was looking through the CB broadcaster BIO page code hoping to find a VAR that is used to set both the Normal and Dark BIO background color modes, but no luck there as JS is the method for switching modes.
If we had access to a VAR we could make a thin rectangle with the current BIO background color to hide the text.

What if instead of hiding the text we just paint over it with some background image, then put the icons on top of that. This would work in either Light or Dark modes.

The banner is crude, but you can see the idea in the image below:




Seq.

 

[SIREN]

I was looking through the CB broadcaster BIO page code hoping to find a VAR that is used to set both the Normal and Dark BIO background color modes, but no luck there as JS is the method for switching modes.
If we had access to a VAR we could make a thin rectangle with the current BIO background color to hide the text.

What if instead of hiding the text we just paint over it with some background image, then put the icons on top of that. This would work in either Light or Dark modes.

The banner is crude, but you can see the idea in the image below:
View attachment 101875



Seq.

It could definitely work for some people, but for me, it felt like there just wasn't enough space to fit both a rectangle and icons. I've experimented with coloured backgrounds before, and in my experience, the icons either look too large within the rectangle, aren't clearly readable, or the rectangle itself becomes too big, almost touching "Real Name". If you can find a clean approach that works with different icons available, please share it.

On the other hand, after completely removing the background, it's possible to use a much more subtle, semi-transparent coloured background without clear edges. Such an approach could work nicely.