[042] the answer to the universe is floating sidebars ✔

[aesthetics]

Like having a ridiculous amount of info in one place? Like it when you can still view at the lovely face of your character while scrolling through walls of text and inventories? Well, that's exactly what this is for! Add as many different informational sections as you need for your character while enjoying a tasteful side-bar. This also functions as a menu where you can jump to new sections within the page, or do double-duty as navigation by linking to other pages on your journal.

See below for a live preview!

❝ I’m like an iPhone, it’s going to be worse versions of this every year, plus I get super hot in the middle of the afternoon for no reason. ❞
― John Mulaney

Name Morticia Addams

Age Ageless

Birthdate April 1

Star Sign Aries

Gender Female

Canon Real Life

Canon Point 2020 (unfortunately)

Another Field More info

Another Field More info

Another Field Interesting info

Yet another Field The best response

good questioneven more info

Personality

Nunc vitae placerat justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sollicitudin molestie mattis. Vivamus ultrices eros magna, sed tristique turpis mollis at. Donec elementum eros non nunc venenatis ullamcorper. Maecenas blandit justo nisl, eget lobortis tellus convallis nec. Donec luctus quam ut sodales ornare. Nullam dictum ipsum non erat interdum, id fringilla purus venenatis. Nulla non auctor orci. Aliquam felis lacus, placerat in eros quis, malesuada lobortis tellus.

Nam diam orci, facilisis vitae lobortis nec, tincidunt non ligula. Sed consectetur posuere sem non fringilla. Nullam varius consectetur varius. Donec mattis urna nec dignissim elementum. Pellentesque dignissim vestibulum odio. Duis feugiat risus vel libero ullamcorper dictum. Aliquam eu ligula at quam convallis fringilla euismod sed velit. Aliquam iaculis, diam id sagittis fermentum, erat tellus blandit mi, non vulputate mi sem id magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ullamcorper est at ante tristique luctus. Sed ornare pharetra dui vel maximus. Nam id lobortis justo, sit amet euismod massa. Aliquam sed sem eu libero sollicitudin laoreet. Donec facilisis lorem felis, sed semper diam condimentum congue.

Appearance

Nunc vitae placerat justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sollicitudin molestie mattis. Vivamus ultrices eros magna, sed tristique turpis mollis at. Donec elementum eros non nunc venenatis ullamcorper. Maecenas blandit justo nisl, eget lobortis tellus convallis nec. Donec luctus quam ut sodales ornare. Nullam dictum ipsum non erat interdum, id fringilla purus venenatis. Nulla non auctor orci. Aliquam felis lacus, placerat in eros quis, malesuada lobortis tellus.

Inventory

Important Object ▫ Maecenas blandit justo nisl, eget lobortis tellus convallis nec. Donec luctus quam ut sodales ornare. Nullam dictum ipsum non erat interdum, id fringilla purus venenatis.

Slightly less important item ▫ Aliquam eu ligula at quam convallis fringilla euismod sed velit. Aliquam iaculis, diam id sagittis fermentum, erat tellus blandit mi, non vulputate mi sem id magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ullamcorper est at ante tristique luctus.

Most important ▫ Donec elementum consectetur ipsum non suscipit. Sed egestas porttitor leo ac fermentum.

Other Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quisque sed viverra augue. Pellentesque a odio ac erat vulputate lobortis. Nulla molestie justo id neque porta maximus. Ut iaculis dui a neque congue congue. Cras ultricies, nibh ultrices rhoncus euismod, purus sem pulvinar diam, et congue arcu velit at quam. Ut ut urna sollicitudin, volutpat nibh vel, scelerisque ipsum. Nullam vitae ullamcorper mi, vel placerat elit.

Quisque et ipsum eros. Mauris molestie maximus lacinia. Cras consequat orci quis enim iaculis scelerisque. Ut et gravida elit. Integer ut elit a odio pellentesque congue at quis est. Duis non rhoncus ante. Proin et euismod risus, in scelerisque mi. Proin congue, felis sed congue tempus, libero odio lacinia nunc, et lobortis massa risus non erat.

