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

 

[NotYou]

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.

It sounds like maybe it was just a cache issue.
In future just try ctrl+f5 in Chrome and it should do a hard refresh, I think all other browsers default refresh do that by default.

 

[philbustier]

@Brett M Thank you for taking the time to answer me

This morning , all is back to normal..I realized that it was not only in rooms in which I did the bios, but in other rooms as well, so i guess there might be something "hidden" in my Chrome settings. If the problem reoccurs, I will indeed make screen captures and be back here )

Thanks again, good day all..

Phil

 

[Ravenwhispers]

Hello and thank you I am trying to figure out how to send someone the link for my chat room

 

[NotYou]

Hello and thank you I am trying to figure out how to send someone the link for my chat room

If you mean to ask a model to view it, they can click your name, and then click it again.
Or they can simply use: http://chaturbate.com/YOUR_USERNAME
Of course, replace "YOUR_USERNAME" with your CB name.

Or if you mean to add a link to the profile "About Me" just use:

<a href="http://chaturbate.com/YOUR_USERNAME">Click Here to View My Room</a>

 

[unstopproo]

How to change this in other color , I do select tool to inspect element, but I want for permanently

 

[Vanessa98xx]

Hi, Im new here and trying to learn how to edit my Chaturbate page to make it look professional, still a long way to go but its improving all the time at least. I was hoping someone could help me understand how I edit the very top part of the profile, just like this girl here has done: https://chaturbate.com/vanillina/

It looks so good, its like it is a pink/red overlay that covers the logo and menu? I would be so happy if I could use something like that on my page

 

[aurorahazexxx]

Thanks for this thread! I just redesigned my chaturbate profile, it's halloween themed! Before it was just lines of text and wasn't appealing at all. My best tip is to use a graphic design app, I use canva, to make your graphics and then upload them to an image hosting site, I use imgbb and it's free. You can then copy and paste the embed code to your profile, and voila! you now have a more visually appealing profile. I also recommend embedding a DMCA badge to your profile to secure your content. You can get one for free on the DMCA website. I'd love to get opinions on my new profile look! My chaturbate username is on my AmberCutie profile.

 

[jackbauer696969]

Hi I am designing a chaturbate bio and I would like to get a full screen background image that is fixed (I post this in the wish list section) and then on top of that have the bio in the about me section that is transparent so that as you scroll down it reveals more of the background image behind the content. I have seen many bios like this so I know it can be done

I have made transparent .png file with the content and uploaded to an image server and using this script

<ul id="main" style="display:block;width:100%;min-width:300px;padding:0;height:auto;box-sizing:border-box;list-style:none;line-height:normal;margin:120px auto 50px -14px;"><li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;"><ul style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;background-color:rgba(100, 100, 100, 0.0);list-style:none;line-height:normal;margin:0 auto;text-align:center;"><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:40px;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:none;clear:left;opacity:100;overflow:hidden;"></li></ul></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding-top:15;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding-top:15;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;margin:0 auto;box-sizing:border-box;list-style:none;padding:0;line-height:normal;float:none;clear:left;"><p style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;font-weight:normal;text-align:center; color:#FFFFFF;font-family:Verdana, Geneva, sans-serif;font-size:14px">All rights reserved 2020 (c) <b id="modelname" style="text-decoration:none;color:#ffffff;">name here</b>.</p><br/><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;font-weight:normal;color:#FFFFFF;font-family:Verdana, Geneva, sans-serif;font-size:12px">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<br/><br/></p></li></ul>

However I cannot get the about me section to go transparent so that you can see the background image behind it. It remains white and obscures the background image.

Any help would be appreciated

Thanks JB

 

[Dan N]

Hi I am designing a chaturbate bio and I would like to get a full screen background image that is fixed (I post this in the wish list section) and then on top of that have the bio in the about me section that is transparent so that as you scroll down it reveals more of the background image behind the content. I have seen many bios like this so I know it can be done

I have made transparent .png file with the content and uploaded to an image server and using this script

<ul id="main" style="display:block;width:100%;min-width:300px;padding:0;height:auto;box-sizing:border-box;list-style:none;line-height:normal;margin:120px auto 50px -14px;"><li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;"><ul style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;background-color:rgba(100, 100, 100, 0.0);list-style:none;line-height:normal;margin:0 auto;text-align:center;"><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:40px;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:none;clear:left;opacity:100;overflow:hidden;"></li></ul></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding-top:15;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding-top:15;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;margin:0 auto;box-sizing:border-box;list-style:none;padding:0;line-height:normal;float:none;clear:left;"><p style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;font-weight:normal;text-align:center; color:#FFFFFF;font-family:Verdana, Geneva, sans-serif;font-size:14px">All rights reserved 2020 (c) <b id="modelname" style="text-decoration:none;color:#ffffff;">name here</b>.</p><br/><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;font-weight:normal;color:#FFFFFF;font-family:Verdana, Geneva, sans-serif;font-size:12px">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<br/><br/></p></li></ul>

