Navigation: ice-cream-covered screaming hyperactive thought

[prospitian]

Aoi Asahina

hmd visuals art credit spooky jamjar murdergame

code credit  

Spooky Jamjar

app cr chart thread tracker inventory ▲   

code credit  

Murdergame

cr chart regains ▲   

code credit  

A navigational table with the option for multiple "pages," made especially with the idea of multiple games in mind!


Base Code
<raw-code><center><div style="display:block; height:300px; width:700px; background-image:url('BACKGROUND IMAGE URL'); border-top-right-radius:20px; border-top-left-radius:20px; overflow:hidden; line-height:1.2em;"> <a name="index"></a> <div style="width:700px; height:300px; display:block;"> <span style="width:100%; height:50px; display:inline-block; font:italic 42px Georgia; color:#FEFEFE; text-shadow:2px 2px 3px #666666; text-align:center; margin-top:200px;">CHARACTER NAME</span> <div style="width:100%; display:inline-block; background-color:rgba(0,0,0,0.5); font:18px Consolas; text-align:center;"> <!-- PUT LINKS FOR THE INDEX DIRECTLY BELOW THIS LINE --> </div> <a style="display:block; width:100%; text-align:right; color:#EFEFEF; text-decoration:none; font:italic 10px Arial; height:10px; margin-top:15px;" href="http://photosynthesis.dreamwidth.org">code credit  </a> </div> <!-- ADD EXTRA PAGES UNDER THIS LINE --> <!-- DON'T ADD ANYTHING BELOW THIS LINE --> </div></center></raw-code>

Page Code
<div style="width:700px; height:300px; display:block;"> <a name="PAGE NAME" style="display: block; position: relative; top: 0;"> </a> <span style="width:100%; height:50px; display:inline-block; font:italic 42px Georgia; color:#FEFEFE; text-shadow:2px 2px 3px #666666; text-align:center; margin-top:200px;">PAGE TITLE</span> <div style="width:100%; display:inline-block; background-color:rgba(0,0,0,0.5); font:18px Consolas; text-align:center;"> <!-- ADD LINKS FOR THIS PAGE DIRECTLY BELOW THIS LINE --> <a href="#index" style="display:inline-block; float:right; text-decoration:none; color:#FFFFFF;">▲   </a> </div></div>

Links Codes

Regular URLs	Pages
<a href="LINK URL" style="margin-left:15px; margin-right:15px; display:inline-block; text-align:center; text-decoration:none; color:#FFFFFF;">LINK TITLE</a>	<a href="#PAGE NAME" style="margin-left:15px; margin-right:15px; display:inline-block; text-align:center; text-decoration:none; color:#FFFFFF;">LINK TITLE</a>

Replacements
BACKGROUND IMAGE URL in the base code. The image should be 700x300 pixels.
CHARACTER NAME in the base code.
LINK URL in each regular link.
LINK TITLE in each link, regular or page.
PAGE TITLE in the page code.
PAGE NAME appearing both in the link to the page, and the page code itself. Please note that "PAGE NAME" has to be an exact match in both the link code and the place it appears in the page code itself, right down to the capitalization. The # symbol in the link code should stay there, but don't add one to the place "PAGE NAME" appears in the page code itself!

#FFFFFF for the text color for the links.
0,0,0 for the semi-transparent background color for the links. This is an RGB value, not a hex code; you can convert one to the other here.
#FEFEFE for the text color for the name/titles.
#666666 for the shadow behind the name/titles.
#EFEFEF for the text color for the credit link. Please change this if it's unreadable on your background image!

Georgia for the font for the name/titles.
Consolas for the font for the links.

As always, you are free to edit this code as much as you'd like so long as my credit remains intact, and please don't hesitate to ask if you need any help!

Patch Note: If you started using this code before 12/17/19, your version is busted! A Chrome update messed up the anchor alignment so links didn't go where they needed to. The fix for that is very simple; you can find it here!

Comments

[bottombitch]

I love the layout!

I had a question but then I figured it out :) Thank you!

