Duolingo is the most popular way to learn languages in the world. Best of all, it's 100% free!

https://www.duolingo.com/Hyllning

Duolingo ~ 「 Formatting 」- CHARTS

Note:

This is a Sub-post of Duolingo ~ 「 Formatting Home 」

Please remember, charts are quite hard to master! I suggest reading this a couple times first, then test it out. If you don't get it at first, try once more!


<h1>Charts</h1>

Examples of Charts:

All Links Below.

Basic Format; 2x3

Title 1 {@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Title 2{@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal;font-weight: bold; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} FIRST {@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} SECOND {@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} THIRD{@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FOURTH {@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FIFTH {@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} SIXTH{@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;}

  • End

Titles Only; 2x0

Title 1 {@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} Title 2{@style=float:left;width:50%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal;font-weight: bold; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;}

  • End

3 Column; 3x2

TITLE1 {@style=float:left;width:33%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} TITLE2 {@style=float:left;width:33%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal;font-weight: bold; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} TITLE3 {@style=float:left;width:33%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} FIRST {@style=float:left;width:33%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} SECOND {@style=float:left;width:33%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} THIRD{@style=float:left;width:33%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FIRST2 {@style=float:left;width:33%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} SECOND2 {@style=float:left;width:33%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} THIRD2{@style=float:left;width:33%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;}

  • End

4 Column; 4x2

TITLE1 {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} TITLE2 {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal;font-weight: bold; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} TITLE3 {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} TITLE4 {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal;font-weight: bold; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} FIRST {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} SECOND {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} THIRD{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FOURTH {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FIRST2{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} SECOND2 {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} THIRD2{@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FOURTH2 {@style=float:left;width:25%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;}

  • End

5 Column; 5x2

TITLE1 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} TITLE2 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal;font-weight: bold; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} TITLE3 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} TITLE4 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal;font-weight: bold; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} TITLE5 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal;font-weight: bold; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip;} FIRST {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} SECOND {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} THIRD {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FOURTH {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FIFTH {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FIRST2 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} SECOND2 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} THIRD2 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FOURTH2 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} FIFTH2 {@style=float:left;width:20%; border:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;}

  • End

Rounded Corners + Dual Rows;

TITLE1 {@style=float:left;width:50%; border-top:1px #1caff6; border-bottom:1px #1caff6; border-left:1px #1caff6; border-right:0px #1caff6; border-style:solid; padding:6px; font-style:normal; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip; border-top-left-radius: 1em;} TITLE2 {@style=float:left;width:50%; border-top:1px #1caff6; border-bottom:1px #1caff6; border-left:1px #1caff6; border-right:1px #1caff6; border-style:solid; padding:6px; font-style:normal;font-weight: bold; color: #FFFFFF; background-color: #00BFFF; white-space:nowrap;text-overflow:clip; border-top-right-radius: 1em;} FIRST {@style=float:left;width:50%; border-top:0px;border-bottom:0px; border-left:1px #1caff6; border-right:0px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} SECOND {@style=float:left;width:50%; border-top:0px #1caff6; border-bottom:1px #1caff6; border-left:1px #1caff6; border-right:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip;} THIRD {@style=float:left;width:50%; border-top:0px;border-bottom:1px #1caff6; border-left:1px #1caff6; border-right:0px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; border-bottom-left-radius: 1em;} FOURTH {@style=float:left;width:50%; border-top:0px #1caff6; border-bottom:1px #1caff6; border-left:1px #1caff6; border-right:1px #1caff6; border-style:solid; padding:6px; font-style:normal; white-space:nowrap;text-overflow:clip; border-bottom-right-radius: 1em;}

  • End

Links:

Basic Title

Each Row Code

Full Chart - 2 Rows

Basic Format; 2x3

3 Column; 3x2

4 Column; 4x2

5 Column; 5x2

Rounded Corners + Dual Rows

Tip: Use Ctrl + Left Click to open the Links in another Tab.


Other Information:

  • Now first off.. Here are some Customizations

If you want more Rows;

Each Row Code

If you want more columns;

Look in the codes: Where you see

{@style=float:left;width:25%;

you'll need to change the PERCENTAGE, see more below..

  • If you want a One Column Chart, make all the PERCENTAGES: 100%

  • If you want a Two Column Chart, make all the PERCENTAGES: 50%

  • If you want a Three Column Chart, make all the PERCENTAGES: 33%

  • If you want a Four Column Chart, make all the PERCENTAGES: 25%

  • If you want a Five Column Chart, make all the PERCENTAGES: 20%

(They add up to Roughly 100%)

You can also change the colors of text and boxes!

  • Second off, I added the TITLE1, TITLE2, FIRST, etc. so you can change the words easily.

  • Third; THERE IS A LOT MORE OPTIONS FOR CHARTS!! I gave you some nice, blue, and clean sets. Feel free to customize!


If you'd like to test out these charts: reply to my Comment in this post and delete your post when you are done. This will prevent lag in this post.

Home

Basics

Basics 2

Images and Links


_t_Hyllning~ {@style=color:white}

<h1>- Hyllning {@style=color: brown}</h1>
12
2 years ago
2

3 Comments