Navigation codes

[angermanaging]

( static preview )


( live preview )

NAVIGATION

APPLICATION
IC CONTACT
CONCRIT / CONTACT
CHARACTER RELATIONS
THREAD TRACKING
PERMISSIONS
MISC.

 NAVIGATION

GAME #1 • APPLICATION • IC CONTACT • CONCRIT / CONTACT • CHARACTER RELATIONS • THREAD TRACKING • PERMISSIONS • MISC.

GAME #2 • APPLICATION • IC CONTACT • CONCRIT / CONTACT • CHARACTER RELATIONS • THREAD TRACKING • PERMISSIONS • MISC.

( instructions )

1 column staggered: <center><div style="width:430px;"> <div style="width:110px;float:left;"><img src="http://www.dreamwidth.org/userpic/6546278/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"> <img src="http://www.dreamwidth.org/userpic/6546279/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"></div> <div style="width:200px;height:30px;background:#49A9F3;border-radius:5px;;color:#ffffff;"><span style="font-face:Georgia;font-size:19px;letter-spacing:6px;">NAVIGATION</span></div> <div style="width:180px;height:190px;padding:10px;background:#e0e0e0;border-radius:5px;text-align:left;margin-top:-18px;"><a href="" style="text-decoration: none; color:#5A4C3A;">APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">MISC.</A></div> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>	2 column staggered: <center><div style="width:630px;"> <div style="width:110px;float:left;"><img src="http://www.dreamwidth.org/userpic/6546278/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"> <img src="http://www.dreamwidth.org/userpic/6546279/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"></div> <div style="width:400px;height:30px;background:#49A9F3;border-radius:5px;;color:#ffffff;text-align:left;"><span style="font-face:Georgia;font-size:19px;letter-spacing:6px;"> NAVIGATION</span></div> <div style="width:380px;height:190px;padding:10px;background:#e0e0e0;border-radius:5px;text-align:left;margin-top:-18px;"><table><tr><td width="180px"><span style="font-size:15px;letter-spacing:2px;color:#5A4C3A;"><I>GAME #1</i></span> <a href="" style="text-decoration: none; color:#5A4C3A;">• APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• MISC.</A></td> <td><span style="font-size:15px;letter-spacing:2px;color:#5A4C3A;"><I>GAME #2</i></span> <a href="" style="text-decoration: none; color:#5A4C3A;">• APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• MISC.</A></td></tr></table> </div> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>
1 column level version: <center><div style="width:430px;"> <div style="width:110px;float:left;margin-top:17px;"><img src="http://www.dreamwidth.org/userpic/6546278/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"> <img src="http://www.dreamwidth.org/userpic/6546279/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"></div> <div style="width:200px;height:30px;background:#49A9F3;border-radius:5px;;color:#ffffff;"><span style="font-face:Georgia;font-size:19px;letter-spacing:6px;">NAVIGATION</span></div> <div style="width:180px;height:173px;padding:10px;background:#e0e0e0;border-radius:5px;text-align:left;margin-top:-18px;"><a href="" style="text-decoration: none; color:#5A4C3A;">APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">MISC.</A></div> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>	2 column level version: <center><div style="width:630px;"> <div style="width:110px;float:left;margin-top:17px;"><img src="http://www.dreamwidth.org/userpic/6546278/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"> <img src="http://www.dreamwidth.org/userpic/6546279/1934089" style="border: #e0e0e0 5px solid; border-radius:5px;"></div> <div style="width:400px;height:30px;background:#49A9F3;border-radius:5px;;color:#ffffff;text-align:left;"><span style="font-face:Georgia;font-size:19px;letter-spacing:6px;"> NAVIGATION</span></div> <div style="width:380px;height:173px;padding:10px;background:#e0e0e0;border-radius:5px;text-align:left;margin-top:-18px;"><table><tr><td width="180px"><span style="font-size:15px;letter-spacing:2px;color:#5A4C3A;"><I>GAME #1</i></span> <a href="" style="text-decoration: none; color:#5A4C3A;">• APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• MISC.</A></td> <td><span style="font-size:15px;letter-spacing:2px;color:#5A4C3A;"><I>GAME #2</i></span> <a href="" style="text-decoration: none; color:#5A4C3A;">• APPLICATION</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• IC CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CONCRIT / CONTACT</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• CHARACTER RELATIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• THREAD TRACKING</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• PERMISSIONS</A> <a href="" style="text-decoration: none; color:#5A4C3A;">• MISC.</A></td></tr></table> </div> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>
This has a fixed height, so you can't have more links than ~10 or 11 per column. You can have fewer without affecting anything, though. HEX CODES Navigation panel background: #49A9F3 Main background and border: #e0e0e0 Links color: #5A4C3A

Comments

[seacups]

make more navigation posts please thanks

but seriously no one makes them and i can always use them

[angermanaging]

Haha I can do that! :>

Any features in particular you like in your nav posts? (I like direction.)

[seacups]

Weeell, me in particular, I like codes that feature easy customization! I play some characters that are really cutesy, like Ariel here, who'd fit a lot of the pastel and round looks of codes that are popular right now - but I also play characters like badass demon hunters and angels from Supernatural who are...decidedly not kawaii uguu. So something that has a lot of versatility is my bread and butter!

I also like codes that have good places for images, since I like to put a picture of my character in my navigation post so people can see a full body shot when they're tagging me or poking around for more info.

[angermanaging]

Hmmm, okay, that actually reminds me of an idea I had for a nav post layered over a large image that would probably fit all of this. It's going to be a bit tricky because I'm being ambitious with it... so it might take me a while... but keep an eye out and it'll probably crop up!

[seacups]

I WAIT IN ANTICIPATION tysm! ♥

[angermanaging]

LOL no problem!! I was planning on it anyway, I just completely forgot until you mentioned it. Not out of my way at all!

[angermanaging]

Okay I took a crack at it! Let me know what you think! :>

[hyanaimne]

yoinking this for this journal. ♥ thank you!

[ninjainviolet]

Grabbed for this journal with a few tweaks. :D

[mushussumods]

Taken and tweaked it for my game's navigation! Thanks so much!

[megabond]

I used your codes, but I modified it so it can have 4 games since I'm planning to join the third game.

I used it here. What do you think?

[fashionable_yapping]

Thank you very much for the code! I used it, though I ended up modifying it (making it pink to match the character's tastes and listing the game at the top like in the two-column layout, as well as using for bullet points an image my game uses for that purpose).