killthecake | [3] Lots O' Links Navigation

NAVIGATION

Char Name

HMD Permission biosheet visuals kink list playlist

Game Title

Application IC Contact cr chart activity

Game Title

Application IC Contact cr chart activity

Game Title

Application IC Contact cr chart activity

HOME ABOUT GAME LINK GAME LINK GAME LINK CREDIT

NAVIGATION

Char Name

HMD Permission biosheet visuals kink list playlist

Game Title

Application IC Contact cr chart activity

Game Title

Application IC Contact cr chart activity

Game Title

Application IC Contact cr chart activity

HOME ABOUT GAME LINK GAME LINK GAME LINK CREDIT

Code:

Square:

<div style="height:500px;overflow:hidden;align:center;">
<a name="home"></a><div style="height:500px; overflow:hidden;"><div style="font-size:24px;font-weight:bold;margin:0 0 10px -3px;display:block;background:rgba(0,0,0,0.6);color:white;width:300px;padding:3px;">NAVIGATION</div></div>

<a name="1"></a> <div style="width:300px; height:500px; background:rgba(0,0,0,0.3);overflow:hidden;">
<div style="color:white;padding:3px;text-align:center;margin-top:25%;font-family:helvetica;">

<img src="ICON_URL" style="width:100px;height:100px;border-radius:20%;margin:0 0 10px 0;border:1px hidden white"></img>
<div style="font-size:18px;font-weight:bold;margin:0 0 10px -3px;display:block;background:rgba(0,0,0,0.8);color:white;width:300px;padding:3px;">CHARACTER</div>

<a href="url" style="font-size:11px;font-weight:bold;margin:0 0 5px 25%;display:block;background:rgba(0,0,0,0.8);color:white;width:150px;padding:3px;text-transform:uppercase;text-decoration:none;text-align:center;">LINK</a>

<a name="2"></a> <div style="width:300px; height:500px; background:rgba(0,0,0,0.3);overflow:hidden;">
<div style="color:white;padding:3px;text-align:center;margin-top:25%;font-family:helvetica;">

<img src="ICON_URL" style="width:70px;height:70px;border-radius:20%;margin:0 0 10px 0;border:1px hidden white"></img>
<div style="font-size:18px;font-weight:bold;margin:0 0 10px -3px;display:block;background:rgba(0,0,0,0.8);color:white;width:300px;padding:3px;">GAME TITLE</div>

</div></div>

<a name="3"></a> <div style="width:300px; height:500px; background:rgba(0,0,0,0.3);overflow:hidden;">
<div style="color:white;padding:3px;text-align:center;margin-top:25%;font-family:helvetica;">

</div></div>

<a name="4"></a> <div style="width:300px; height:500px; background:rgba(0,0,0,0.3);overflow:hidden;">
<div style="color:white;padding:3px;text-align:center;margin-top:25%;font-family:helvetica;">

</div></div>

</div></div>

<div style="display:inline-block; width:150px; height:500px; border: 10px solid transparent;overflow:hidden;position:relative;right:10px;">

<a href="#1" style="text-decoration:none;color:#fff;;display:block;width:130px;background:black;font-weight:bold;font-size:15px;font-family:helvetica;margin:5px;padding:3px;">ABOUT</a>

<a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color:#fff;;display:block;width:130px;background:black;font-weight:bold;font-size:15px;font-family:helvetica;margin:5px;padding:3px;">CREDIT</a>

</div></div></div>
</div>

Rounded:

<div style="height:500px;overflow:hidden;align:center;">
<a name="start"></a><div style="height:500px; overflow:hidden;"><div style="font-size:24px;font-weight:bold;margin:0 0 10px -3px;display:block;background:rgba(0,0,0,0.6);color:white;width:300px;padding:3px;">NAVIGATION</div></div>

<a name="A"></a> <div style="width:300px; height:500px; background:rgba(0,0,0,0.3);overflow:hidden;">
<div style="color:white;padding:3px;text-align:center;margin-top:25%;font-family:helvetica;">

</div></div>

<a name="B"></a> <div style="width:300px; height:500px; background:rgba(0,0,0,0.3);overflow:hidden;">
<div style="color:white;padding:3px;text-align:center;margin-top:25%;font-family:helvetica;">

</div></div>

<a name="C"></a> <div style="width:300px; height:500px; background:rgba(0,0,0,0.3);overflow:hidden;">
<div style="color:white;padding:3px;text-align:center;margin-top:25%;font-family:helvetica;">

</div></div>

<a name="D"></a> <div style="width:300px; height:500px; background:rgba(0,0,0,0.3);overflow:hidden;">
<div style="color:white;padding:3px;text-align:center;margin-top:25%;font-family:helvetica;">

</div></div>

</div></div>

<div style="display:inline-block; width:150px; height:500px; border: 10px solid transparent;overflow:hidden;position:relative;right:10px;">

<a href="#A" style="text-decoration:none;color:#fff;;display:block;width:100px;background:black;font-weight:bold;font-size:15px;font-family:helvetica;margin:5px;padding:8px;border-radius:0 100px 100px 0;">ABOUT</a>

<a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color:#fff;;display:block;width:100px;background:black;font-weight:bold;font-size:15px;font-family:helvetica;margin:5px;padding:8px;border-radius:0 100px 100px 0;">CREDIT</a>

</div></div></div>
</div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ You should be able to add as many links/pages as you want without problems. If not, send me a line and I'll check out the problem.

❖ If or when you add more pages, just make sure the characters on the links match up with the ones on the navigation panel. ex: <a href="5">. In the codes provided, the square version has numbers and the rounded version has letters. ~~That was just so I could preview them on the same page, don't worry about it.~~

❖ If the link name on the sidebar is too long for the little tab, you can change width: ##px; in that same link code to a higher number. Otherwise, the line will move down and it'll just make the tab taller. Shouldn't break the code either way unless you make the width too big or too small.

❖ The cut on this post is below the live previews so you can go to the journal itself and see what it'll look like. Just an fyi.

❖ Inspired by tessisamess and mistojen. I just wanted a nice, neat, almost small nav code for those of us with one character in too many games.

Ctrl+F & Replace:
❖ IMAGE_URL - Background image.
❖ ICON_URL - Icon image on each page.
❖ URL - Link urls on the pages.

❖ CHARACTER/GAME TITLE - Header on each page.
❖ LINK - Links on each page.
❖ HOME/ABOUT/GAME LINK - Text on the tab links.

#FFFFFF font color
WHITE font color, hidden icon borders that you can customize
BLACK tab background and border (make sure these remain the same color)
rgba(0,0,0,0.6) transparent home screen header
rgba(0,0,0,0.3) transparent page backgrounds
rgba(0,0,0,0.8) transparent backgrounds on headers & links on pages

Flat | Top-Level Comments Only

WHOOPS LMAO i realize now how unclear i was – yes, i meant the main box! i've fiddled around with it myself and only really succeeded in breaking all the buttons whoops

Ok, that's no problem! After tinkering around a little, I found a pretty easy fix. First, ctrl+f for every 300px and change them all to 400px then repeat by changing all 500px to 600px.

It'll take a second but that should do the trick! Let me know if you have any problems.

that worked out perfectly! thanks so much!

Awesome! I'm glad it worked!! \o/

[3] Lots O' Links Navigation

no subject

no subject

no subject

no subject