Raziel
Dark Jedi Spymaster
With a lot of help from
Kyra Perl
and
Sasmay Cull
's better half I've worked up quite a neat basic biography template.
It works on mobile view! Try it out. Nearly every biography I've seen with tabs and multiple panels goes to hell on mobile. Through a happy accident and the paddings set on the div's this will present a nice infobox full width on most mobile devices.
Below I've got a version for Silver Jedi, Agents of Chaos and Sith Empire (because I wanted to show how flexible it is.
I'll break down a few bits to change:
This image is the header, I've used faction logos
This is the main pane. The image is the backdrop. The rgba section does an overlay of an RGB colour so the text is legible.
This is the infobox. Choose three colours for the linear-gradient that make sense. Choose a border colour that matches. Then the image is your character's infobox image
This is the image for the bottom of the infobox. I've chosen some faction themed ones below.
And here is how it looks on mobile layout:
It works on mobile view! Try it out. Nearly every biography I've seen with tabs and multiple panels goes to hell on mobile. Through a happy accident and the paddings set on the div's this will present a nice infobox full width on most mobile devices.
Below I've got a version for Silver Jedi, Agents of Chaos and Sith Empire (because I wanted to show how flexible it is.
I'll break down a few bits to change:
Code:
[CENTER][div=margin-bottom:-65px;][IMG]https://i.imgur.com/u1hJDU7.png[/IMG][/div][/CENTER]
Code:
[div="max-width: 1000px; background:url('https://i.imgur.com/Ei6kx0l.png'); background-repeat: repeat-y; box-shadow: 10px 30px 50px 10px #000000; border: 2px solid #000000; border-radius: 0px 0px 15px 15px;"][div="max-width: 1000px; border-radius: 0px 0px 15px 15px; background: rgba(56, 40, 40, 0.80); padding-top:10px;padding-left: 30px; padding-right: 30px; padding-bottom: 20px; "]
Code:
[float=right][div=margin: auto; padding: 0px; max-width: 300px; background:linear-gradient( #251a1a, #441313, #580b02); border: 3px solid #d19b3e; border-radius: 7px 7px 7px 7px; position: relative; color: #A9A9A9; font-family: 'calibri',sans-serif; padding-left: 5px; padding-right: 5px; ]
[CENTER][IMG]https://i.imgur.com/Q6YSamm.png[/IMG][/CENTER]
[div=display: block; font-size: 2em; text-align: center; font-weight: bold; color: #9d9d9d; margin-top: -10px;]NAME[/div]
This is the infobox. Choose three colours for the linear-gradient that make sense. Choose a border colour that matches. Then the image is your character's infobox image
Code:
[/TABLE]
[CENTER][IMG]https://i.imgur.com/bvU6aHX.png[/IMG][/CENTER]
[/div][/float]
This is the image for the bottom of the infobox. I've chosen some faction themed ones below.
And here is how it looks on mobile layout:
Last edited: