[20] Holy Muselists, Batman!

[lina_trinch]

Details List Version

bruce wayne
batman

★★★✰✰
username

information

biography

open post

navigation

games

mask or menace

prismatica

deerington

Code:
<center> <!---Just have ONE center tag at the top of your entry's code. For any other blocks you use in the same entry, delete the center tag in those.---> <div style="display:inline-block;background: #fff;box-shadow: 0px 0px 5px;width: 300px;text-align:center;font-family:helvetica;font-variant:small-caps;font-weight:bold;padding-bottom: 8px;margin: 0 10px 20px 0;"> <div style="height: 150px;background: url(IMG);background-position:center;background-size:cover;"> <div style="color: #fff;font-family:helvetica;text-align:center;font-weight:bold;font-variant:small-caps;text-shadow: 2px 2px #000;font-size: 23px;letter-spacing: 5px;padding-top: 45px;"> character <br /><font style="font-size: 16px;letter-spacing: 10px;"> canon </font> </div> </div> <div style="height:4px; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0));"></div> <font style="letter-spacing: 8px;"> ★★★✰✰ </font><br /> <a href="URL" style="color:#000;text-decoration:none;letter-spacing: 5px;">username</a> <details style="border: 1px solid #999;width: 95%;margin: 5px 0 0 7px;background: rgba(0,0,0,0.1);"> <summary style="outline:none;cursor:pointer;margin: 5px;">information</summary> <a href="URL" style="color:#000;text-decoration:none;font-weight:normal;"><div style="background: rgba(0,0,0,0.1);margin: 5px;border: 1px solid #999;">link</div></a> <a href="URL" style="color:#000;text-decoration:none;font-weight:normal;"><div style="background: rgba(0,0,0,0.1);margin: 5px;border: 1px solid #999;">link</div></a> <a href="URL" style="color:#000;text-decoration:none;font-weight:normal;"><div style="background: rgba(0,0,0,0.1);margin: 5px;border: 1px solid #999;">link</div></a> <details style="margin-bottom: 5px;"> <summary style="cursor:pointer;outline:none;"> games</summary> <a href="URL" style="color:#000;text-decoration:none;font-weight:normal;"><div style="background: rgba(0,0,0,0.1);margin: 5px;border: 1px solid #999;">link</div></a> <a href="URL" style="color:#000;text-decoration:none;font-weight:normal;"><div style="background: rgba(0,0,0,0.1);margin: 5px;border: 1px solid #999;">link</div></a> <a href="URL" style="color:#000;text-decoration:none;font-weight:normal;"><div style="background: rgba(0,0,0,0.1);margin: 5px;border: 1px solid #999;">link</div></a> </details> </details> </div> <!--DONT REMOVE--> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #555;font-family:helvetica;font-variant:small-caps;font-size:10px;">killthecake</a>





Details Icons Version

bruce wayne
batman

★★★✰✰
username

Mask or Menace

Prismatica

Deerington

Code:
<center> <!---Just have ONE center tag at the top of your entry's code. For any other blocks you use in the same entry, delete the center tag in those.---> <div style="display:inline-block;background: #fff;box-shadow: 0px 0px 5px;width: 300px;text-align:center;font-family:helvetica;font-variant:small-caps;font-weight:bold;padding-bottom: 4px;margin: 0 10px 20px 0;"> <div style="height: 150px;background: url(IMG);background-position:center;background-size:cover;"> <div style="color: #fff;font-family:helvetica;text-align:center;font-weight:bold;font-variant:small-caps;text-shadow: 2px 2px #000;font-size: 23px;letter-spacing: 5px;padding-top: 45px;"> character <br /><font style="font-size: 16px;letter-spacing: 10px;"> canon </font> </div> </div> <div style="height:4px; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0));"></div> <font style="letter-spacing: 8px;"> ★★★✰✰ </font><br /> <a href="URL" style="color:#000;text-decoration:none;letter-spacing: 5px;">username</a> <br /> <a href="" style="margin-right: 25px;"><img src="https://img.icons8.com/material-outlined/24/000000/info.png"/></a> <a href="" style="margin-right: 25px;"><img src="https://img.icons8.com/material-outlined/24/000000/comments.png"/></a> <a href=""><img src="https://img.icons8.com/material-outlined/24/000000/search-in-list.png"/></a> <details style="font-weight:normal;letter-spacing: 2px;"> <summary style="outline:none;cursor:pointer;text-align:right;color:transparent;margin-right: 5px;"> <img src="https://img.icons8.com/material-outlined/24/000000/move-down.png"/> </summary> <center> <a href="URL" style="text-decoration:none;color: #fff;"><div style="background: url(GAME_IMG);height: 20px;background-position:center;margin: 5px;margin-top: 0;"> <div style="background: rgba(0,0,0,0.3);padding: 1px 0;text-shadow: 1px 1px #666;"> game </div> </div></a> <a href="URL" style="text-decoration:none;color: #fff;"><div style="background: url(GAME_IMG);height: 20px;background-position:center;margin: 5px;margin-top: 0;"> <div style="background: rgba(0,0,0,0.3);padding: 1px 0;text-shadow: 1px 1px #666;"> game </div> </div></a> <a href="URL" style="text-decoration:none;color: #fff;"><div style="background: url(GAME_IMG);height: 20px;background-position:center;margin: 5px;margin-top: 0;"> <div style="background: rgba(0,0,0,0.3);padding: 1px 0;text-shadow: 1px 1px #666;"> game </div> </div></a> </center> </details> </div> <!--DONT REMOVE--> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #555;font-family:helvetica;font-variant:small-caps;font-size:10px;">killthecake</a>