Timeline

Important Events
► July 5, 2020 Thread. Mauris vel lacinia orci. Vivamus laoreet at enim ac gravida. Sed mollis mi massa, in lobortis mi tempus id.	◄ Month 00, 0000 Thread. Sed volutpat ligula urna, eu auctor felis mattis ut.
► Month 00, 0000 Thread. Nunc ultrices ante erat, a tincidunt lorem condimentum eget.	◄ Month 00, 0000 Thread. Donec pharetra elit et nunc sollicitudin vehicula. Aenean vehicula dolor et tincidunt egestas. Maecenas sit amet rhoncus dui. Vestibulum dapibus suscipit lectus, ac aliquam eros.

Back to top

Personality
Appearance
Inventory
Other Info
Timeline
Other Link
Yet another link

Nunc vitae placerat justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sollicitudin molestie mattis. Vivamus ultrices eros magna, sed tristique turpis mollis at. Donec elementum eros non nunc venenatis ullamcorper. Maecenas blandit justo nisl, eget lobortis tellus convallis nec. Donec luctus quam ut sodales ornare. Nullam dictum ipsum non erat interdum, id fringilla purus venenatis. Nulla non auctor orci. Aliquam felis lacus, placerat in eros quis, malesuada lobortis tellus.

( CODED BY BOOTYCALL )

Instructions

The Code

I always recommend using a text-editing program for ease of use when adjusting codes! I like using [ BRACKETS ] which is a free program that really helps with visualizing different tags and markers by automatically color-coding.

Please read the instructions for information on how to piece together multiple parts of the code. They are broken up for ease of use in customization.

Header (Default) <!--HEADER--> <raw-code><center><div style="box-sizing:content-box;position: relative; width: 800px; margin: 0px auto; padding: 0; align-items: center; text-align: left; border: solid 3px #000; border-radius: 15px; box-shadow: 4px 4px 0px #ccc, 7px 7px 4px #ddd; background: url(https://wallpaperset.com/w/full/f/0/8/374114.jpg); background-repeat: repeat-y; background-size: 100%;"> <a name="top"></a> <div style="box-sizing:content-box;width: 580px; display: table-cell; border-radius: 15px 0px 0px 15px"> <!--HEADER-->

Header (Custom BG) <!--HEADER--> <raw-code><center><div style="box-sizing:content-box;position: relative; width: 800px; margin: 0px auto; padding: 0; align-items: center; text-align: left; border: solid 3px #000; border-radius: 15px; box-shadow: 4px 4px 0px #ccc, 7px 7px 4px #ddd; background: url(https://images2.imgbox.com/2a/ac/YETe1Cyf_o.png), linear-gradient(to right, rgba(255,255,255,0.4),rgba(255,255,255,0.4)), url( **BACKGROUNDIMGURL** ); background-repeat: repeat-y, repeat, repeat; background-size: 100%, 100%, 50%;"> <a name="top"></a> <div style="box-sizing:content-box;width: 580px; display: table-cell; border-radius: 15px 0px 0px 15px"> <!--HEADER-->

Top Profile <!--TOP PROFILE--> <div style="box-sizing:content-box;position: relative; z-index: 50; top: 20px; width: 600px; height: 170px; background: url(https://images2.imgbox.com/2e/94/WM4rzxgH_o.png), #222; background-repeat: repeat-x; background-position: -13px 0px; border-top: solid 3px #000; border-bottom: solid 3px #000; box-shadow: 0px 1px 2px #555, 0px 5px 4px #aaa; color: #fff;"> <div style="box-sizing:content-box;position: relative; top: 20px; left: 10px; float: left; width: 180px; height: 130px; background: url( **TOPIMAGEURL** ); background-size: 300px; background-position: -10px 0px; outline: solid 1px #777; outline-offset: -10px; border: solid 1px #666;"></div> <div style="box-sizing:content-box;position: relative; top: 0; left: 20px; float: left; height: 170px; width: 380px; overflow: hidden;"> <div style="box-sizing:content-box;display: table-row; "><div style="box-sizing:content-box;position: relative; top: 15px; width: 380px; height: 140px; overflow: hidden; display: table-cell; vertical-align: middle; text-align: center;"> ❝ Quote quote quote ❞<br/> <span style="margin-top: 5px; font-size: 11px; float: right;"> ― Speaker</span> </div></div> </div> </div> <div style="box-sizing:content-box;position: relative; z-index: 20; margin: 15px 0 0 0; width: 580px; padding: 10px; "> <!--TOP PROFILE--> <!--CONTENT-->