[in4apounding]

Absolutely perfect, this journal was getting cluttered with navigation posts from different games. Thank you.

[bondsofsuffering]

Chrome might've broken this with something new, idk but when I click on one of the page links to go to another page here it results in this on my Chrome. I loaded a (probably old) version of Firefox and it worked though, so... it's also entirely possible google just decided to suck.

[mightdoriya]

Popping in to say that I've been having the same issue using this nav with Chrome as well. You can see it here. I'm guessing it must be a google thing like you said which is a bummer :C

[dobonhonkeros]

wrong account but OH GEEZ THAT SURE IS A COMMENT I WAS LIKE AH I'LL GET TO THAT WITH AND THEN DIDN'T, I'm not having this issue on my end (chrome is my main browser) so could i please get a pastebin of the code as you're using it? also if you could just confirm you're not zoomed in/out and don't have anything affecting the line spacing of your screen!

[mightdoriya]

Here you go! Some of my links that previously....had links there are just empty now because I was moving things around to see if I could suss out the issue but everything else is the same as it was. Also everything's 100%, no zooming or line spacing!

[prospitian]

RIGHT ACCOUNT NOW!! okay first order of business, as it turns out my chrome was not entirely up to date, so i couldn't replicate the error; my apologies for that! my bad!

the GOOD NEWS IS it's actually a really easy fix! just find all the instances of