Icons Version

bruce wayne
batman

★★★✰✰
username

Code:
<center> <!---Just have ONE center tag at the top of your entry's code. For any other blocks you use in the same entry, delete the center tag in those.---> <div style="display:inline-block;background: #fff;box-shadow: 0px 0px 5px;width: 300px;text-align:center;font-family:helvetica;font-variant:small-caps;font-weight:bold;padding-bottom: 4px;margin: 0 10px 20px 0;"> <div style="height: 150px;background: url(IMG);background-position:center;background-size:cover;"> <div style="color: #fff;font-family:helvetica;text-align:center;font-weight:bold;font-variant:small-caps;text-shadow: 2px 2px #000;font-size: 23px;letter-spacing: 5px;padding-top: 45px;"> character <br /><font style="font-size: 16px;letter-spacing: 10px;"> canon </font> </div> </div> <div style="height:4px; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0));"></div> <font style="letter-spacing: 8px;"> ★★★✰✰ </font><br /> <a href="URL" style="color:#000;text-decoration:none;letter-spacing: 5px;">username</a> <br /> <a href="BIO_URL" style="margin-right: 25px;"><img src="https://img.icons8.com/material-outlined/24/000000/info.png"/></a> <a href="OPEN_URL" style="margin-right: 25px;"><img src="https://img.icons8.com/material-outlined/24/000000/comments.png"/></a> <a href="NAV_URL"><img src="https://img.icons8.com/material-outlined/24/000000/search-in-list.png"/></a> <br /> <center> <div style="letter-spacing: 25px;"> <a href="URL"><div style="display:inline-block;width: 24px; height: 24px;border-radius: 50px;background: url(GAME_IMG);background-position:center;background-size:cover;"></div></a> <a href="URL"><div style="display:inline-block;width: 24px; height: 24px;border-radius: 50px;background: url(GAME_IMG);background-position:center;background-size:cover;"></div></a> <a href="URL"><div style="display:inline-block;width: 24px; height: 24px;border-radius: 50px;background: url(GAME_IMG);background-position:center;background-size:cover;"></div></a> </div> </center> </div> <!--DONT REMOVE--> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #555;font-family:helvetica;font-variant:small-caps;font-size:10px;">killthecake</a>





Tabs Version

bruce wayne
batman

★★★✰✰
username

Code:
<center> <!---Just have ONE center tag at the top of your entry's code. For any other blocks you use in the same entry, delete the center tag in those.---> <div style="display:inline-block;width:366px;"> <div style="display:inline-block;background: #fff;box-shadow: 0px 0px 5px;width: 300px;text-align:center;font-family:helvetica;font-variant:small-caps;font-weight:bold;padding-bottom: 4px;margin: 0 10px 20px 0;"> <div style="height: 150px;background: url(IMG);background-position:center;background-size:cover;"> <div style="color: #fff;font-family:helvetica;text-align:center;font-weight:bold;font-variant:small-caps;text-shadow: 2px 2px #000;font-size: 23px;letter-spacing: 5px;padding-top: 45px;"> character <br /><font style="font-size: 16px;letter-spacing: 10px;"> canon </font> </div> </div> <div style="height:4px; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0));"></div> <font style="letter-spacing: 8px;"> ★★★✰✰ </font><br /> <a href="URL" style="color:#000;text-decoration:none;letter-spacing: 5px;">username</a> <br /> <a href="BIO_URL" style="margin-right: 25px;"><img src="https://img.icons8.com/material-outlined/24/000000/info.png"/></a> <a href="OPEN_URL" style="margin-right: 25px;"><img src="https://img.icons8.com/material-outlined/24/000000/comments.png"/></a> <a href="NAV_URL"><img src="https://img.icons8.com/material-outlined/24/000000/search-in-list.png"/></a> </div> <div style="display:inline-block;width:40px;height:220px;position:relative;right:14px;top:15px;"> <a href="URL"><div style="background: url(GAME_IMG);background-position:center;background-size:cover;height: 40px;border-radius: 0 50px 50px 0;box-shadow: 0px 0px 5px #000;margin-bottom: 5px;"></div></a> <a href="URL"><div style="background: url(GAME_IMG);background-position:center;background-size:cover;height: 40px;border-radius: 0 50px 50px 0;box-shadow: 0px 0px 5px #000;margin-bottom: 5px;"></div></a> <a href="URL"><div style="background: url(GAME_IMG);background-position:center;background-size:cover;height: 40px;border-radius: 0 50px 50px 0;box-shadow: 0px 0px 5px #000;margin-bottom: 5px;"></div></a> </div> </div> <!--DONT REMOVE--> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #555;font-family:helvetica;font-variant:small-caps;font-size:10px;">killthecake</a>





Plain Version

bruce wayne
batman

★★★✰✰
username

Code:
<center> <!---Just have ONE center tag at the top of your entry's code. For any other blocks you use in the same entry, delete the center tag in those.---> <div style="display:inline-block;background: #fff;box-shadow: 0px 0px 5px;width: 300px;text-align:center;font-family:helvetica;font-variant:small-caps;font-weight:bold;padding-bottom: 4px;margin: 0 10px 20px 0;"> <div style="height: 150px;background: url(IMG);background-position:center;background-size:cover;"> <div style="color: #fff;font-family:helvetica;text-align:center;font-weight:bold;font-variant:small-caps;text-shadow: 2px 2px #000;font-size: 23px;letter-spacing: 5px;padding-top: 45px;"> character <br /><font style="font-size: 16px;letter-spacing: 10px;"> canon </font> </div> </div> <div style="height:4px; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0));"></div> <font style="letter-spacing: 8px;"> ★★★✰✰ </font><br /> <a href="URL" style="color:#000;text-decoration:none;letter-spacing: 5px;">username</a> <br /> <a href="BIO_URL" style="margin-right: 25px;"><img src="https://img.icons8.com/material-outlined/24/000000/info.png"/></a> <a href="OPEN_URL" style="margin-right: 25px;"><img src="https://img.icons8.com/material-outlined/24/000000/comments.png"/></a> <a href="NAV_URL"><img src="https://img.icons8.com/material-outlined/24/000000/search-in-list.png"/></a> </div> <!--DONT REMOVE--> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #555;font-family:helvetica;font-variant:small-caps;font-size:10px;">killthecake</a>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ Yes, they can go side by side in a grid sort of pattern. ❖ Each code only has one template in each. You'll have to c/p it as many times as you need. You don't have to c/p the credit every time, though. I mean, unless you want to. Go nuts. ❖ The little icons used here are from icons8. ❖ Please let me know if things break or you have questions. This was a quickly whipped up product brought to you by the quarantine hiimgoingcrazy Ctrl+F & Replace: ❖ IMG - Header image ❖ GAME_IMG - Images for the games ❖ character - name of your character ❖ canon - name of the canon ❖ link - link text ❖ game - name of a game ❖ URL - individual link urls ❖ BIO_URL - link to an info post ❖ OPEN_URL - link to an open post ❖ NAV_URL - link to a navigation post

Comments

[plentyofwords]

That worked! but now when I try to add boxes under the ohana and other tabs here but it borks the detail tabs. What do I need to do to make the boxes show up under the details tabs? Also, why would there be a space
between the PSL muse and inactive tabs?

[hatejakku]

Hi there! I looked at the source code to see what was going on with your end.

I'm not sure what you're trying to make the details do. If I understand it right, you're wanting to put some of those codes into the dropdown? I tried it in my code tester and it seemed to work fine. You just have to make sure that the /details tags are after everything. Also you can align them better by replacing margin: 5px 0 0 7px; with margin: 5px 0 0 0;.

As far as that weird space is concerned, you have a stray break tag in there. You didn't add div style="width:650px;" before the PSL box, which made an extra /div tag at the end next to that hanging /br tag that's making the extra space.

If you're trying to make the boxes be two in a row under these dropdowns, you may have to either make the boxes smaller or make the dropdowns wider. Otherwise, I think it might show up as just one per row.