[60] Detailed Muselist

[lina_trinch]

Active Homeless CREDIT

Character Name

Canon

🟊 🟊 🟊 🟊 🞄

Link Link Link Link

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic deleniti nemo quam mollitia earum eius id eaque veniam consequuntur nobis. Voluptatibus sequi quidem aut impedit ab tempore ipsa expedita dolores.

Character Name

Canon

🟊 🟊 🟊 🟊 🞄

Link Link Link Link

Character Name

Canon

🟊 🟊 🟊 🟊 🞄

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic deleniti nemo quam mollitia earum eius id eaque veniam consequuntur nobis. Voluptatibus sequi quidem aut impedit ab tempore ipsa expedita dolores.

Character Name

Canon

🟊 🟊 🟊 🟊 🞄

Link Link Link Link

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic deleniti nemo quam mollitia earum eius id eaque veniam consequuntur nobis. Voluptatibus sequi quidem aut impedit ab tempore ipsa expedita dolores.

Code:
<div style="margin: auto; width: 600px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; display: flex; flex-direction: row; justify-content: space-between; color: #000; cursor: default;"> <!--sidebar--> <div style="width: 150px; display: flex; flex-direction: column; text-align: center; letter-spacing: 1px; font-weight: bold;"> <a href="#active" style="width: 100%; padding: 6px 0; margin-bottom: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: #000; background: #fff; border: 1px solid #ddd; text-decoration: none;"> Active </a> <a href="#homeless" style="width: 100%; padding: 6px 0; margin-bottom: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: #000; background: #fff; border: 1px solid #ddd; text-decoration: none;"> Homeless </a> <!--ADD MORE LINKS ABOVE THIS LINE--> <!--credit--><!--will open in a new tab--> <a href="https://killthecake.dreamwidth.org/" style="width: 70%; padding: 6px 0; margin: 0 auto 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: #aaa; background: #fff; border: 1px solid #ddd; text-decoration: none; font-size: 8px;" target="_blank"> CREDIT </a> </div> <!--main--> <div style="width: 425px; height: 400px; overflow: hidden;"> <!--ACTIVE PAGE--> <a name="active" style="display: block; height: 0px;"></a> <div style="width: 100%; height: 400px; display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <!--block--><!--with links & text--> <details style="width: 100%; background: #fff; border: 1px solid #ddd; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px; margin-bottom: 10px;"> <!--header--> <summary style="width: 100%; display: flex; flex-direction: row;"> <div style="background: center/cover url('IMAGE_URL'); width: 75px; height: 75px; margin-right: 10px;"></div> <div style="display: flex; flex-direction: column; justify-content: center; font-weight: bold;"> <div style="font-size: 25px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: #000;">Character Name</div> <div style="color: #000;">Canon</div> <div style="color: #000;">🟊 🟊 🟊 🟊 🞄</div> </div> </summary> <!--info--> <div style="width: 100%; max-height: 75px; overflow-y: auto; text-align: justify; font-size: 10px; color: #000;"> <!--links--> <div style="display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; text-align: center;"> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> </div> <!--text--> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic deleniti nemo quam mollitia earum eius id eaque veniam consequuntur nobis. Voluptatibus sequi quidem aut impedit ab tempore ipsa expedita dolores. </div> </details> <!--end block--> <!--block--><!--with just links--> <details style="width: 100%; background: #fff; border: 1px solid #ddd; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px; margin-bottom: 10px;"> <!--header--> <summary style="width: 100%; display: flex; flex-direction: row;"> <div style="background: center/cover url('IMAGE_URL'); width: 75px; height: 75px; margin-right: 10px;"></div> <div style="display: flex; flex-direction: column; justify-content: center; font-weight: bold;"> <div style="font-size: 25px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: #000;">Character Name</div> <div style="color: #000;">Canon</div> <div style="color: #000;">🟊 🟊 🟊 🟊 🞄</div> </div> </summary> <!--info--> <div style="width: 100%; max-height: 75px; overflow-y: auto; text-align: justify; font-size: 10px;"> <!--links--> <div style="display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; text-align: center;"> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> </div> </div> </details> <!--end block--> <!--block--><!--with just text--> <details style="width: 100%; background: #fff; border: 1px solid #ddd; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px; margin-bottom: 10px;"> <!--header--> <summary style="width: 100%; display: flex; flex-direction: row;"> <div style="background: center/cover url('IMAGE_URL'); width: 75px; height: 75px; margin-right: 10px;"></div> <div style="display: flex; flex-direction: column; justify-content: center; font-weight: bold;"> <div style="font-size: 25px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: #000;">Character Name</div> <div style="color: #000;">Canon</div> <div style="color: #000;">🟊 🟊 🟊 🟊 🞄</div> </div> </summary> <!--info--> <div style="width: 100%; max-height: 75px; overflow-y: auto; text-align: justify; font-size: 10px; color: #000;"> <!--text--> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic deleniti nemo quam mollitia earum eius id eaque veniam consequuntur nobis. Voluptatibus sequi quidem aut impedit ab tempore ipsa expedita dolores. </div> </details> <!--end block--> <!--ADD MORE BLOCKS ABOVE THIS LINE--> </div> <!--end page--> <!--page--> <a name="homeless" style="display: block; height: 0px;"></a> <div style="width: 100%; height: 400px; display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <!--block--><!--with links & text--> <details style="width: 100%; background: #fff; border: 1px solid #ddd; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px; margin-bottom: 10px;"> <!--header--> <summary style="width: 100%; display: flex; flex-direction: row;"> <div style="background: center/cover url('IMAGE_URL'); width: 75px; height: 75px; margin-right: 10px;"></div> <div style="display: flex; flex-direction: column; justify-content: center; font-weight: bold;"> <div style="font-size: 25px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic;">Character Name</div> <div style="color: #000;">Canon</div> <div style="color: #000;">🟊 🟊 🟊 🟊 🞄</div> </div> </summary> <!--info--> <div style="width: 100%; max-height: 75px; overflow-y: auto; text-align: justify; font-size: 10px; color: #000;"> <!--links--> <div style="display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; text-align: center;"> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> <a href="URL" style="width: 30%; color: #000; text-decoration: none; background: #fafafa; border: 1px solid #ddd; padding: 2px 0; margin-top: 4px;"> Link </a> </div> <!--text--> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic deleniti nemo quam mollitia earum eius id eaque veniam consequuntur nobis. Voluptatibus sequi quidem aut impedit ab tempore ipsa expedita dolores. </div> </details> <!--end block--> <!--ADD MORE BLOCKS ABOVE THIS LINE--> </div> <!--end page--> <!--ADD MORE PAGES ABOVE THIS LINE--> </div> </div>

❖ This code was released early on the Patreon! Feel free to check out things over there if you want early codes or some exclusive content. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ Every character box is actually a dropdown. Click on them and you'll get a space to include links and a blurb however long you may like. You can also include as many character blocks as you want. The code has a defined height and will start scrolling once you hit it. ❖ The "Active" and "Homeless" links on the sidebar are for different pages of the code. You can include as many of these pages as you want. Just copy/paste the blocks of code that are already indicated. And remember to never let your anchor link keywords repeat or include only a character that's not a letter. Ctrl+F & Replace: ❖ IMAGE_URL - Add whatever image you like here. I used my own journal's icons in the example. ❖ Character Name/Canon/🟊 🞄 - Placeholder text for self-explanatory stuff. ❖ URL - Each link's URL. ❖ Link - Each link's placeholder text. ❖ Lorem ipsum - Blurb text placeholder. #fff Backgrounds #fafafa Link backgrounds #ddd Borders #aaa Credit link text #000 Text and links

Comments

[thearchy]

love the simplicity of this! currently using this for mine :)

[lina_trinch]

thank you!