<a name="PAGE NAME"> </a>
(substitute "page name" with the names of your various pages; d, c, f in your case! you can just search a name to find them, but you don't have to do this to a name="index")

and just replace them with
<a name="PAGE NAME" style="display: block; position: relative; top: 0;"> </a>

patch notes: that bit of code is an "anchor", the precise point on the overall web page that clicking the link that leads to "PAGE NAME" will bring you to. this styling just moves where the anchor is on the "page" within the code! previously the anchor existed directly above the title of the "page" and now it exists right at the tip-top

tl;dr GOT 'EM

[bondsofsuffering]

Here is what I've got! No zoom here, either.

[prospitian]

here's the fix!!! SO SORRY i didn't get to your comment for so long!!!!

[phantasmagorial]

hewwo courtney it's claire with code questions

Is it possible to move around where the character name appears? I mocked up this image to try and get across what I want

[prospitian]

yes but it involves restructuring the alignment of the code a little so it's kinda tricky!!

<raw-code><center><div style="display:block; height:300px; width:700px; background-image:url('BACKGROUND IMAGE URL'); border-top-right-radius:20px; border-top-left-radius:20px; overflow:hidden; line-height:1.2em;"> <a name="index"></a> <div style="width:700px; height:300px; display:block;"> <span style="width:100%; height:50px; display:inline-block; font:italic 42px Georgia; color:#FEFEFE; text-shadow:2px 2px 3px #666666; text-align:center; margin-left: -150px; margin-top:100px;">CHARACTER NAME</span> <div style="width:100%; display:inline-block; background-color:rgba(0,0,0,0.5); font:18px Consolas; text-align:center; margin-top: 100px;"> <!-- PUT LINKS FOR THE INDEX DIRECTLY BELOW THIS LINE --> </div> <a style="display:block; width:100%; text-align:right; color:#EFEFEF; text-decoration:none; font:italic 10px Arial; height:10px; margin-top:15px;" href="http://photosynthesis.dreamwidth.org">code credit </a> </div> <!-- ADD EXTRA PAGES UNDER THIS LINE --> <!-- DON'T ADD ANYTHING BELOW THIS LINE --> </div></center></raw-code>

basically the edit is as such: there are two places in this code that say margin-top: 100px; one right before CHARACTER NAME and once right at the end of the following div (before the note that tells you where links go). edit the first one to get the name higher/lower, but you have to edit the second one in turn so that they both add up to 200 to keep the links bar in the right place. there's also a margin-left: -150px in there; you can change that number freely to move the name right and left! you'll have to do that for each page!!

[prismatically]

OH PHEW IT'S NOT AS COMPLICATED AS I THOUGHT...

bless u i'mma play around with this now and see what works

[prismatically]

Thank u!! That seems to have worked but now i'm having a different problem lol oops. The link colours are correct when viewing the entry itself, but when you view the journal with the navi as a splash page, they default to red which is impossible to read. DID I MESS UP...

edit: NEVER MIND LOL I'M DUMB i forgot to change the link colour in the journal layout code

[colchismagecraft]

This is lovely, thank you - going to use it for Caster here.

One thing I can't work out which is probably me doing something really silly is that when the links/plain text in the box go onto two lines it hides the code credit and I don't want to do that - do you know what I'm doing wrong?

https://colchismagecraft.dreamwidth.org/2072.html

[weyetch]

sorry for the rp journal lmao but!! thank you so much for making sure the credit stays intact!!! could you send me a pastebin of the code as you're using it?

[colchismagecraft]

Yes of course - and excuse my RP Journal too - here it is:

https://pastebin.com/ym2X6Y8c

[5869]

it's just gonna be a different journal from me every time lmao SORRY

but!! this wasn't anything you were doing wrong! this is more a problem with the code, where it isn't totally ready to handle when there's more than one line's worth of content in that strip where the links go. fortunately all i had to do to fix it was heft everything up by like fifty pixels!

<raw-code><center><div style="display:block; height:300px; width:700px; background-image:url('https://colchismagecraft.dreamwidth.org/file/421.jpg'); border-top-right-radius:20px; border-top-left-radius:20px; overflow:hidden; line-height:1.2em;"> <a name="index"></a> <div style="width:700px; height:300px; display:block;"> <span style="width:100%; height:50px; display:inline-block; font:italic 42px Georgia; color:#FEFEFE; text-shadow:2px 2px 3px #666666; text-align:center; margin-top:150px;">Caster</span> <div style="width:100%; display:inline-block; background-color:rgba(0,0,0,0.5); font:18px Consolas; text-align:center;"> <!-- PUT LINKS FOR THE INDEX DIRECTLY BELOW THIS LINE --> Unlimited Blade Works Route // Magic Type: Dark // Familiar: Skeletal Dragon <br> <a href="https://colchismagecraft.dreamwidth.org/402.html" style="margin-left:15px; margin-right:15px; display:inline-block; text-align:center; text-decoration:none; color:#FFFFFF;">HMD</a> <a href="https://colchismagecraft.dreamwidth.org/1718.html" style="margin-left:15px; margin-right:15px; display:inline-block; text-align:center; text-decoration:none; color:#FFFFFF;">Opt-Out</a> <a href="https://colchismagecraft.dreamwidth.org/1249.html" style="margin-left:15px; margin-right:15px; display:inline-block; text-align:center; text-decoration:none; color:#FFFFFF;">Permissions</a> <a href="https://colchismagecraft.dreamwidth.org/2551.html" style="margin-left:15px; margin-right:15px; display:inline-block; text-align:center; text-decoration:none; color:#FFFFFF;">Game Info</a> <a href="https://colchismagecraft.dreamwidth.org/2004.html" style="margin-left:15px; margin-right:15px; display:inline-block; text-align:center; text-decoration:none; color:#FFFFFF;">IC Inbox</a> <a href="https://fallenstears.dreamwidth.org/" style="margin-left:15px; margin-right:15px; display:inline-block; text-align:center; text-decoration:none; color:#FFFFFF;">Player</a> </div> <a style="display:block; width:100%; text-align:right; color:#EFEFEF; text-decoration:none; font:italic 10px Arial; height:10px; margin-top:15px;" href="http://photosynthesis.dreamwidth.org">code credit </a></div> <!-- ADD EXTRA PAGES UNDER THIS LINE --> <!-- DON'T ADD ANYTHING BELOW THIS LINE --></div></center></raw-code>

if you need to adjust further, look for where it says margin-top:150px and adjust that number accordingly—a smaller number hikes the whole thing higher!

[colchismagecraft]

That's perfect, thank you!! Much appreciate the quick response