However I cannot get the about me section to go transparent so that you can see the background image behind it. It remains white and obscures the background image.

Any help would be appreciated

Thanks JB

<ul id="main" style="display:block;width:100%;min-width:300px;padding:3em 0em 0em;height:auto;box-sizing:border-box;list-style:none;line-height:normal;background-image:url(https://images.unsplash.com/photo-1609994665089-acac1fd94d19?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1900&q=80);background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;margin:120px auto 50px -14px;"><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding-top:15;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding-top:15;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;margin:0 auto;box-sizing:border-box;list-style:none;padding:0;line-height:normal;float:none;clear:left;"><p style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;font-weight:normal;text-align:center; color:#FFFFFF;font-family:Verdana, Geneva, sans-serif;font-size:14px">All rights reserved 2021 (c) <b id="modelname" style="text-decoration:none;color:#ffffff;">name here</b>.</p><br/><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;font-weight:normal;color:#FFFFFF;font-family:Verdana, Geneva, sans-serif;font-size:12px">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<br/><br/></p></li></ul>

This is the basic markup

background-image:url(https://images.unsplash.com/photo-1609994665089-acac1fd94d19?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1900&q=80);background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;

- replace the URL of the image
- review the other attributes assigned to the background because it depends how your images will render, how big it is, if your background will repeat or not...
the background-attachment:fixed; - makes the image stay still while you scroll down the page.

PS: i've seen a few empty blocks. i've removed them as there were no content.. if you want to add a space between top margin of the design and next content inside ... I've just used padding: 3em 0 0 for main ul
Emmm, you might want to wrap your section into a semi-transparent wrapper (or not) its up to you

 

[jackbauer696969]

<ul id="main" style="display:block;width:100%;min-width:300px;padding:3em 0em 0em;height:auto;box-sizing:border-box;list-style:none;line-height:normal;background-image:url(https://images.unsplash.com/photo-1609994665089-acac1fd94d19?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1900&q=80);background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;margin:120px auto 50px -14px;"><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding-top:15;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;padding-top:15;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;text-align:center;float:left;"><img src="https://i.ibb.co/gR49XBG/Untitled-design-2.png" border="0"/></li><li style="display:block;width:100%;background-color:rgba(100, 100, 100, 0.0);height:auto;margin:0 auto;box-sizing:border-box;list-style:none;padding:0;line-height:normal;float:none;clear:left;"><p style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;font-weight:normal;text-align:center; color:#FFFFFF;font-family:Verdana, Geneva, sans-serif;font-size:14px">All rights reserved 2021 (c) <b id="modelname" style="text-decoration:none;color:#ffffff;">name here</b>.</p><br/><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;font-weight:normal;color:#FFFFFF;font-family:Verdana, Geneva, sans-serif;font-size:12px">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<br/><br/></p></li></ul>

This is the basic markup

background-image:url(https://images.unsplash.com/photo-1609994665089-acac1fd94d19?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1900&q=80);background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;

- replace the URL of the image
- review the other attributes assigned to the background because it depends how your images will render, how big it is, if your background will repeat or not...
the background-attachment:fixed; - makes the image stay still while you scroll down the page.

PS: i've seen a few empty blocks. i've removed them as there were no content.. if you want to add a space between top margin of the design and next content inside ... I've just used padding: 3em 0 0 for main ul
Emmm, you might want to wrap your section into a semi-transparent wrapper (or not) its up to you

Hi Dan

Thanks for that that will do except the effect I was after was where it became the whole background like this https://chaturbate.com/miss___diamond/ but this will do.

Thanks for your quick response .

JB

 

[Dan N]

@jackbauer696969 the same visual effect I use it on my test Chaturbate page redglove and its basically the same background image used in bio design and as full page background
here's the markup code for full page background ... Both images must be the same

 

[jackbauer696969]

@jackbauer696969 the same visual effect I use it on my test Chaturbate page redglove and its basically the same background image used in bio design and as full page background
here's the markup code for full page background ... Both images must be the same

Thanks Dan that works great, one more thing if you don't mind me asking is the a way to reduce the white margin to the left of the about me section so that the content covers more of the page?

 

[Dan N]

Thanks Dan that works great, one more thing if you don't mind me asking is the a way to reduce the white margin to the left of the about me section so that the content covers more of the page?

Unfortunately no, it's a core platform element and the designated id/class can't be changed/nor allowed to change.
For info purpose: to tweak such editing you'll need additional css to target core element tag and by now I believe you already know that css markup is not allowed in the form of stylesheet (only inline-css works)
Only this far it can go:

<span class="block" style="display:none;"></span>

class .block being the thin border around the entire Bio section

But again, I don't suggest this type of editing because it targets the core elements and Chaturbate account can get flagged/restricted access or even ban.

 

[violentlycurly]

Hey there, I'm Curly and I'm try to pretty up my Chaturbate bio, but I'm in a pickle. I custom made a graphic for my bio, but no matter what I change the size to, it always appears tiny on my page, even when I double in size and resolution. I'm trying to get more tech savvy to make the streaming process less stressful, but I am confounded. Help please?

Here's the html code for the image I uploaded ... <a href="https://ibb.co/T15xRLX"><img src="https://i.ibb.co/C6F3v2d/Chaturbate-Introduction-Long.png" alt="Chaturbate-Introduction-Long" border="0"></a>
Here's the viewer link... https://ibb.co/T15xRLX

Here's my Chaturbate page if you want to see my problem :r

violentlycurly

 

[Dan N]

Hey there, I'm Curly and I'm try to pretty up my Chaturbate bio, but I'm in a pickle. I custom made a graphic for my bio, but no matter what I change the size to, it always appears tiny on my page, even when I double in size and resolution. I'm trying to get more tech savvy to make the streaming process less stressful, but I am confounded. Help please?

Here's the html code for the image I uploaded ... <a href="https://ibb.co/T15xRLX"><img src="https://i.ibb.co/C6F3v2d/Chaturbate-Introduction-Long.png" alt="Chaturbate-Introduction-Long" border="0"></a>
Here's the viewer link... https://ibb.co/T15xRLX

Here's my Chaturbate page if you want to see my problem :r

violentlycurly

Try this:

<img src="https://i.ibb.co/Vx8cDmy/Chaturbate-Introduction-Long.png" style="display:block;width:100%;height:auto;margin:130px auto 50px -146px:"/>

You can remove the margin attribute and css values but if you decide to use it as it is it will reposition the image a bit

 

[Starrfire]

I wanna do the transparent code toooooo I've been UP

 

[qxz7]

IDK if this is right place. New. Any idea how to change my profile pic for broadcasting in Chattercams? I looked through all the Help. Couldn't figure it out.

 

[NotYou]

IDK if this is right place. New. Any idea how to change my profile pic for broadcasting in Chattercams? I looked through all the Help. Couldn't figure it out.

Chattercams looks like it is just Chaturbate, so i assume things would be the exact same.
Use HTMl and CSS to do it. Make sure your account is verified in order to edit the profile with HTML

 

[Tia_Raine]

Greetings!
I really need some help here.
I've looked everywhere, but still I can't find anywhere a clear answer on how to customize the nav bar of Chaturbate. I've seen plenty models have such customized elements on their profiles, but I'm not sure how to approach it.

Here are some random examples: https://chaturbate.com/sweetnameless/
https://chaturbate.com/moonless_/
Is it just an extra html-css layer formed as a menu bar according to the CB's nav bar, or do they somehow modify the original html class and repost it? At the moment, I just use a screenshot of a colored nav bar covered with transparent images (and href) where the links are (they are now colored dark so you can see them).

But obviously I have a huge issue while zooming in-out. They stop fitting properly. Not to mention the mobile compatibility.

There is an extra difficulty by not being allowed to use map/area attributes.
What is the smartest way to achieve the result above? I look forward to finish doing this stuff so I can start broadcasting
Your help would be so appreciated.

 

[bbbbadddd]

Is it just an extra html-css layer formed as a menu bar according to the CB's nav bar, or do they somehow modify the original html class and repost it?

No, you can't modify the Cb menu as far as I know other than to overlay it. Not really as a "menu bar" but, yes, just position whatever individual elements as required so they're formatted/sized the same and align with the rest to look like additional menu items.

I'd have to dig out exactly how I did a few for some who wanted that. You can make it work pretty well for say 80% of normal cases. It will never be completely foolproof. Really best to avoid it if you can I think. I started out trying to make the pages look as seamless and "stock" as possible. Ended up thinking that it's probably better to make things that you add stand out better in other ways.

But obviously I have a huge issue while zooming in-out. They stop fitting properly. Not to mention the mobile compatibility.

Yes, you will. You can index it to either side but still will have issues depending on exactly how the window is sized. Top to bottom you can get near perfect. Side-to-side is harder. Something will end up looking jumbled.

Also note that now and then Cb will change things and/or add elements and things can look a little different depending on whether logged in or not, screen resolution, etc.

 

[Billyboy]

Have a look at this thread

https://www.ambercutie.com/forums/threads/looking-for-html-professional.39212/

Using Dan's code above for the "make chaturbate pink", this is for the top only, you need to increase the HEIGHT to about 170px (right now it's 130px) and then set the z-index: 2 to z-index: 100.
Changing the HEIGHT to 170 will cover the tabs in pink, and then changing the z-index will change the userbox in the top right.. so like this:

<span style="position:absolute; top:0; left: 0; width:100%; height:170px; background-color:pink; z-index:100; mix-blend-mode:hue; pointer-events:none; display:block;"></span>

If I understood what you are after.

 

[Tia_Raine]

No, you can't modify the Cb menu as far as I know other than to overlay it. Not really as a "menu bar" but, yes, just position whatever individual elements as required so they're formatted/sized the same and align with the rest to look like additional menu items.

Yes, I used Dan's code and everything seems to align perfectly!

 

[Tia_Raine]

Have a look at this thread

https://www.ambercutie.com/forums/threads/looking-for-html-professional.39212/


If I understood what you are after.

That's exactly what I needed, thank you so much! I don't know how this thread escaped my attention, but I'm grateful you post it here. A big thank you to @Dan N too.

Now there's another issue. It's not a major one, so I don't really mind not getting an answer. It seems like CB(?) probably sets limitation on the color range that you can use. For example, every time I write "background-color: #730034" it automatically get displayed as "#aa2360". It's like it modifies saturation(-) and brightness(+) (observed while using hsl instead of rgb) and makes the selected color more pastel. Again, it's not a functional issue, everything works great, just a preferred aesthetic touch

 

[Billyboy]

That's exactly what I needed, thank you so much! I don't know how this thread escaped my attention, but I'm grateful you post it here. A big thank you to @Dan N too.

Now there's another issue. It's not a major one, so I don't really mind not getting an answer. It seems like CB(?) probably sets limitation on the color range that you can use. For example, every time I write "background-color: #730034" it automatically get displayed as "#aa2360". It's like it modifies saturation(-) and brightness(+) (observed while using hsl instead of rgb) and makes the selected color more pastel. Again, it's not a functional issue, everything works great, just a preferred aesthetic touch

Maybe have a look at Dan's site, specifically this page. Credit to @Dan N

 

[Dan N]

That's exactly what I needed, thank you so much! I don't know how this thread escaped my attention, but I'm grateful you post it here. A big thank you to @Dan N too.

Now there's another issue. It's not a major one, so I don't really mind not getting an answer. It seems like CB(?) probably sets limitation on the color range that you can use. For example, every time I write "background-color: #730034" it automatically get displayed as "#aa2360". It's like it modifies saturation(-) and brightness(+) (observed while using hsl instead of rgb) and makes the selected color more pastel. Again, it's not a functional issue, everything works great, just a preferred aesthetic touch

If you're using #730034 in combination with mix-blend-mode then yes the browser will read the #730034 but to this hex value the blend mode is added and result will no longer be rendered as #730034 but something else.
You can try a darker #730034 color like #45001f for example and hopefully the output will be closer to #730034.
Anyway, never tested but makes sense to darken the main color to achieve a non "pastelled" one - Best of luck

 

[Tia_Raine]

You can try a darker #730034 color like #45001f for example and hopefully the output will be closer to #730034.

Hello Dan,
I tried plenty (darker) shades and none of them can change this pale pink mix-blend enforces. It's like mix-blend holds a threshold of saturation & brightness for certain color codes that you can't simple slide over.

If you're using #730034 in combination with mix-blend-mode then yes the browser will read the #730034 but to this hex value the blend mode is added and result will no longer be rendered as #730034 but something else.

Is there any alternative to mix-blend that can be used to display the right shade? The ones I tried erased of course the menu options text and filled the bar with solid #730034.

 

[Tia_Raine]

Never mind, I used a really nice gradient() and it made it so much cooler.

Is there any alternative to mix-blend that can be used to display the right shade?

You may answer it though for other people with the same issue.
Thank you again, you made my days so much easier.

 

[Dan N]

Hello Dan,
I tried plenty (darker) shades and none of them can change this pale pink mix-blend enforces. It's like mix-blend holds a threshold of saturation & brightness for certain color codes that you can't simple slide over.



Is there any alternative to mix-blend that can be used to display the right shade? The ones I tried erased of course the menu options text and filled the bar with solid #730034.

Well... I will do

<span style="position:absolute; top:0; left: 0; width:100%; height:130px;background-color:#730034; z-index:2; mix-blend-mode:hue; filter:contrast(110%) brightness(70%) ;pointer-events:none; display:block;"></span>

hue is the value we want to use and from filter property we can decrees color intensity (changes the color because contrast is in combination with hue, so if contrast is set to 300% for example it will not show a rotten-cherry-like color but more of a brown-brick color... if set brightness to 10% for example it will result in a pink-ish nuance... stuff like that is tricky to handle ... literally thousands of variations and i'm not so good at math