Footer <!--CONTENT--> <!--FOOTER--> </div> <div style="box-sizing:content-box;position: relative; z-inded: 20; width: 600px; height: 20px; margin: 0 0 0 0; padding: 4px 0 0 0; background: #222; text-align: center; color: #ddd; border-top: solid 2px #000; border-radius: 0 0 0 12px"><a href="#top" style="text-decoration: none; text-transform: uppercase; color: #bbb; font: bold 10px sans-serif;">Back to top</a></div> </div> <!--MENU--> <div style="box-sizing:content-box;position: relative; z-index: 60; display: table-cell; vertical-align: top; width: 170px; height: 100%; background: url(https://images2.imgbox.com/e3/c1/1p0C7ieg_o.png), #222; background-repeat: repeat-y; background-position: 0px -12px; border: solid 1px #000; box-shadow: -1px 0px 3px #111, 2px 0px 3px #ccc;"> <div style="box-sizing:content-box;position: -webkit-sticky; position: sticky; z-index: 70; top: 0; width: 170px; color: #fff;"> <div style="box-sizing:content-box;position: relative; top: 15px; left: 23px; width: 120px; height: 130px; background: url( **SIDEBARIMGURL** ); background-size: 300px; background-position: -60px 0px; outline: solid 1px #777; outline-offset: -10px; border: solid 1px #666;"></div> <div style="box-sizing:content-box;position: relative; top: 25px; left: 18px; width: 135px; text-align: justify; font-size: 10px; line-height: 10px;"> <div style="box-sizing:content-box; letter-spacing: 0.1em; text-transform: uppercase; font: bold 9px sans-serif; text-align: right;"> <!--Repeat each line for the number of links you want. Links can be to different sections within this page or to other pages on your journal--> <a href="#persona" style="text-decoration: none; color: #eee;">Personality</a><br/> <a href="#appear" style="text-decoration: none; color: #eee;">Appearance</a><br/> <a href="#name3" style="text-decoration: none; color: #eee;">Link 3</a><br/> <a href="#name4" style="text-decoration: none; color: #eee;">Link 4</a><br/> <a href="#name5" style="text-decoration: none; color: #eee;">Link 5</a><br/> <a href="URL" style="text-decoration: none; color: #eee;">Journal Page Link</a><br/> <a href="URL" style="text-decoration: none; color: #eee;">Journal Page Link</a><br/> </div><br/> Nunc vitae placerat justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sollicitudin molestie mattis. <!--Add text here if you want--> </div> </div> </div> <!--MENU--> </div> </center></raw-code></cut> <!--FOOTER-->

The following are different section options:

CONTENT: Profile Card <!--SECTION START--> <div style="box-sizing:content-box;position: relative; top: 20px; left: 15px; width: 530px; margin: 0 0 40px 0; padding: 10px; background: #fff; border: solid 1px #ccc; font-size: 11px;"> <div style="box-sizing:content-box;width: 260px; height: 250px; overflow: none;"> <!--Repeat each div as many times as necessary to cover the info you want to portray--> <div style="box-sizing:content-box;width: 250px; display: table-row; height: 18px; border-bottom: solid 1px #ccc; font: bold 10px sans-serif; letter-spacing: 0.2em; text-transform: uppercase;">Name <span style="float: right; font: 11px sans-serif; text-transform: none; padding-left: 20px; letter-spacing: 0.1em;">Character Name</span></div> <div style="box-sizing:content-box;width: 250px; display: table-row; height: 18px; font: bold 10px sans-serif; letter-spacing: 0.2em; text-transform: uppercase;">Age <span style="float: right; font: 11px sans-serif; text-transform: none; padding-left: 20px; letter-spacing: 0.1em;">00</span></div> <div style="box-sizing:content-box;width: 250px; display: table-row; height: 18px; font: bold 10px sans-serif; letter-spacing: 0.2em; text-transform: uppercase;">Value <span style="float: right; font: 11px sans-serif; text-transform: none; padding-left: 20px; letter-spacing: 0.1em;">Value</span></div> <div style="box-sizing:content-box;width: 250px; display: table-row; height: 18px; font: bold 10px sans-serif; letter-spacing: 0.2em; text-transform: uppercase;">Value <span style="float: right; font: 11px sans-serif; text-transform: none; padding-left: 20px; letter-spacing: 0.1em;">Value</span></div> <div style="box-sizing:content-box;width: 250px; display: table-row; height: 18px; font: bold 10px sans-serif; letter-spacing: 0.2em; text-transform: uppercase;">Value <span style="float: right; font: 11px sans-serif; text-transform: none; padding-left: 20px; letter-spacing: 0.1em;">Value</span></div> <div style="box-sizing:content-box;width: 250px; display: table-row; height: 18px; font: bold 10px sans-serif; letter-spacing: 0.2em; text-transform: uppercase;">Value <span style="float: right; font: 11px sans-serif; text-transform: none; padding-left: 20px; letter-spacing: 0.1em;">Value</span></div> </div> <div style="box-sizing:content-box;position: relative; float: right; margin-top: -252px; width: 250px; height: 250px; border: solid 1px #ccc; background: url( **PROFILECARDIMGURL** ); background-size: cover; background-position: center; outline: solid 1px #777; outline-offset: -10px;"></div> </div>
CONTENT: Basic Text <!--SECTION START--> <a name="NAME1"></a><div style="box-sizing:content-box;width: 580px; height: 20px; margin: 0 0 0 -10px; border-top: solid 2px #000; border-bottom: solid 2px #000; box-shadow: 0px 1px 0px #ccc, 0px 5px 2px #ddd; background: #222; text-align: right; color: #fff; font: bold 14px georgia, serif; padding: 5px 60px 0 0;">**SECTIONTITLE**</div> <div style="box-sizing:content-box;position: relative; top: 20px; left: 15px; width: 530px; margin: 0 0 40px 0; padding: 10px; background: #fff; border: solid 1px #ccc; font-size: 11px;"> Put your content here. </div>
CONTENT: List <!--SECTION START--> <a name="NAME3"></a><div style="box-sizing:content-box;width: 580px; height: 20px; margin: 0 0 0 -10px; border-top: solid 2px #000; border-bottom: solid 2px #000; box-shadow: 0px 1px 0px #ccc, 0px 5px 2px #ddd; background: #222; text-align: right; color: #fff; font: bold 14px georgia, serif; padding: 5px 60px 0 0;">**SECTIONTITLE**</div> <div style="box-sizing:content-box;position: relative; top: 20px; left: 15px; width: 530px; margin: 0 0 40px 0; padding: 10px; background: #fff; border: solid 1px #ccc; font-size: 11px;"> <!--List Div--><div style="box-sizing:content-box;position: relative; left: 25px; width: 505px;"> <!--Repeat each line as many times as you need for different items--> <span style="margin: 0 0 0 -25px; font: bold 11px sans-serif; text-transform: uppercase; letter-spacing: 0.2em;">List 1</span> ▫ Description <br/><br/> <span style="margin: 0 0 0 -25px; font: bold 11px sans-serif; text-transform: uppercase; letter-spacing: 0.2em;">List 2</span> ▫ Description<br/><br/> <span style="margin: 0 0 0 -25px; font: bold 11px sans-serif; text-transform: uppercase; letter-spacing: 0.2em;">List 3</span> ▫ Description </div> </div>
CONTENT: Text w/ Image <!--SECTION START--> <a name="NAME2"></a><div style="box-sizing:content-box;width: 580px; height: 20px; margin: 0 0 0 -10px; border-top: solid 2px #000; border-bottom: solid 2px #000; box-shadow: 0px 1px 0px #ccc, 0px 5px 2px #ddd; background: #222; text-align: right; color: #fff; font: bold 14px georgia, serif; padding: 5px 60px 0 0;">**SECTIONTITLE**</div> <div style="box-sizing:content-box;position: relative; top: 20px; left: 15px; width: 530px; margin: 0 0 40px 0; padding: 10px; background: #fff; border: solid 1px #ccc; font-size: 11px;"> <div style="box-sizing:content-box;position: relative; float: left; width: 150px; height: 150px; margin: 0 10px 5px 0; border: solid 1px #ccc; background: url( **YOURIMAGEURL** ); background-size: cover; background-position: center; outline: solid 1px #777; outline-offset: -10px;"></div> Place your content here. </div>
CONTENT: Timeline <!--SECTION START--> <a name="NAME5"></a><div style="box-sizing:content-box;width: 580px; height: 20px; margin: 0 0 0 -10px; border-top: solid 2px #000; border-bottom: solid 2px #000; box-shadow: 0px 1px 0px #ccc, 0px 5px 2px #ddd; background: #222; text-align: right; color: #fff; font: bold 14px georgia, serif; padding: 5px 60px 0 0;">**SECTIONTITLE**</div> <div style="box-sizing:content-box;position: relative; top: 20px; left: 15px; width: 530px; margin: 0 0 40px 0; padding: 10px; background: #fff; border: solid 1px #ccc; font-size: 11px;"> <!--TIMELINE--><table style="position: relative; max-width: 520px; margin: 0 auto;" cellpadding="0" cellspacing="0" border="0"> <tbody style="border: none;"><tr><td colspan="2" style="font: bold 20px sans-serif; text-shadow: 2px 2px 3px #ddd; text-transform: uppercase; letter-spacing: 0.2em;"><center>**TIMELINENAME**</center></td></tr> <!--To add new paired sections to your timeline, copy EVERYTHING from the start of this <TR> (TABLE ROW) to the end </TR>. --> <!--ROWSTART--><tr> <td style="border-right: solid 5px #222;"> <div style="box-sizing:content-box;float: left; position: relative; z-index: 5; position: relative; background-color: inherit; width: 50%;"> <span style="position: relative; z-index: 8; left: 180px; top: 35px; color: #222; font-size: 26px; text-shadow: 2px 2px 3px #ddd;">►</span> <!--TIMELINE DOT--><div style="box-sizing:content-box;position: relative; z-index: 7; left: 210px; top: 0px; width: 20px; height: 20px; background-color: #fff; border: solid 5px #ccc; border-radius: 20px;"></div> <!--EVENT BUBBLE--><div style="box-sizing:content-box;padding: 10px 15px; background-color: #fff; position: relative; z-index: 6; left: -30px; top: -30px; border-radius: 6px; border: solid 3px #222; color: #000; width: 180px; font-size: 10px; line-height: 12px; box-shadow: 2px 2px 3px #ddd;"> <div style="box-sizing:content-box;width: 100%; text-align: right; border-bottom: dashed 1px #ccc; font: bold 12px sans-serif; text-transform: uppercase; letter-spacing: 0.1em; color: #555; margin: 0 0 5px 0;">July 5, 2020</div> <a href="URL" style="color: #0059b2; font: bold 11px sans-serif; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;">Thread</a>. DESC </div> </div> </td> <td> <div style="box-sizing:content-box;float: left; position: relative; z-index: 5; position: relative; top: 70px; background-color: inherit; width: 50%;"> <span style="position: relative; z-index: 8; left: 10px; top: 35px; color: #222; font-size: 26px; text-shadow: -2px 2px 3px #ddd;">◄</span> <!--TIMELINE DOT--><div style="box-sizing:content-box;position: relative; z-index: 7; left: -23px; top: 0px; width: 20px; height: 20px; background-color: #fff; border: solid 5px #ccc; border-radius: 20px;"></div> <!--EVENT BUBBLE--><div style="box-sizing:content-box;padding: 10px 15px; background-color: #fff; position: relative; z-index: 6; left: 30px; top: -30px; border-radius: 6px; border: solid 3px #222; color: #000; width: 180px; font-size: 10px; line-height: 12px; box-shadow: -2px 2px 3px #ddd;"> <div style="box-sizing:content-box;width: 100%; text-align: left; border-bottom: dashed 1px #ccc; font: bold 12px sans-serif; text-transform: uppercase; letter-spacing: 0.1em; color: #555; margin: 0 0 5px 0;">Month 00, 0000</div> <a href="URL" style="color: #0059b2; font: bold 11px sans-serif; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;">Thread</a>. DESC </div> </div> </td></tr> <!--ROWSTOP--> <tr><td style="border-right: solid 5px #222; border-bottom: solid 1px #ccc; height: 50px; margin: 0 0 25px 0;"></td><td style="border-bottom: solid 1px #ccc; "></td></tr> </tbody></table> <!--TIMELINE--> </div>

