Change the main chaturbate outline colors

[PandoraUnchained]

I've noticed that some models manage to change the color of the main chaturbate logo and outline, on the upper side of the page. However I have no idea how to do this - do they use a semi transparent layer that covers that part of the page or just cover it with an identical image? Never saw any prebuild solution that offer that. I would really like to change it because that yellow/blue color is...urg...

 

[dickwow99]

can you mention the bio of the model so I can take a look at exactly how this can be done.

 

[chopper_daddy]

That’s done using the mix-blend-mode css property. Here’s a link to MDN’s example — https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

It’s not easy to get the right effect, but if you inspect other models pages using developer tools, you’ll be able to see the code they’ve written to make it work. DM me if you need help.

Edit: If you’re just talking about the logo, it can be overlayed with a new image the same way you would add any bio image. Placement is important & make sure you add a pointer-events: none; to the css of the image. That way you’re not blocking people from clicking on the underlying logo & breaking CB’s T&C’s.

 

[PandoraUnchained]

Thanks for the answer, html isn't my forte^^..

can you mention the bio of the model so I can take a look at exactly how this can be done.

I saw several of them - her for example

Watch Gennyrock live on Chaturbate!

Paypig use the Roll the Dice!!! #french #mistress #findom #femdom #smoke #joi #cei #cbt #feet #armpit

chaturbate.com

That’s done using the mix-blend-mode css property. Here’s a link to MDN’s example — https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

It’s not easy to get the right effect, but if you inspect other models pages using developer tools, you’ll be able to see the code they’ve written to make it work. DM me if you need help.

Edit: If you’re just talking about the logo, it can be overlayed with a new image the same way you would add any bio image. Placement is important & make sure you add a pointer-events: none; to the css of the image. That way you’re not blocking people from clicking on the underlying logo & breaking CB’s T&C’s.

I think it's the overall colors of chaturbate. Gonna try as you said when I'll have time.

 

[chopper_daddy]

The one I did is here --> https://chaturbate.com/roxxxieriot

I believe it is exactly what you're referring to.

Keep in mind that these show as pure black on Safari

 

[MismatchedCouple]

The one I did is here --> https://chaturbate.com/roxxxieriot

I believe it is exactly what you're referring to.

Keep in mind that these show as pure black on Safari

If I may ask... How did you do that? I am not understanding the link in your earlier reply on how to make the color change on the nav bar.

 

[NotYou]

If I may ask... How did you do that? I am not understanding the link in your earlier reply on how to make the color change on the nav bar.

Good evening/afternoon.
So, I tried looking for a generator for you and everyone to make this easier, and I have found one.

Go here: https://www.cssfiltergenerator.com/
Now see where it says "Change Image" on the left of the image? Click that and input this following URL which is a screenshot I cropped for the CB Top Nav

https://i.imgur.com/22gxdSO.png


Now, IGNORE the MAIN things on the left side, and scroll down to the BOTTOM of the page.
Here you will see "Overlay". By default, it's set to "None". Change it to "Solid" so it will use a SOLID colour only - get used to this before messing with the gradient option, I would say.


Now to the right of this, it should show a box for you to select a colour, at first just pick a random colour, then to the side of that, it will show a dropdown box that gives you different blend modes, which is what you want to achieve here. For the sake of things, just choose a red and set it to the very first option which is "Multiply". If you now scroll up to the image, you will see the Image I provided you with has a red overlay, correct?

Once you mess with the solid colour and the blend options, you can also adjust other settings that I originally told you to ignore, the ones to the left such as Brightness, Contrast, Saturation, etc to achieve your goal/effect.

Once you have it how you would like, at the top of the image on the right side click "Show CSS". This will show the css you need to use on your profile.
You ONLY need to select this part:

https://i.imgur.com/kYV54In.png


Now add it into your style tags, here is an easy example that is just for this sake:

<p style="position: absolute; content: ''; display: block; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(to left,rgba(255, 255, 255, 0.4) 0%, rgba(255, 0, 62, 0.9) 100%); mix-blend-mode: lighten;"></p>


IMPORTANT: from that code you MUST edit the HEIGHT from 100% to a fixed pixel, such as 178px, so the above becomes this:

<p style="position: absolute; content: ''; display: block; top: 0; left: 0; height: 178px; width: 100%; background: linear-gradient(to left,rgba(255, 255, 255, 0.4) 0%, rgba(255, 0, 62, 0.9) 100%); mix-blend-mode: lighten;"></p>

 

[MismatchedCouple]

Good evening/afternoon.
So, I tried looking for a generator for you and everyone to make this easier, and I have found one.

Go here: https://www.cssfiltergenerator.com/
Now see where it says "Change Image" on the left of the image? Click that and input this following URL which is a screenshot I cropped for the CB Top Nav




Now, IGNORE the MAIN things on the left side, and scroll down to the BOTTOM of the page.
Here you will see "Overlay". By default, it's set to "None". Change it to "Solid" so it will use a SOLID colour only - get used to this before messing with the gradient option, I would say.


Now to the right of this, it should show a box for you to select a colour, at first just pick a random colour, then to the side of that, it will show a dropdown box that gives you different blend modes, which is what you want to achieve here. For the sake of things, just choose a red and set it to the very first option which is "Multiply". If you now scroll up to the image, you will see the Image I provided you with has a red overlay, correct?

Once you mess with the solid colour and the blend options, you can also adjust other settings that I originally told you to ignore, the ones to the left such as Brightness, Contrast, Saturation, etc to achieve your goal/effect.

Once you have it how you would like, at the top of the image on the right side click "Show CSS". This will show the css you need to use on your profile.
You ONLY need to select this part:




Now add it into your style tags, here is an easy example that is just for this sake:

<p style="position: absolute; content: ''; display: block; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(to left,rgba(255, 255, 255, 0.4) 0%, rgba(255, 0, 62, 0.9) 100%); mix-blend-mode: lighten;"></p>


IMPORTANT: from that code you MUST edit the HEIGHT from 100% to a fixed pixel, such as 178px, so the above becomes this:

<p style="position: absolute; content: ''; display: block; top: 0; left: 0; height: 178px; width: 100%; background: linear-gradient(to left,rgba(255, 255, 255, 0.4) 0%, rgba(255, 0, 62, 0.9) 100%); mix-blend-mode: lighten;"></p>

I will give this a shot, thanks for the reply!

 

[MismatchedCouple]

Good evening/afternoon.
So, I tried looking for a generator for you and everyone to make this easier, and I have found one.

Go here: https://www.cssfiltergenerator.com/

<p style="position: absolute; content: ''; display: block; top: 0; left: 0; height: 178px; width: 100%; background: linear-gradient(to left,rgba(255, 255, 255, 0.4) 0%, rgba(255, 0, 62, 0.9) 100%); mix-blend-mode: lighten;"></p>

IT WORKED! Thank you!