Artist Kae's Code Canvas - Bio + Post Divs | Plug + Play Divs | How-To

[Ilias Nytrau]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque vitae blandit commodo, felis tellus rutrum est, sit amet mollis felis odio nec felis. Integer massa arcu, porttitor sed accumsan at, lacinia in est. Pellentesque ac tristique odio. Aliquam erat volutpat. Nunc non molestie enim. Cras et justo dictum, commodo tortor et, consequat turpis. Ut libero justo, mattis vel porttitor venenatis, pellentesque ac mi. Etiam id imperdiet ante. Vivamus vel lectus ut lectus rhoncus eleifend. Nam et risus ac nisi imperdiet venenatis. Integer quis dignissim leo, eget aliquet erat. Donec sit amet fermentum mi, id interdum magna. Pellentesque gravida fringilla nunc, quis egestas sapien rutrum vel. Maecenas accumsan nisi nibh, ac consequat risus consequat at. Cras vel mauris consequat, sagittis enim sit amet, posuere quam. Nam scelerisque dapibus convallis.

Morbi in laoreet quam, ut mattis eros. Phasellus sed ligula congue odio bibendum varius in id dui. Maecenas laoreet lorem eros, nec feugiat sapien ultrices ac. Integer eu facilisis lectus. Suspendisse nec dolor sapien. Aenean sagittis, odio at vehicula tristique, nisl urna elementum orci, sit amet faucibus mauris mi vel neque. Phasellus tempor ut lacus vitae ultrices. Phasellus ac metus ultricies, convallis orci vitae, molestie ipsum. Pellentesque sit amet aliquam justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id hendrerit erat, eget fermentum orci. Etiam feugiat feugiat purus, vitae elementum lectus posuere id. Proin eu placerat arcu.

Cras facilisis tellus nibh. Etiam ut interdum ex, ac auctor magna. Mauris quis ipsum ligula. Etiam purus odio, consequat vitae hendrerit id, varius in neque. Quisque vehicula quis nisl eget dignissim. Etiam eleifend nunc vitae vehicula hendrerit. Sed dignissim sodales neque sed vestibulum. Etiam non consectetur ex. Morbi suscipit blandit risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eros et mi pharetra porta. Morbi felis augue, rutrum at elit eget, hendrerit tempus urna. Vivamus gravida lacinia nisi ac rutrum. Nullam porta porta pharetra. Praesent sit amet pulvinar neque, et dictum lectus. Donec ante nibh, sollicitudin nec dolor sed, varius tempus lectus.

An icy blue template, free for anyone to use!

KAE​

Spoiler: Icy Blue Template Code

[div=background:url(https://i.imgur.com/DckLy2K.png); max-width: 600px; background-repeat: no-repeat; background-size: cover; background-position: center top; padding: 20px; font-family: arial narrow; font-size: 100%; text-align: justify; margin: auto; border-radius: 5px; box-shadow: 0px 0px 10px #bbe6fa inset, 0px 0px 10px 2px #000000; border: 2px solid #1baef2; color: #aec8d1;][div=max-width: 600px; background: #022640; margin: auto; padding: 20px; border-radius: 5px; border: 1px solid #1baef2; box-shadow: 0px 0px 10px 2px #000000; overflow: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque vitae blandit commodo, felis tellus rutrum est, sit amet mollis felis odio nec felis. Integer massa arcu, porttitor sed accumsan at, lacinia in est. Pellentesque ac tristique odio. Aliquam erat volutpat. Nunc non molestie enim. Cras et justo dictum, commodo tortor et, consequat turpis. Ut libero justo, mattis vel porttitor venenatis, pellentesque ac mi. Etiam id imperdiet ante. Vivamus vel lectus ut lectus rhoncus eleifend. Nam et risus ac nisi imperdiet venenatis. Integer quis dignissim leo, eget aliquet erat. Donec sit amet fermentum mi, id interdum magna. Pellentesque gravida fringilla nunc, quis egestas sapien rutrum vel. Maecenas accumsan nisi nibh, ac consequat risus consequat at. Cras vel mauris consequat, sagittis enim sit amet, posuere quam. Nam scelerisque dapibus convallis.

Morbi in laoreet quam, ut mattis eros. Phasellus sed ligula congue odio bibendum varius in id dui. Maecenas laoreet lorem eros, nec feugiat sapien ultrices ac. Integer eu facilisis lectus. Suspendisse nec dolor sapien. Aenean sagittis, odio at vehicula tristique, nisl urna elementum orci, sit amet faucibus mauris mi vel neque. Phasellus tempor ut lacus vitae ultrices. Phasellus ac metus ultricies, convallis orci vitae, molestie ipsum. Pellentesque sit amet aliquam justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id hendrerit erat, eget fermentum orci. Etiam feugiat feugiat purus, vitae elementum lectus posuere id. Proin eu placerat arcu.

Cras facilisis tellus nibh. Etiam ut interdum ex, ac auctor magna. Mauris quis ipsum ligula. Etiam purus odio, consequat vitae hendrerit id, varius in neque. Quisque vehicula quis nisl eget dignissim. Etiam eleifend nunc vitae vehicula hendrerit. Sed dignissim sodales neque sed vestibulum. Etiam non consectetur ex. Morbi suscipit blandit risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eros et mi pharetra porta. Morbi felis augue, rutrum at elit eget, hendrerit tempus urna. Vivamus gravida lacinia nisi ac rutrum. Nullam porta porta pharetra. Praesent sit amet pulvinar neque, et dictum lectus. Donec ante nibh, sollicitudin nec dolor sed, varius tempus lectus.
[/div][/div]

 

[Ilias Nytrau]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque vitae blandit commodo, felis tellus rutrum est, sit amet mollis felis odio nec felis. Integer massa arcu, porttitor sed accumsan at, lacinia in est. Pellentesque ac tristique odio. Aliquam erat volutpat. Nunc non molestie enim. Cras et justo dictum, commodo tortor et, consequat turpis. Ut libero justo, mattis vel porttitor venenatis, pellentesque ac mi. Etiam id imperdiet ante. Vivamus vel lectus ut lectus rhoncus eleifend. Nam et risus ac nisi imperdiet venenatis. Integer quis dignissim leo, eget aliquet erat. Donec sit amet fermentum mi, id interdum magna. Pellentesque gravida fringilla nunc, quis egestas sapien rutrum vel. Maecenas accumsan nisi nibh, ac consequat risus consequat at. Cras vel mauris consequat, sagittis enim sit amet, posuere quam. Nam scelerisque dapibus convallis.

Morbi in laoreet quam, ut mattis eros. Phasellus sed ligula congue odio bibendum varius in id dui. Maecenas laoreet lorem eros, nec feugiat sapien ultrices ac. Integer eu facilisis lectus. Suspendisse nec dolor sapien. Aenean sagittis, odio at vehicula tristique, nisl urna elementum orci, sit amet faucibus mauris mi vel neque. Phasellus tempor ut lacus vitae ultrices. Phasellus ac metus ultricies, convallis orci vitae, molestie ipsum. Pellentesque sit amet aliquam justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id hendrerit erat, eget fermentum orci. Etiam feugiat feugiat purus, vitae elementum lectus posuere id. Proin eu placerat arcu.

Cras facilisis tellus nibh. Etiam ut interdum ex, ac auctor magna. Mauris quis ipsum ligula. Etiam purus odio, consequat vitae hendrerit id, varius in neque. Quisque vehicula quis nisl eget dignissim. Etiam eleifend nunc vitae vehicula hendrerit. Sed dignissim sodales neque sed vestibulum. Etiam non consectetur ex. Morbi suscipit blandit risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eros et mi pharetra porta. Morbi felis augue, rutrum at elit eget, hendrerit tempus urna. Vivamus gravida lacinia nisi ac rutrum. Nullam porta porta pharetra. Praesent sit amet pulvinar neque, et dictum lectus. Donec ante nibh, sollicitudin nec dolor sed, varius tempus lectus.

Cyan LED Tiles Template, free for anyone to use!

KAE​

Spoiler: Cyan LED Tiles Template Code

[div=background:url(https://i.imgur.com/z6g5qG9.jpeg); max-width: 600px; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 20px; font-family: arial narrow; font-size: 100%; text-align: justify; margin: auto; border-radius: 5px; box-shadow: 0px 0px 10px #96eafa inset, 0px 0px 10px 2px #000000; border: 1px solid #369bba; color: #aecfd1;][div=max-width: 600px; background: #001d21; margin: auto; padding: 20px; border-radius: 5px; border: 1px solid #107387; box-shadow: 0px 0px 10px 2px #000000; overflow: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque vitae blandit commodo, felis tellus rutrum est, sit amet mollis felis odio nec felis. Integer massa arcu, porttitor sed accumsan at, lacinia in est. Pellentesque ac tristique odio. Aliquam erat volutpat. Nunc non molestie enim. Cras et justo dictum, commodo tortor et, consequat turpis. Ut libero justo, mattis vel porttitor venenatis, pellentesque ac mi. Etiam id imperdiet ante. Vivamus vel lectus ut lectus rhoncus eleifend. Nam et risus ac nisi imperdiet venenatis. Integer quis dignissim leo, eget aliquet erat. Donec sit amet fermentum mi, id interdum magna. Pellentesque gravida fringilla nunc, quis egestas sapien rutrum vel. Maecenas accumsan nisi nibh, ac consequat risus consequat at. Cras vel mauris consequat, sagittis enim sit amet, posuere quam. Nam scelerisque dapibus convallis.

Morbi in laoreet quam, ut mattis eros. Phasellus sed ligula congue odio bibendum varius in id dui. Maecenas laoreet lorem eros, nec feugiat sapien ultrices ac. Integer eu facilisis lectus. Suspendisse nec dolor sapien. Aenean sagittis, odio at vehicula tristique, nisl urna elementum orci, sit amet faucibus mauris mi vel neque. Phasellus tempor ut lacus vitae ultrices. Phasellus ac metus ultricies, convallis orci vitae, molestie ipsum. Pellentesque sit amet aliquam justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id hendrerit erat, eget fermentum orci. Etiam feugiat feugiat purus, vitae elementum lectus posuere id. Proin eu placerat arcu.

Cras facilisis tellus nibh. Etiam ut interdum ex, ac auctor magna. Mauris quis ipsum ligula. Etiam purus odio, consequat vitae hendrerit id, varius in neque. Quisque vehicula quis nisl eget dignissim. Etiam eleifend nunc vitae vehicula hendrerit. Sed dignissim sodales neque sed vestibulum. Etiam non consectetur ex. Morbi suscipit blandit risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eros et mi pharetra porta. Morbi felis augue, rutrum at elit eget, hendrerit tempus urna. Vivamus gravida lacinia nisi ac rutrum. Nullam porta porta pharetra. Praesent sit amet pulvinar neque, et dictum lectus. Donec ante nibh, sollicitudin nec dolor sed, varius tempus lectus.
[/div][/div]

 

[Ilias Nytrau]

SUBACCOUNT NAME HERE

Theme​	replace this link with your own theme change youtube link & song title​
Full Name​	first, middle (if any), last names​
Alias(es)​	nicknames noble title with name callsigns epithets etc.​
Age​	e.g. - 24 or mid-twenties or change row title to 'birth year' and input specific year here​
Character Class(es)​	e.g. Politician Noble Jedi/Sith etc​
Homeworld​	Where ya from?​
Rank(s)​	e.g. Political/Military/Force/Nobility Ranks​
Faction(s)​	Replace this link, or N/A​
Species​	Are you a garden-variety human, or...?​
Language(s)​	Galactic Basic [Add others if desired]​
Gender​	male/female/non-binary/etc​
Force Sensitive​	Yes/No, or Minimally/Force-Attuned/Force-Dead​
Force Alignment​	Light/Dark/Grey/Ashla/Bogan or whatever or remove row if not applicable​
Character Alignment​	See here and pick what suits your character​
Height​	in metres [in feet and inches]​
Weight​	in kg [in lbs] ...or a lady never tells ​
Hair​	What colour is it?​
Eyes​	What colour are they?​
Playby​	What/who do you use to represent your character? e.g. Lana Del Rey, Triss (Witcher 3), AI Art of whoever, etc​
Color​	color hex code (e.g. #e0b428) or color name for your character's speech​
Writer​	Tag your writer account, or your discord Or remove this row​
Template Credit​	Ilias Nytrau​

Overview History Appearance Personality & Traits Skills & Abilities Equipment Story Arcs Connections

• 
  
  GENERAL INFORMATION
  
  OVERVIEW GOES HERE!
  
  Example:
  
  Auswyn Nothrael is a Kuati noble, wayward scholar of the anthropology of religion and faith systems, an often ritualistic murderer, and adept of abilities some mundanes consider to be unnatural.
  
  
  CLICK HERE TO RETURN TO TOP OF TAB​
• 
  
  HISTORY
  HISTORY GOES HERE!
  
  
  CLICK HERE TO RETURN TO TOP OF TAB​
• 
  
  APPEARANCE
  
  APPEARANCE GOES HERE!
  
  
  CLICK HERE TO RETURN TO TOP OF TAB​
• 
  
  PERSONALITY
  
  PERSONALITY GOES HERE!
  
  
  
  

  STRENGTHS & WEAKNESSES
  
  STRENGTHS & WEAKNESSES GO HERE!
  
  
  CLICK HERE TO RETURN TO TOP OF TAB​
• 
  
  NOTABLE SKILLS
  
  

  	PLACEHOLDER
  	PLACEHOLDER
  	PLACEHOLDER
  	PLACEHOLDER
  	PLACEHOLDER
  	PLACEHOLDER

  
  *Skill/Ability Icons can be found HERE
  
  
• 
  
  EQUIPMENT
  
  EQUIPMENT LISTING GOES HERE!
  
  
• 
  
  STORY ARCS

  
  INDEX
  1. ARC #1 NAME HERE
  2. ARC #2 NAME HERE
  
  
  
  ARC #1 NAME HERE
  Description here
  ​
  ➣ | FACTION | | PRIVATE | | IC BLOG | Thread Title & Link [IN PROGRESS/COMPLETE/INCOMPLETE] - Description
  
  Examples:
  
  ➣ | PRIVATE | Ripped Seams [COMPLETE] - Auswyn meets Cat Van-Derveld for the first time.
  
  ➣ | PUBLIC | One Big, Dysfunctional Family [COMPLETE] - Auswyn meets the family of her master/lover, Cat Van-Derveld.
  
  
  
  
  CLICK HERE TO RETURN TO TOP OF TAB
  
  
  
  ARC #2 NAME HERE
  Description here
  ​
  ➣ | FACTION | | PRIVATE | | IC BLOG | Thread Title & Link [IN PROGRESS/COMPLETE/INCOMPLETE] - Description
  
  
  
  CLICK HERE TO RETURN TO TOP OF TAB​
• 
  
  FACTION/GROUP NAME (change this one)

  Name​	Description​
  PLACEHOLDER	PLACEHOLDER
  PLACEHOLDER	PLACEHOLDER
  PLACEHOLDER	PLACEHOLDER
  PLACEHOLDER	PLACEHOLDER

  
  

  FAMILY

  Name​	Description​
  PLACEHOLDER	PLACEHOLDER
  PLACEHOLDER	PLACEHOLDER
  PLACEHOLDER	PLACEHOLDER
  PLACEHOLDER	PLACEHOLDER

  
  
  OTHER CONNECTIONS

  Name​	Description​
  PLACEHOLDER	PLACEHOLDER
  [PLACEHOLDER	PLACEHOLDER
  PLACEHOLDER	PLACEHOLDER
  PLACEHOLDER	PLACEHOLDER
  PLACEHOLDER	PLACEHOLDER

  
  
  CLICK HERE TO RETURN TO TOP OF TAB​

De-factioned version of my most current bio template that i'd put together first for THR, based on this bio. Went with red 'cause it was already in THR's template.
If you want a different colour, I can perform the full colour swap pretty quickly 'cause I know where all the changes need to be made - just DM me!
Or try your own hand at it, if that's more your thing.

KAE​

Spoiler: Template Code

[div=background: #0f0000; max-width: 900px; background-position: 50% 50%; background-size: cover; padding: 20px; font-family: arial narrow; text-align: justify; font-size: 100%; margin: auto; box-shadow: 0px 0px 10px #000000 inset, 0px 0px 10px #000000; border: 2px solid; border-image: url(https://i.imgur.com/J2KPwUo.png) 60 stretch; color: #b59e9e; overflow: auto;][div=max-width: 400px; background: #1f0302; margin: auto; padding: 10px; float: right; box-shadow: 0px 0px 10px #000000; border: 2px solid; border-image: url(https://i.imgur.com/J2KPwUo.png) 60 stretch; overflow: auto; position: relative; z-index: 100;][div=background-image: url(https://i.imgur.com/KxCP7zJ.png); background-size: cover; background-repeat: no-repeat; background-position: center; max-width: 400px; height: 400px;][div=max-width: 100%; height: 100%; background-image: linear-gradient(rgba(97, 97, 95, 0.6) 1px, transparent 1px); background-size: 2px 2px;][IMG width="5px"]https://i.imgur.com/VVVDHjr.png[/IMG][/div][/div]
[div='display: block; font-family: courier new; font-size: 3em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000'] SUBACCOUNT NAME HERE [/div]
[TABLE=center]
[TR]
[TD][CENTER][B]Theme[/B][/CENTER][/TD]

[TD][CENTER][URL='https://www.youtube.com/watch?v=RIwAsGipAwU'][COLOR=rgb(219, 94, 94)]replace this link with your own theme[/COLOR][/URL]
change youtube link & song title[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Full Name[/B][/CENTER][/TD]

[TD][CENTER]first, middle (if any), last names[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Alias(es)[/B][/CENTER][/TD]

[TD][CENTER]nicknames
noble title with name
callsigns
epithets
etc.[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Age[/B][/CENTER][/TD]

[TD][CENTER]e.g.  - 24 or mid-twenties
or change row title to 'birth year'
and input specific year here[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Character Class(es)[/B][/CENTER][/TD]

[TD][CENTER]e.g. Politician
Noble
Jedi/Sith
etc[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Homeworld[/B][/CENTER][/TD]

[TD][CENTER]Where ya from?[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Rank(s)[/B][/CENTER][/TD]

[TD][CENTER]e.g. Political/Military/Force/Nobility Ranks[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Faction(s)[/B][/CENTER][/TD]

[TD][CENTER][URL='https://www.starwarsrp.net/factions/royal-naboo-republic.450/'][COLOR=rgb(219, 94, 94)]Replace this link, or N/A[/COLOR][/URL][/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Species[/B][/CENTER][/TD]

[TD][CENTER]Are you a garden-variety human, or...?[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Language(s)[/B][/CENTER][/TD]

[TD][CENTER]Galactic Basic
[Add others if desired][/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Gender[/B][/CENTER][/TD]

[TD][CENTER]male/female/non-binary/etc[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Force Sensitive[/B][/CENTER][/TD]

[TD][CENTER]Yes/No,
or
Minimally/Force-Attuned/Force-Dead[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Force Alignment[/B][/CENTER][/TD]

[TD][CENTER]Light/Dark/Grey/Ashla/Bogan
or whatever
or remove row if not applicable[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Character Alignment[/B][/CENTER][/TD]

[TD][CENTER][URL='https://easydamus.com/alignment.html']See here[/URL]
and pick what suits your character[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Height[/B][/CENTER][/TD]

[TD][CENTER]in metres [in feet and inches][/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Weight[/B][/CENTER][/TD]

[TD][CENTER]in kg [in lbs]
...or a lady never tells ;)[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Hair[/B][/CENTER][/TD]

[TD][CENTER]What colour is it?[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Eyes[/B][/CENTER][/TD]

[TD][CENTER]What colour are they?[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Playby[/B][/CENTER][/TD]

[TD][CENTER]What/who do you use to
represent your character?
e.g. Lana Del Rey, Triss (Witcher 3),
AI Art of whoever, etc[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Color[/B][/CENTER][/TD]

[TD][CENTER]color hex code (e.g. #e0b428)
or color name
for your character's speech[/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Writer[/B][/CENTER][/TD]

[TD][CENTER]Tag your writer account, or your discord
Or remove this row [/CENTER][/TD]
[/TR]
[TR]
[TD][CENTER][B]Template Credit[/B][/CENTER][/TD]

[TD][CENTER][USER=1966]Ilias Nytrau[/USER][/CENTER][/TD]
[/TR]
[/TABLE]
[/div][div=max-width: 425px; background: #1f0302; margin: auto; padding: 10px; box-shadow: 0px 0px 10px #000000; border: 2px solid; border-image: url(https://i.imgur.com/J2KPwUo.png) 60 stretch; float: left; overflow: auto;][div=background-image: url(https://i.imgur.com/tnjRJ2Y.jpeg); background-size: cover; background-repeat: no-repeat; background-position: center; margin: auto; max-width: 425px; height: 250px; box-shadow: 0px 0px 10px #000000 inset;][div=width: 100%; height: 100%; margin: auto; background-image: linear-gradient(rgba(97, 97, 95, 0.6) 1px, transparent 1px); background-size: 2px 2px;][IMG width="12px"]https://i.imgur.com/VVVDHjr.png[/IMG][/div][/div]
[TABS width="250%"][SLIDE_HEADER]Overview[/SLIDE_HEADER][COLOR=rgb(145, 255, 53)][anchor]OVERVIEW[/anchor][/COLOR][SLIDE]
[div='display: block; font-family: courier new; font-size: 2em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']GENERAL INFORMATION[/div]
[B][COLOR=rgb(51, 234, 255)]OVERVIEW GOES HERE![/COLOR][/B]

Example:

Oriadne Hallas is a Jedi Master of the [URL='https://www.starwarsrp.net/factions/the-jakku-jedi-enclave.146/'][COLOR=rgb(219, 94, 94)]Jakku Jedi Enclave[/COLOR][/URL], with [I]secondary[/I] ties to the [URL='https://www.starwarsrp.net/threads/new-jedi-order-info-roster.139954/'][COLOR=rgb(219, 94, 94)]New Jedi Order[/COLOR][/URL] of the [URL='https://www.starwarsrp.net/factions/the-galactic-alliance.11/'][COLOR=rgb(219, 94, 94)]Galactic Alliance[/COLOR][/URL], and to the Ascendancy, and indirectly to its Order of Medjai Knights. She is also a survivor of the [URL='https://starwars.fandom.com/wiki/Great_Jedi_Purge'][COLOR=rgb(219, 94, 94)]Great Jedi Purge[/COLOR][/URL].

[CENTER][anchor=#OVERVIEW][SIZE=10px][COLOR=rgb(219, 94, 94)]CLICK HERE TO RETURN TO TOP OF TAB[/COLOR][/SIZE][/anchor][/CENTER]
[/SLIDE][SLIDE_HEADER]History[/SLIDE_HEADER][COLOR=rgb(145, 255, 53)][anchor]HISTORY[/anchor][/COLOR][SLIDE]
[CENTER][div='display: block; font-family: courier new; font-size: 2em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']HISTORY[/div][/CENTER]
[B][COLOR=rgb(51, 234, 255)]HISTORY GOES HERE![/COLOR][/B]
[CENTER]
[anchor=#HISTORY][SIZE=10px][COLOR=rgb(219, 94, 94)]CLICK HERE TO RETURN TO TOP OF TAB[/COLOR][/SIZE][/anchor][/CENTER]
[/slide]
[SLIDE_HEADER]Appearance[/SLIDE_HEADER][COLOR=rgb(145, 255, 53)][anchor]APPEARANCE[/anchor][/COLOR][slide]
[CENTER][div='display: block; font-family: courier new; font-size: 2em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']APPEARANCE[/div][/CENTER]

[B][COLOR=rgb(51, 234, 255)]APPEARANCE GOES HERE![/COLOR][/B]

[CENTER][anchor=#APPEARANCE][SIZE=10px][COLOR=rgb(219, 94, 94)]CLICK HERE TO RETURN TO TOP OF TAB[/COLOR][/SIZE][/anchor][/CENTER]
[/slide]
[SLIDE_HEADER]Personality & Traits[/SLIDE_HEADER][COLOR=rgb(145, 255, 53)][anchor]TRAITS[/anchor][/COLOR][SLIDE]
[CENTER][div='display: block; font-family: courier new; font-size: 2em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']PERSONALITY[/div][/CENTER]

[COLOR=rgb(51, 234, 255)][B]PERSONALITY GOES HERE![/B][/COLOR]

[CENTER]
[div='display: block; font-family: courier new; font-size: 2em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']STRENGTHS & WEAKNESSES[/div][/CENTER]

[B][COLOR=rgb(51, 234, 255)]STRENGTHS & WEAKNESSES GO HERE![/COLOR][/B]

[CENTER][anchor=#TRAITS][SIZE=10px][COLOR=rgb(219, 94, 94)]CLICK HERE TO RETURN TO TOP OF TAB[/COLOR][/SIZE][/anchor][/CENTER]
[/SLIDE][SLIDE_HEADER]Skills & Abilities[/SLIDE_HEADER][SLIDE]
[CENTER][div='display: block; font-family: courier new; font-size: 2em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']NOTABLE SKILLS[/div][/CENTER]

[TABLE]
[TR]
[TD][IMG width="60px"]https://static.wikia.nocookie.net/swtor_gamepedia/images/d/d1/527409.png/[/IMG][/TD]
[TD][B][SIZE=18px][FONT=Georgia][B]PLACEHOLDER[/B][/FONT][/SIZE][/B][/TD]
[/TR]
[TR]
[TD][IMG width="60px"]https://static.wikia.nocookie.net/swtor_gamepedia/images/2/2f/Forcestun.png[/IMG][/TD]
[TD][B][SIZE=18px][FONT=Georgia][B]PLACEHOLDER[/B][/FONT][/SIZE][/B][/TD]
[/TR]
[TR]
[TD][IMG width="60px"]https://static.wikia.nocookie.net/swtor_gamepedia/images/c/cb/527463.png[/IMG][/TD]
[TD][B][SIZE=18px][FONT=Georgia][B]PLACEHOLDER[/B][/FONT][/SIZE][/B][/TD]
[/TR]
[TR]
[TD][IMG width="60px"]https://static.wikia.nocookie.net/swtor_gamepedia/images/d/d7/Movementslowed.png[/IMG][/TD]
[TD][B][SIZE=18px][FONT=Georgia][B]PLACEHOLDER[/B][/FONT][/SIZE][/B][/TD]
[/TR]
[TR]
[TD][IMG width="60px"]https://static.wikia.nocookie.net/swtor_gamepedia/images/f/f1/Melee.trainingsaber.a01_v01.png[/IMG][/TD]
[TD][B][SIZE=18px][FONT=Georgia][B]PLACEHOLDER[/B][/FONT][/SIZE][/B][/TD]
[/TR]
[TR]
[TD][IMG width="60px"]https://static.wikia.nocookie.net/swtor_gamepedia/images/2/2d/527325.png/[/IMG][/TD]
[TD][B][SIZE=18px][FONT=Georgia][B]PLACEHOLDER[/B][/FONT][/SIZE][/B][/TD]
[/TR]
[/TABLE]

[I]*Skill/Ability Icons can be found [/I][URL='https://swtor.fandom.com/wiki/Category:Ability_icons'][I]HERE[/I][/URL]

[/SLIDE]
[/SLIDE][SLIDE_HEADER]Equipment[/SLIDE_Header][SLIDE]
[CENTER][div='display: block; font-family: courier new; font-size: 2em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']EQUIPMENT[/div][/CENTER]

[B][COLOR=rgb(51, 234, 255)]EQUIPMENT LISTING GOES HERE![/COLOR][/B]

[/SLIDE][SLIDE_HEADER]Story Arcs[/SLIDE_HEADER][COLOR=rgb(145, 255, 53)][anchor]STORY[/anchor][/COLOR][SLIDE]
[CENTER][div='display: block; font-family: courier new; font-size: 2em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']STORY ARCS[/div]
[B][SIZE=18px][U]INDEX[/U][/SIZE][/B]
1. [anchor=#ARC1][COLOR=rgb(219, 94, 94)]ARC #1 NAME HERE[/COLOR][/anchor]
2. [anchor=#ARC2][COLOR=rgb(219, 94, 94)]ARC #2 NAME HERE[/COLOR][/anchor]
[COLOR=rgb(145, 255, 53)][anchor]ARC1[/anchor][/COLOR]


[SIZE=18px][B] ARC #1 NAME HERE[/B][/SIZE]
Description here
[/CENTER]
[COLOR=rgb(219, 94, 94)]➣[/COLOR][COLOR=rgb(41, 105, 176)] [B]| FACTION |[/B][/COLOR] [B][COLOR=rgb(226, 80, 65)]| PRIVATE |[/COLOR] [COLOR=rgb(243, 121, 52)]| IC BLOG | [/COLOR][/B]Thread Title & Link [B] [[/B][COLOR=rgb(97, 189, 109)][B]IN PROGRESS[/B][/COLOR]/[COLOR=rgb(44, 130, 201)][B]COMPLETE[/B][/COLOR]/[COLOR=rgb(250, 197, 28)][B]INCOMPLETE[/B][/COLOR][B]][/B] - Description

Examples:

[COLOR=rgb(219, 94, 94)]➣[/COLOR] [B][COLOR=rgb(226, 80, 65)]| PRIVATE |[/COLOR][/B] [URL='https://www.starwarsrp.net/threads/ripped-seams.23278/']Ripped Seams[/URL] [B][[COLOR=rgb(44, 130, 201)]COMPLETE[/COLOR]] - [/B]Auswyn meets Cat Van-Derveld for the first time.

[COLOR=rgb(219, 94, 94)]➣ [/COLOR][B][COLOR=rgb(76, 175, 80)]| PUBLIC |[/COLOR] [/B][URL='https://www.starwarsrp.net/threads/one-big-dysfunctional-family-pm-first-invite.23238/']One Big, Dysfunctional Family[/URL] [B][[COLOR=rgb(44, 130, 201)]COMPLETE[/COLOR]] - [/B]Auswyn meets the family of her master/lover, Cat Van-Derveld.

[CENTER][anchor=#STORY][SIZE=10px][COLOR=rgb(219, 94, 94)]CLICK HERE TO RETURN TO TOP OF TAB[/COLOR][/SIZE][/anchor]
[COLOR=rgb(145, 255, 53)][anchor]ARC2[/anchor][/COLOR]


[SIZE=18px][B]ARC #2 NAME HERE[/B][/SIZE]
Description here
[/CENTER]
[COLOR=rgb(219, 94, 94)]➣[/COLOR][COLOR=rgb(41, 105, 176)] [B]| FACTION |[/B][/COLOR] [B][COLOR=rgb(226, 80, 65)]| PRIVATE |[/COLOR] [COLOR=rgb(243, 121, 52)]| IC BLOG | [/COLOR][/B]Thread Title & Link [B] [[/B][COLOR=rgb(97, 189, 109)][B]IN PROGRESS[/B][/COLOR]/[COLOR=rgb(44, 130, 201)][B]COMPLETE[/B][/COLOR]/[COLOR=rgb(250, 197, 28)][B]INCOMPLETE[/B][/COLOR][B]][/B] - Description
[CENTER]

[anchor=#STORY][SIZE=10px][COLOR=rgb(219, 94, 94)]CLICK HERE TO RETURN TO TOP OF TAB[/COLOR][/SIZE][/anchor][/CENTER]
[/SLIDE][SLIDE_HEADER]Connections[/SLIDE_Header][COLOR=rgb(145, 255, 53)][anchor]CONNECTIONS[/anchor][/COLOR][SLIDE]
[CENTER][div='display: block; font-family: courier new; font-size: 2em; text-align: center;  -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']FACTION/GROUP NAME (change this one)[/DIV][/CENTER]
[TABLE]
[TR]
[TH][CENTER][B]Name[/B][/CENTER][/TH]

[TH][CENTER][B]Description[/B][/CENTER][/TH]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[/TABLE]
[CENTER]
[div='display: block; font-family: courier new; font-size: 2em; text-align: center; -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']FAMILY[/DIV][/CENTER]
[TABLE]
[TR]
[TH][CENTER][B]Name[/B][/CENTER][/TH]

[TH][CENTER][B]Description[/B][/CENTER][/TH]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[/TABLE]

[CENTER][div='display: block; font-family: courier new; font-size: 2em; text-align: center; -webkit-text-stroke: 1.5px #db5e5e; font-weight: bold; color: #000000']OTHER CONNECTIONS[/DIV][/CENTER]
[TABLE]
[TR]
[TH][CENTER][B]Name[/B][/CENTER][/TH]

[TH][CENTER][B]Description[/B][/CENTER][/TH]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD][PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[TR]
[TD]PLACEHOLDER[/TD]
[TD]PLACEHOLDER[/TD]
[/TR]
[/TABLE]

[CENTER][anchor=#CONNECTIONS][SIZE=10px][COLOR=rgb(219, 94, 94)]CLICK HERE TO RETURN TO TOP OF TAB[/COLOR][/SIZE][/anchor][/CENTER]
[/SLIDE][/tabs][/div][/div]

 

[Ilias Nytrau]

Look! I did a thing!

Left to right, these are:
Ichika Masudo
Vizion Trozky
Rik Perris
Toby Perris
Ares Kontar

Quick facts!

• The images used in the examples are the ones in the above characters' post and/or bio templates, and the one linked in the code spoiler is what I use for my default Discord avatar. Please do not reuse these images.
• These are accomplished entirely with the DIV BBCode and a little IMG BBCode.
• They can be used in bio templates/character sheets, post templates, or without any other templates behind them!

Here is the code!

Spoiler: Circular Image Div

[div=display: inline block; background-image:url(https://i.imgur.com/XZpxSrC.png); background-size: cover; background-repeat: no-repeat; background-position: center; border: 2px solid #8c1d01; filter: drop-shadow(0px 0px 6px #000000); box-shadow: 0px 0px 10px 2px #8c1d01 inset; border-radius: 50%; width: 200px; height: 200px; margin: auto; margin-right:15px; float: left; transform: rotate(0deg);][IMG width="5px"]https://i.imgur.com/VVVDHjr.png[/IMG][/div]

Editing the div code
WARNING: Do not touch the following part of the code under any circumstances:
[IMG width="5px"]https://i.imgur.com/VVVDHjr.png[/IMG]

• This is a transparent image that allows div coded images like these to appear. It acts as necessary content for the div.
• When editing the code with BBCode toggled ON, it appears as a small space that's 5px wide, between the div bracket and the closing [/div] - do not delete that space.
• You will have to toggle BBCode off if you cannot see that bit of BBCode.
  • To toggle BBCode on/off, use the square brackets button in the post editor - it's the button between the undo/redo arrows and the Save Draft button.
  • You will be able to tell that BBCode is toggled off if most of the editor controls are greyed out and un-usable.
• ALWAYS edit div code with BBCode toggled off, as much as possible. Use preview to check results.
  • Why? Toggling between BBCode on/off while editing template code can lead to the editor compensating for incomplete code (leading to duplication errors and such) if the slightest bracket or colon or ending tag or whatever is missing.
  • Be careful and stick to BBCode OFF while editing.

Spoiler: Necessary Edits — Changing the image + colours

You can use an image of any size, width, or height, but it's easiest if your image is square, and your character is in the centre of the image.

• You can change the image in the template by changing the link in this part of the code:
  • background-image:url(https://i.imgur.com/XZpxSrC.png);

You will need to adjust the border hex colour, and the box-shadow hex colour to what you want:

• Hex colour is a hash/pound followed by six alphanumeric digits e.g #000000 for black, #ffffff for white, and every colour in-between. You can add another two digits ( 0 to 99) to change the opacity of a colour.
• There's a good colour picker on google, just search colour picker
• Alternatively, the wikipedia page on Web Colours has tables of many colours, and beside each colour swatch, the corresponding hex code; it also has the colour names if that's what you prefer. Those will also work.

Spoiler: Situational Edits — Other Edits You May or May Not Need To Make

Reference site: MDN Web Docs on CSS properties - type in the filter at the top of the left sidebar to find pages for each of these properties if you want to know more.

Depending on the image you're using, you may need to adjust some things to get the image to display exactly how you want it to:

• background-size
  • If your image is displaying too small or too large for your liking:
    • You may need to change background-size from "cover" to pixels — as in 250px, for example — then change the number of pixels until the image looks the size you want it to be.
    • I've found that, for the dimensions of this circle (200px by 200px), a background-size between 200px and 300px seems to do the trick if "cover" isn't working out for you.
• background-position
  • If your image is off-centre and you don't want it that way:
    • If you need to move your image up or down, you'll need to add a percentage after "center" (eg: background-position: center 50%; ). Start with 50% and increase or decrease as needed.
    • If you need to move the image left or right, then "center" has to become a percentage, and up/down can either be another percentage or "center", depending on what you need. Start with 50% and increase or decrease as needed.
• transform
  • If you need to rotate the image slightly in one direction or another:
    • change 0deg to a positive number (for example, 25deg) for clockwise rotation.
    • change 0deg to a negative number (such as -25deg) for counter-clockwise rotation.
• float & margins
  • If you didn't know, the margin property dictates the space between the border of the template and things outside of the border of the template.
  • By default, this template is set to float: left, with margin-right: 15px so text ends up to the right of it and not right up against it.
  • If you want it to float on the right, then change 'float: left' to 'float: right', and change margin-right into margin-left.
  • If you just want the image to sit centred in your template, then get rid of float and margin-right / margin-left.
    • Leave margin: auto alone - the 'auto' value automatically positions the div to centre, if there are no float or directional margin properties present.

Any Questions?
Shoot me a DM on Discord (I can be reached faster there, unless I'm asleep) or DM me here on the site!