Instructions

Please follow the instructions below carefully. These should cover all of the requirements you will need to be aware of in order to successfully use the code. However, if you have any questions or find any functionality issues, please let me know!

• First place the <!--HEADER-->, <!--TOP PROFILE-->, and <!--FOOTER--> codes together one page. This is the skeleton of the code. Any and all infromation sections will go between the two <!--CONTENT--> markers that begin after the TOP PROFILE and before the FOOTER. The start of each section will have the label <!--SECTION START-->


• The floating sidebar is located in the <!--FOOTER--> under the tag <!--MENU-->. This is where you will add more links to content either on this page or to other pages on your journal for ease of access.


• Every section should have an associated <a name="VALUE"> where the value is unique to the section you want it to jump to. I.E. For the Personality used <a name="persona"> on the section title. The corresponding link in the menu goes to <a href="#persona">. It doesn't matter what you use as long as they are uniue. (1, 2, 3, etc. are all unique)


• Add an image next to the top quote by replacing **TOPIMAGEURL** with the URL of your image.


• Add an image to the sidebar by replacing **SIDEBARIMGURL** with the URL of your image.


• All paragraphs must use an HTML break as this format is in raw-code. That means using <p> or <br/> between paragraphs or lines.


• The different types of sections are all 100% optional! If you don't need anything fancy I recommend using the Basic Text content section type. Customize however you like!
  • For all sections, change the header title by updating **SECTIONTITLE** with your text.
  
  
  • If you choose the CUSTOM BG header and want something other than the white Victorian flower background, replace **BACKGROUNDIMGURL** with the URL of your image. Light colors are suggested but you're free to use whateer you want. If you image needs to repeat on the x or y axis, be sure to edit the third value in the background-repeat property.
  
  
  • If you use the PROFILE CARD, add an image by replacing **PROFILECARDIMGURL** with the URL of your image.
  
  
  • If you use the TEXT W/ IMAGE, add an image by replacing **YOURIMAGEURL** with the URL of your image.
  
  
  • If you use the TIMELINE code, update the timelie name by changin **TIMELINENAME** with your text. To add more nodes on your timeline, copy and paste everything from the start of the indicated <tr> to the ending </tr>. These are indicated with <!--ROWSTART--> to <!--ROWSTOP-->
  
  


• Please keep the code at the bottom so others can find out where to get this as well!

Tweaking & Customization

Make this code your own! Here are some tips and tricks to adjusting different variables.

• Find and replace the color #0059b2 to change the color of in-text links.


• Move your image within any div layer by adjusting the background-position property from center to any other direction or value. Please visit [ this page ] for instructions and options to how to manipulate this if you are unfamiliar.


• You can change the size of your image in the div layer by adjusting the background-size property from cover to any other size. Please visit [ this page ] for instructions and options to how to manipulate this if you are unfamiliar


• You can adjust the inner border on the images by editing outline-offset: -10px to a different pixel value (negative values bring it within the existing div layer, positive values push it out), or removing it entirely if you prefer not to have it.