navigation: stove burns on my hands

[prospitian]

A navigation table with room for a quote and as many links as you want, but honestly you can stack a bunch of these on top of each other and use them for whatever?

<raw-code><center><table style="width:600px;"><tr><td rowspan="2" style="vertical-align:top;"><img src="ICON URL" style="border:5px solid BORDER COLOR; border-radius:20px; box-shadow:-2px 2px 5px #AEAEAE;"></td> <td style="vertical-align:top;"><div style="width:0px; height:0px; width:0; height:0; border-top: 10px solid transparent; border-right: 30px solid BORDER COLOR; border-bottom: 10px solid transparent; float:left; position:relative; z-index:10; margin-top:20px;"> <div style="width:0px; height:0px; width:0; height:0; border-top: 5px solid transparent; border-right: 20px solid BG COLOR; border-bottom: 5px solid transparent; margin-left:10px; margin-top:-5px;"> </div> </div> <div style="width:400px; padding:10px; height:auto; background-color:BG COLOR; border:5px solid BORDER COLOR; color:QUOTE TEXT; float:left; margin-left:-5px; z-index:5; position:relative; border-radius:20px; font:12px Consolas, Courier New; text-align:center; box-shadow:-2px 2px 5px #AEAEAE; min-height:25px;">YOUR QUOTE GOES HERE</div></td></tr> <tr><td style="text-align:center; padding-left:30px;"> <!-- Here's where the links go! Just below here is the code for one link. You can add as many as you want, and the code isn't linebreak sensitive, so you can space them out however much is easy for you! Replace BORDER COLOR, BG COLOR, LINK COLOR, URL, and LINK TEXT with, respectively, a hex code for the color of the border, a hex code for the color of the background, a hex code for the color of the text, the URL, and the text for the link. --> <a style="display:inline-block; text-decoration:none; text-align:center; border:2px solid BORDER COLOR; background-color:BG COLOR; color:LINK COLOR; margin:5px; font:11px Consolas, Courier New; border-radius:20px; padding:5px; width:70px;" href="URL">LINK TEXT</a> <!-- Add all your links above this line! My credit is right below it. Please don't remove it (unless you're relocating it), but feel free to edit the text/case as suits your aesthetic, and don't forget to change the colors! --> <a style="display:inline-block; text-decoration:none; text-align:center; border:2px solid BORDER COLOR; background-color:BG COLOR; color:LINK COLOR; margin:5px; font:11px Consolas, Courier New; letter-spacing:-1px; border-radius:20px; padding:5px; width:70px;" href="http://photosynthesis.dreamwidth.org/">Code Credit</a> </td></tr></raw-code>

Here's the stuff you need to replace! Instructions for the links themselves, including replacements, are in the code.
ICON URL - It's your icon!
BORDER COLOR - The border color for the icons, links, and bubble. Use a hex code with a hashtag!
BG COLOR - The background color for the links and the bubble. Use a hex code with a hashtag!
QUOTE TEXT - The color of the quote text. Use a hex code with a hashtag!
YOUR QUOTE GOES HERE - Yeah.

Feel free to edit this as much as you want so long as my credit remains intact! As always, if you need any help with the code, gimme a yell and I'll check it out!

Comments

[manycharms]

Looks great! I definitely plan on using this as a muselist for one of my accounts!

[arcaniststaff]

HEY IT'S KURURU WITH A LIL BUG REPORT
(don't mind the colours just testing) BUT ANYWAY. if you enter less then a line in the quote area, the speech thingie messes up

i mean im gonna add more but just. letting u know. (yes im making it into a thread tracker, the links aren't links anymore but lists of characters in thread. :3)

[prospitian]

man the worst part is i noticed this while i was making it and was like "yeah, okay, i'll go in and fix that" and forgot to

but i added a min-height property so that oughta do it! i also added some small font fixes so i'd probably start from the code's new scratch for future endeavors <3

[rebellionsarebuiltonhope]

I'm having the same problem as the person above, but now it's higher towards the top. It's just not reaching the bubble all the way. Any chance for a fix? Pretty please?

Nevermind. Fixed. I changed the 20 to a 25 and now it looks fine, for the most part.

[presomnia]

WRONG ACCOUNT BUT THIS IS ME I PROMISE i'm glad you figured that one out there though!! can i just ask what browser you're using just so i can make sure that'll be enough from keeping this from happening again?

[rebellionsarebuiltonhope]

Whoopsies! I forgot that was an issue!

I'm on Chrome. Didn't even think to try FF. :V

[presomnia]

no problem!! would you actually mind throwing me a pastebin of the code you were having the issue with so i can poke at it when i'm off my work computer so i can try figuring out what happened there? i made the fix on chrome so i was hoping it was just a browser problem but alas

[rebellionsarebuiltonhope]

Dang, I saved over it with the working code. It was pretty much exactly what's in the copy box above except with the color placeholders filled in.

Here's the code I'm using now and here is what it looks like in use. It's weird because it looked perfect in preview mode, custom layout and everything.

[presomnia]

OHHHHHH i didn't even realize you had a custom layout, i have them disabled on this account... honestly that might have been it, i'm not sure about the discrepancy between the preview and the reality but custom layouts sometimes have line heights or other properties set that conflict with the ones in the code and lead to wonky alignment. i'll probably poke at this for a bit to make sure, though, thanks a ton!!!

[rebellionsarebuiltonhope]

No problem! Thanks for making it in the first place! :D

[caduceusoncall]

Using here and here and eventually on two other accounts. Lovely work!

[preciousbrat]

Thank you so much for sharing. Currently only it on this account but I am sure I will use it on another too.
By the way: Thanks for making it easy to edit *never really understood how to use HTML at all*

[dubiouslychthonic]

I've used a slightly adapted version of this for a combo CR chart and thread tracker here! (I've moved the credit link to the bottom of the page.)

[corpsewarblade]

This is lovely, thank you so much for sharing! I'm using it on my muselist here!