Welcome Forums Templates categories Chaturbate Chaturbate Bio Editing HTML and inline CSS used on Chaturbate

This topic contains 11 replies, has 4 voices, and was last updated by  Pazzorich 4 weeks, 1 day ago.

  • Author
    Posts
  • #57629
     CGC

    If you are familiar with CB/CG platforms you already know the HTML tags accepted.

    It is true, the platforms are not so flexible but with experience and practice, any registered member can edit and create amazing Bio designs for themselves of for their friends.

    HTML tags accepted by CB/CG

    You may use some HTML tags (a p i strong b u ul ol li h1 h2 h3 img font br). Do not block the site navigation or display IP statistics of visitors.

    We strongly suggest to remember the last one. Do not block the site navigation or display IP statistics of visitors.

    As you can see, NONE of our templates brake the rules.

    a – html tag used to define a link

    <a href="
    p – html paragraph tag

    <p>
    i – html tag used to render the text italic

    <i>
    strong – html tag used to render the text in bold style — similar to b html tag

    <strong>
    u – html tag is used to underline a defined text element

    <u>
    ul, ol, li – html tags used to render list styles and list types

    
    <ul>
    <li>some text or link here</li>
    </ul>
    

    h1, h2, h3 – html tags which defines heading text elements

    <h1>Template Live Editor</h1>
    img – html tag used to define and render image element

    <img src="
    font – html tag used to define and render style for text elements

    <font ....
    br – html element for brake – basically it starts a new line braking a paragraph, a text element or can add a space between other elements like graphics (images)

    <br/>
    This are the basic HTML tags supported and accepted by CB and CG platforms

    To each of the elements CSS inline style can be applied.

    Example:

    <p style="display:block;width:90%;height:auto;padding:20px 20px;background-color:#f1f1f1;border:2px solid #cccccc;margin:10px auto 20px 10px;">some content</p>
    The above markup is using a paragraph HTML tag with inline CSS defined by style="..."

    The element is defined by its style attributes and will be rendered like an individual element wrapping content.

    By default p tags are block elements (display:block) I’ve added as a fix for the platform.

    Width of the element is 90% and not a fixed value (700px or 870px)

    Height auto. The p element which holds additional content will have the relative height based on the content inside. If I have only one image with 300px height, the paragraph will have a total height of 340px (padding values added to the height of the image)

    Background color. When coding the markup for a template it is good use the background attributes as it should. Above example is using background-color with HEX color value.

    background-color: #f1f1f1– suggested

    background-image: url(image-path)– suggested

    background:#f1f1f1 – not

    background: url(image-path) – not

    Optional other style attributes and values can be used/added to visually enhance the element or its content.

    border, font-size, color, font-variant, text-shadow, border-radius, box-shadow, background-image

  • #195529

    I made something for my profile on CB and I for the life of me cannot figure out how to make it work!
    It’s a png and I’ve used like 6 different websites to convert it into html but idk what to do now….

    Please help…

    Ashfulravens@gmail.com

    • #195563
       CGC

      Basic image-based bio.
      It means you need to add your image on Chaturbate
      First you’ll need to upload your image online (host it) and with help of HTML markup add your image to Bio page.
      Your code should look like this
      <img src="YOUR-HOSTED-IMAGE-HERE" />

      A bit more complex markup :
      <img src="YOUR-HOSTED-IMAGE-HERE" style="display:block;width:100%;height:auto;margin:0 auto;"/>

      If your edited Bio is made from more than a single image, the HTML markup gets more complex.

      It’s not possible convert an image to HTML because it means that your image must be sliced into different smaller images like image-map and rendered as a compiled markup snippet.
      Due to Chaturbate HTML restrictions it’s not possible using table elements but there are work-around solutions.
      For example, if you are familiar with Photoshop, create your Bio design in Photoshop, use the Slice tool to slice sections of your image, Save as HTML web page output, open the source of the generated markup in your favorite markup editor and adapt/format the code to be accepted by Chaturbate. A lot of work and skills but the output can be astonishing.

  • #462998

    It is absolutely horrible to try to work with the extremely limited HTML and CSS on CB, not to mention the lack of using Javascript in a normal way. It is like an alternate reality or time machine to 20 years ago. I understand why so many profiles are basically just an image loaded from an external site. This is the worst and most challenging piece of crap web dev I have ever experienced. Nothing is natural or normal. What idiot developed this piece of crap?

    • #463081
       CGC

      Thank you for your input.
      It’s true that CB platform offers very limited approved markup and limited html tags, yet it’s a powerful platform and very popular too.
      To make you think for a bit… javascript is a programming language and experienced programmers can be tempted to interfere with website’s functionality in a malicious way… reason for which a smart individual can understand why so many restrictions on this particular segment.
      Thumbs-up for those developers/web designers and graphic creators which with so little can achieve so much.
      We’ve noticed so many super-awesome bio designs used by some webcam performers and not from our service so yes, thumbs up… it’s a challenge…

    • #466749

      I think context is important. When I am giving my opinion I am speaking strictly from a web dev and programming perspective. I do not know of a more powerful platform out there in this industry. I will not disagree with you there.

      And I totally agree with you about the javascript aspect. Definitely, it is risky for them to run it in a normal way. I guess if their documentation was up to par then I would have very little to complain about in this respect.

      However, I, as a programmer and web dev, need to express that it in this regard is extremely limited and very weak. If there was another platform available with better documentation I would be very ready to move on for this reason alone.

      As I am knew to this API could you provide any resources or articles for me to get a better understanding of any aspects of programming and web dev from a programmers perspective? I would greatly appreciate any advice or guidance on this so that I can stop spinning my wheels and going in circles.

      A little background on me…
      Self-taught programmer since 2017 but have known HTML and CSS since 2001. I focused mainly on C#, Python, C, C++ and a few others and have only recently been learning Javascript while learning on React.js. I have also enjoyed working on my Raspberry Pi, Arduino and my 3D printer. I guess I love to create and learn. I would love to start blogging about this experience to help others with developing on some of these platforms to ease the learning curve for them which has felt steep because it has been me solely doing this with no help except from the internet. Anyways, if you can shoot me back anything, even a small crumb I will devour it. Thanks!

    • #466773

      I wanted to make another small comment. I do agree that many have been able to put together some things that work but the another thing that I have noticed is the lack of responsive design in the profile/about sections. It bothers me and am in the process of trying to create some templates to create a better UX/UI for the someone that I care about deeply. I think this is a needed topic to address.

      I have other ideas to bring fundamental upgrades to the platform on just the HTML/CSS part alone but I will keep them private for now. Hahaha

    • #467782

      Actually, the more that I work on this the worse that I think he CB platform is. Sure it functions but it is a serious mess when it comes to programming. It is pretty close to a dumpster fire. I am considering ditching this whole project. To anyone else out there considering programming or webdeving on the CB platform I would think it through first.

  • #488462

    Does anyone have tips on how to make CB bios more responsive, i.e., for mobile devices. In-line CSS doesn’t work so well, but that’s all we have. I can’t seem to scale all content dynamically, and relative scaling (% width) doesn’t seem to work for images. At least they could provide us with some simple global classes like this:

    
    <style> 
    .responsive1 {max-width: 100%; height: auto;}
    .responsive2 {max-width: auto; height: 95%;} 
    </style>
    

    but I asked and no, they won’t. Any ideas? Almost all CB profiles look like shit on mobile devices.

    Also, anyone notice when using the testbed on a phone, we get redirected to m.chaturbate.com? It seems they are stuck in the 1990s in terms of tech.

    I’d love to read some tips for working around the platform limitations for mobile.

    BTW, I can understand why they don’t allow javascript in the bios (though it would be relatively simple to limit the scope of the jscript to the current DOM. But have no idea why they don’t permit <style> tags. It would be simple to have the parser weed out classes which were defined elsewhere.

  • #489726

    Scratch the last post. Found a solution with vw’s . I suggest to everyone to use them for objects and images, because we all want content to scale for phones:

    <img align=center src="https://i.imgur.com/uHb0lSt.png?2" style="width:52vw;height:auto; object-fit:cover" border="0">

    This a sufficient way to do what I needed, if not ideal. Would be better to have real style defs and classes, but this will do.

    • #534624
       CGC

      Viewport width (vw) and Viewport height (vh) are CSS measurements units for scaling or (downscale) based on viewer browser size but most common or popular type of units used in CSS are % (percent values) due to the fact that it does not require both width and height attributes to be added rendering the image element based on original image size and ratio.

      The vw (view-width) and vh (view-height) units are relational to the viewport size, where 100vw or vh is 100% of the viewport’s width/height.
      For example, if a viewport is 1600px wide, and you specify something as being 2vw, that will be the equivalent of 2% of the viewport width, or 32px.

      A small suggestion on your markup above add the align=center inside style attributes rather than using old HTML version; same for border attribute.

      <img align=center src="https://i.imgur.com/uHb0lSt.png?2" style="width:52vw;height:auto; object-fit:cover" border="0">

      More practical and all CSS attributes inside proper style tag
      <img src="https://i.imgur.com/uHb0lSt.png?2" style="width:52vw;height:auto; object-fit:cover;text-align:center;border:0;">

  • #786187

    Mobile Site Design for Chaturbate: Two months ago I finished my responsive design project for Chaturbate, and I wanted to share some info that I learned. I posted this on another forum – https://www.ambercutie.com/forums/threads/chaturbate-profile-help.23825/page-12, but I though I would repost here. I really sweated this project, so I hope others can profit from my efforts.

    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.

    
    <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
    element.

    
          <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>1
    

    In inline contexts (and almost everywhere else), chaturbate converts linefeeds to <br> elements. It is a pain, but it is what it is.

    As for scaling the fonts, here is an example:

    
    <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, until 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.

    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

You must be logged in to reply to this topic.