Social bar for Chaturbate
| | | |

Code Snippet #2 – Horizontal Social bar Chaturbate

Let’s do the Code Snippet #2 for today.

This is a full-width horizontal social bar compatible with Chaturbate platform.

Social bar for Chaturbate
Social bar for Chaturbate

First of all, for those who don’t know, a code snippet is a piece of code from a larger source code.

I am adding snippets (pieces of codes) hopefully some day a smart mind like yourself will connect the dots and wrap all of them into a custom project.

But for today, let’s keep it simple.

A full horizontal Social bar. Full, because the width of the block wrapping element (in this case <li> tag) is 100%. A wrapping block is called parent, other blocks inside this one are named child (just so you know)

width:100% – Means a fluid width, will stretch as long as it is allowed by it’s parent

Inside this main block there are other HTML tags like <ul>, <img>, <a>.

<li style="display:block;width:100%;height:auto;margin:0 auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;background-color:#222;text-align:center;"><ul style="display:block;width:100%;height:auto;margin:0 auto;padding:0em;box-sizing:border-box;list-style:none;float:none;clear:left;"><li style="display:block;width:25%;height:auto;padding:0;margin:0;box-sizing:border-box;float:left;list-style:none;"><a href="#" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"><img src="https://raw.githubusercontent.com/cgc-dan/dxpro/main/y-so/dx-ttk.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a></li><li style="display:block;width:25%;height:auto;padding:0;margin:0px;box-sizing:border-box;list-style:none;float:left;"><a href="#" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"><img src="https://raw.githubusercontent.com/cgc-dan/dxpro/main/y-so/dx-twt.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a></li><li style="display:block;width:25%;height:auto;padding:0;margin:0px;box-sizing:border-box;list-style:none;float:left;"><a href="#" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"><img src="https://raw.githubusercontent.com/cgc-dan/dxpro/main/y-so/dx-inst.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a></li><li style="display:block;width:25%;height:auto;padding:0;margin:0px;box-sizing:border-box;list-style:none;float:left;"><a href="#" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"><img src="https://raw.githubusercontent.com/cgc-dan/dxpro/main/y-so/dx-snpc.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a></li><li style="display:block;width:100%;height:0px;padding:0;box-sizing:border-box;list-style:none;margin:0 auto;float:none;clear:left;overflow:hidden;opacity:0;">cgc - divider</li></ul></li>

The above code? yes will work on Chaturbate but let me explain it a bit.

Download and replace the graphics before using the markup code above as it is. I’m not going to host your projects, do your job and I’ll do mine 🙂

Ok, so the main block element is a <li> with inline-css.

the width is set to 100% (fluid width as I’ve already mentioned above) and margin value is set to 0 auto.

For this horizontal bar we don’t need the padding values so it can be set as padding:0;

box-sizing: border-box;

The box-sizing property allows us to include the padding and border in an element’s total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height

list-style: none; – because we don’t want bullets to show up and mess up with content

float: none; and clear: left; – we don’t need a floating on parent element and we also want to clear all properties of float: left;

background-color: #222; – dark grey (almost black) is the background color for parent block and can be changed with other HEX values like #036 (dark blue) for example

text-align: center; – does exactly what it suppose to do, aligns text (or other content) in center

As you can see in the markup code there are a few code fragments which helps the entire code snippet to be compatible with Chaturbate platform.

Because <div> HTML tag is not allowed to be used in About Me Bio box, other (allowed) HTML tags are used.

<ul> tag inside <li> (parent) element.

Let’s jump to block elements holding the links.

Inside the <ul> tag there are 4 <li> tags with 25% fluid width. So doing the math (I know I hate it, but its necessary), 100% width of the main parent will be divided by 4 blocks . 100/4 will result in 25. So our horizontal bar will hold 4 blocks with same fluid width of 25%.

To add a fifth block, we’ll need to divide 100 to 5 . 100/5=20, meaning 5 individual blocks all having 20% as fluid width.

Ok, ok, but what if we want only 3 block, all evenly divided?

100/3=33.33 – in our case we’ll have 3 blocks with 33.33% fluid width

Back to code in hand.

Inside the <ul> there are 4 <li> blocks with width:25%; and each of them use float: left; in order to display them all in-line.

Yes we could also use <li style=”display: inline-block; width: 25%;”>…</li> instead of <li style=”display: block; width: 25%; float: left;”>…</li> but float will do just fine and makes more sense when it comes to integrating the code snippet into a larger markup (like an entire Chaturbate layout design).

Ok, so we’re so deep into main parent, keep close, hopefully you didn’t got lost already…

<li>
  <ul>
    <li>
        we are here

Inside this <li> block we finally have the… tadam… links and graphics.


<a href="#" style="display:block;width:100%;height:auto;margin:0 auto; float: none; clear: left;"><img src="https://raw.githubusercontent.com/cgc-dan/dxpro/main/y-so/dx-ttk.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a>

<a href=”#” – replace the # sign with related link.

Inline style is added to both (link and image) so we made them both blocks, add full width and try to blow in yogurt adding float: none and clear: left

We don’t want for this elements to float, their parent element <li> is already doing that.

All done… 4 social buttons (blocks) inside <ul> which is also a child of main <li>

At the end of those 4 you’ll see a hidden element. This HTML markup is acting like “clearfix” (if you are familiar with Bootstrap) and is there to avoid braking the main wrapper due to float: left


<li style="display:block;width:100%;height:0px;padding:0;box-sizing:border-box;list-style:none;margin:0 auto;float:none;clear:left;overflow:hidden;opacity:0;">cgc - divider</li>

Key points when editing source markup codes:

  • make sure all HTML tags are properly closed (image tag has no closing tag)
  • if images seam to be broken while using code snippets online, make sure all your images are hosted
  • always test the final markup code before using it. A good practice which I very much recommend.

At first glance seams pretty easy right? Anyone can do it right?

Well, for non-skilled web designers (especially when developing designs for Chaturbate platform) coding is not so simple, sometimes we need to comeup with other HTML tags allowed by the platform in order to replace the ones which we normally should of use.

Would you try to design your own Chaturbate profile page? For those who want to skip the “learning path” there’s an awesome service Camgirl Live Editor tool with a lot of ready made templates (literally hundreds of ready made designs) for anyone to choose from. I too upload designs there.

And this particular code snippet “horizontal social bar” is one of my favorite ones as seen on Chaturbate Bio design Bella or Marianne Chaturbate Design

End of this post.

I’m Dan N and you should stick with me if you want to dive into markup code for beginners. Until next code snippet!

Have comments, questions, suggestions or feedback? Post bellow. 😉

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

6 Comments

  1. Exactly what I searching for.
    I have a small issue and maybe you could help. I did added another button for my onlyfans but the bar doesn’t look the same, are you available to assist? I can pay for your time, thank you.

    1. @Izzy Connolly
      It’s pretty simple, use the same math principle and from what I understand you have 6 buttons (because the math for 5 is already posted in article)
      100% which is the full width of the parent block, divided by 6 will result 16.66… so 100% / 6 = 16.66% … change the width of all block elements inside the parent with 16.66% instead of 20% or 25%

      <li style="display:block;width:16.66%;height:auto;padding:0;margin:0px;box-sizing:border-box;float:left;list-style:none;filter:hue-rotate(115deg) invert(15%) drop-shadow(0px 1px 0px #000);"><a href="#" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"><img src="https://raw.githubusercontent.com/cgc-dan/dxpro/main/y-so/dx-ttk.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a></li>