A Style Guild: Character Talent Builds :: Heroes of the Storm discussion on HeroesFire

Hey guys, been working on a way to show off a talent build. This was a pain in the butt. Mostly because of the lack of css and documentation, but I managed to wrangle the text editor and here is the resulting template.

Change or remove coloring to fit your character or guild.

I would advise that you change none of the sizing on anything; it is already set to take up the best amount of space in the text container.

Hope you guys enjoy.

ABCDEFGHI ABCDEFGHI

CODE

Code:

[center][table bgcolor="#001829"]
[tr content="Talent Name Row"]
  [td bgcolor="#003052" height="50px" width="97px"] [size=2]ABCDEFGHI ABCDEFGHI[/size] [/td]
  [td bgcolor="#003052" height="50px" width="97px"] [size=2]ABCDEFGHI ABCDEFGHI[/size] [/td]
  [td bgcolor="#003052" height="50px" width="97px"] [size=2]ABCDEFGHI ABCDEFGHI[/size] [/td]
  [td bgcolor="#003052" height="50px" width="97px"] [size=2]ABCDEFGHI ABCDEFGHI[/size] [/td]
  [td bgcolor="#003052" height="50px" width="97px"] [size=2]ABCDEFGHI ABCDEFGHI[/size] [/td]
  [td bgcolor="#003052" height="50px" width="97px"] [size=2]ABCDEFGHI ABCDEFGHI[/size] [/td]
  [td bgcolor="#003052" height="50px" width="97px"] [size=2]ABCDEFGHI ABCDEFGHI[/size] [/td]
[/tr]

[tr content="Talent Icon Row"]
  [td bgcolor="#003052" height="97px" width="97px"]
    [icon=bolt of the storm  size="70px" padding="5px"]
      [/td]

  [td bgcolor="#003052" height="97px" width="97px"]
    [icon=bolt of the storm  size="70px" padding="5px"]
      [/td]

  [td bgcolor="#003052" height="97px" width="97px"]
    [icon=bolt of the storm  size="70px" padding="5px"]
      [/td]

  [td bgcolor="#003052" height="97px" width="97px"]
    [icon=bolt of the storm  size="70px" padding="5px"]
      [/td]

  [td bgcolor="#003052" height="97px" width="97px"]
    [icon=bolt of the storm  size="70px" padding="5px"]
      [/td]

  [td bgcolor="#003052" height="97px" width="97px"]
    [icon=bolt of the storm  size="70px" padding="5px"]
      [/td]

  [td bgcolor="#003052" height="97px" width="97px"]
    [icon=bolt of the storm  size="70px" padding="5px"]
      [/td]
[/tr]

[tr bgcolor="#191919" height="20px" content="Talent Choice Row"]
  [td bgcolor="#003052" content="Talent 1"]
    [table width="97px"]
      [tr]
        [td width="2px"][/td]
          [td bgcolor="#bc6dff" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="5.5px"]
            [/td]
        [td width="3px"][/td]
      [/tr]
    [/table]
  [/td]

  [td bgcolor="#003052" content="Talent 2"]
    [table width="97px"]
      [tr]
        [td width="9px"][/td]
          [td bgcolor="#bc6dff" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="9px"][/td]
      [/tr]
    [/table]
  [/td]

  [td bgcolor="#003052" content="Talent 3"]
    [table width="97px"]
      [tr]
        [td width="15px"][/td]
          [td bgcolor="#bc6dff" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="15px"][/td]
      [/tr]
    [/table]
  [/td]

  [td bgcolor="#003052" content="Talent 4"]
    [table width="97px"]
      [tr]
        [td width="22px"][/td]
          [td bgcolor="#bc6dff" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="22px"][/td]
      [/tr]
    [/table]
  [/td]

  [td bgcolor="#003052" content="Talent 5"]
    [table width="97px"]
      [tr]
        [td width="15px"][/td]
          [td bgcolor="#bc6dff" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="15px"][/td]
      [/tr]
    [/table]
  [/td]

  [td bgcolor="#003052" content="Talent 6"]
    [table width="97px"]
      [tr]
        [td width="9px"][/td]
          [td bgcolor="#bc6dff" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="9px"][/td]
      [/tr]
    [/table]
  [/td]

  [td bgcolor="#003052" content="Talent 7"]
    [table width="97px"]
      [tr]
        [td width="2px"][/td]
          [td bgcolor="#bc6dff" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="6px"]
            [/td]
        [td width="1px"][/td]
          [td bgcolor="#0e0e0e" height="8px" width="5.5px"]
            [/td]
        [td width="3px"][/td]
      [/tr]
    [/table]
  [/td]
[/tr]
[/table][/center]

2 Dots

3 Dots

4 Dots

5 Dots

An example of the template in use.

Victuals

Unrelenting
Pursuit

Abattoir

Lamb to the Slaughter

Crave Flesh

Blood Frenzy

Nexus Blade

Awards Showcase

Show more awards

Notable (5)
Posts: 10

Jesus christ, that's a long *** code! Thanks for this tho, looks great :)

Quick question: Where do you write the spell you want shown? Didn't see any "Bolt of the Storm" in the code..

"Never be game over"

My guides: Leoric / Kharazim / Lt. Morales

Notable (8)
Posts: 62

wrote:

Quick question: Where do you write the spell you want shown? Didn't see any "Bolt of the Storm" in the code..

Code:

[td bgcolor="#003052" height="97px" width="97px"]
    [icon=bolt of the storm  size="70px" padding="5px"]
      [/td]

It's near the top.

Awards Showcase

Show more awards

<Beta Tester>
Remarkable (29)
Posts: 276

wrote:

Code:

[td bgcolor="#003052" height="97px" width="97px"]
    [icon=bolt of the storm  size="70px" padding="5px"]
      [/td]

It's near the top.

Ah, there it is! Severage, you saved me again :D thx buddy!

"Never be game over"

My guides: Leoric / Kharazim / Lt. Morales

Notable (8)
Posts: 62

I just want to say this is excellent! I was just beating my head about a very similar situation where I want to show off builds (and alternate picks) in an easy and mobile-friendly manner in one really small table. Sadly, there are holes in the bbcode on this site (I can't seem to use styles and have very limited fonts).

This is much like you have going here, and I love it! Gotta be honest, I wish I had seen this before I worked so hard on mine! :) (I'm abusing the bottom part of my Stitches guide to mess around...)

Definitely going to use this for further inspiration. Thanks!

Awards Showcase

Show more awards

Posts: 27

Thanks for the great feedback everyone.

It seems that the skill bubbles have flattened themselves for some reason; I'll investigate this soon.

Awards Showcase

Show more awards

Notable (5)
Posts: 10

Thank you <3 this really helped me <3

Posts: 3

Heroes of the Storm Forums