A List of Usable HTML & CSS in the Long Bio

itruthful

Hey,

Recently I've seen a few people confused as to what is and what isn't stripped from Long Bio's; so I've taken the time to compile 2 separate lists which separates stripped and non-stripped content. If you know of any that I missed please let me know with a reply and I'll gladly add it to the relevant list.

__________________________________________________________________________ 

HTML

Non-Stripped Stripped

Dividers Form Elements

Tables iFrames

Headings Image Maps

Specific Objects (YouTube videos etc)

Attributes (class, id, href and style)

Paragraphs

Images

Lists

Span

__________________________________________________________________________

CSS

Non-Stripped Stripped

Background-* a:*

Color Top, Bottom, Left, Right

Font-*

Floating

Margin

Padding

Height

Width

__________________________________________________________________________

I've listed as many as I can from the top of my head, if you know of any more please as said above; let me know so I can add them. You should also note an asterisk indicates everything with that specific attribute, element or selector.

Hopefully this helps people understand what they can and can't do before going on to create their Long Bio (Info Section).

thrillhousebro

I have tested OL, UL, and LI elements, they are not permitted and automatically removed from your long bio if used.

<Span> is permitted, as is h1-h5. From what I can tell, from my experience, if you use a div with background-color in your long bio it will be removed, it has for me. It might be context driven.

edit: I re-tested UL-LI and you are correct. 

As an addition, border styling appears to work.

itruthful

I tested the lists and it seemed to work for me using the following;

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Thanks, adding span to the non-stripped; completely forgot them. I listed h1-h5 as "Headings".

biotest

yer <ul> works you can also add style to it.

@thrillhousebro instead of using background-color:#FFFFFF  use background:#FFFFFF that works for me :)

biotest

To get a mouse over effect you can use.

<ul class="multi_select">

<li class="selector">

<span class="ms-int" style="background-image:url(IMAGE LINK);">

<span class="button" style="background-image:url(OTHER IMAGE LINK);">

</span></span

</li></ul>

im not sure this needs to be in the list.

thrillhousebro

To get a mouse over effect you can use.

<ul class="multi_select">

<li class="selector">

<span class="ms-int" style="background-image:url(IMAGE LINK);">

<span class="button" style="background-image:url(OTHER IMAGE LINK);">

</span></span

</li></ul>

im not sure this needs to be in the list.

I'm afraid I don't quite understand why this works. It must be using CSS Classes used by Twitch's default style sheet? I'll have to try this code out and see what happens later. Thanks for sharing this.

biotest

nor me lol, but it does ive used it have a look on my channel http://www.twitch.tv/bio_test

code used:

<ul class="multi_select" style="float:left;padding-top:10px;padding-left:10px;width:63px;height:66px;"><li class="selector">
          <a rel="nofollow" href="#" target="_blank">
             <span class="ms-int" style="width:63px;height:66px;background-image:url(http://i695.photobucket.com/albums/vv320/supersimo2009/yt_grey-1.jpg);border:0;margin:0;padding:0;">
                <span class="button" style="width:63px;height:66px;background-image:url(http://i695.photobucket.com/albums/vv320/supersimo2009/youtube_logo.jpg);border:0;margin:0;padding:0;"></span></span></a>
</li></ul>

Fire

I've had the official allowed ( or blocked? ) list of elements in my inbox for a while now, I just haven't had the time to write up a thread for it. CSS stylings are just an ongoing guesstimation process.

@biotest a little credit would be nice :p I've posted that on the forums many times. Went looking around the site's css to see what stylings did what and saw how that was used in the twitter and facebook buttons ( on the old design ), so I used that in the original versions of siglemic's longbio :) shortly after that I started seeing it used all over the place :D popular thing, that

I'll see if I can find the list of elems again soon

itruthful

That would be awesome, @Fire. Right now the list just consists of things I've tried and what not; but if you have the official list of what is stripped etc - that'd be perfect. 

:)

biotest

@fire well done for posting the mouse over effect code :D :D :D

tbh i cant remember where i acquired the code.

thrillhousebro

@fire 

please post that list, I'd like to use it to plan out a new page. I've gotta know what I can do before I start planning.