navigation: clean and simple

[mistojen]

Clean and Simple Navigation

Tossed this together as a request (with a design reference from the requester), and hopefully some of you will get some use out of it. :) Enjoy!

ETA: It has been brought to my attention that this code doesn't play nice with journal layouts, which I...admittedly failed to test, since I typically work in entries that aren't set to match my journal layout. So, if you're running into this issue, use the second copy/paste code. Please note that this fix borks the code big time if you're looking at it in entry view and your journal is set not to use the journal's layout on entries. But...It works on the three journal layouts I tested it in, so...hopefully it will also work for you. Drop me a line if not.

Dean Winchester Application Permissions CR Chart Threads Playlist Visualosities

'clean and simple' design by mistojen

<center><raw-code><div style="width: 500px; height: 250px;margin: 0 auto; padding: 0; overflow: hidden; border: 10px solid #8A1A1A"> <a name="base"></a><table style="width: 500px; height: 250px; background-image: url('MAINIMAGE');font-family: georgia, 'times new roman', serif; font-weight: 900; font-size: 30px;"> <tr> <td style="padding: 0; width: 500px; height: 250px; text-align: center;vertical-align: middle;"> <center><a name="base"> </a> <a href="#links"><div class="triangle" style="width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom: 20px solid #8A1A1A;position:relative;z-index:100;margin-top: 230px;"></div></a></td> </tr> </table> <a name="links"></a><table style="width: 500px; height: 250px; background-image: url('MAINIMAGE');font-family: georgia, 'times new roman', serif; font-weight: 900; font-size: 30px;"> <tr> <td style="padding: 0; width: 500px; height: 250px; text-align: center;vertical-align: middle;"> <center><a name="links"><table style="width: 500px; height: 250px;font-family: georgia, 'times new roman', serif; font-weight: bold;background-image: url('OVERLAY');text-align: center;"> <tr style="font-size: 30px; color: #fff;"> <td colspan="2" style="vertical-align: middle; text-transform: uppercase;">Character Name</td> </tr> <tr style="font-size: 15px;text-align: center;"> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> </tr> <tr style="font-size: 15px;"> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> </tr> <tr style="font-size: 15px;"> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> </tr></table></a> <a href="#base"><div class="triangle" style="width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom: 20px solid #8A1A1A;position:relative;z-index:100;margin-top: -50px;"></div></a></td> </tr> </table> </div></raw-code> <center><div style="display: block;width: 500px; text-align: center; font-family: 'century gothic'; font-size: 11px;margin-top: -15px;">'clean and simple' design by <a style="color: #000; text-decoration: none;" href="http://mistojen.dreamwidth.org/">mistojen</a></div>


fixed code for picky journal layouts:

<center><raw-code><div style="width: 500px; height: 250px;margin: 0 auto; padding: 0; overflow: hidden; border: 10px solid #8A1A1A"> <a name="base"></a><table style="width: 500px; height: 250px; background-image: url('MAINIMAGE');font-family: georgia, 'times new roman', serif; font-weight: 900; font-size: 30px;"> <tr> <td style="padding: 0; width: 500px; height: 250px; text-align: center;vertical-align: middle;"> <center><a name="base"> </a> <a href="#links"><div class="triangle" style="width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom: 20px solid #8A1A1A;position:relative;z-index:100;margin-top: 230px;"></div></a></td> </tr> </table> <a name="links"></a><table style="width: 500px; height: 250px; background-image: url('MAINIMAGE');font-family: georgia, 'times new roman', serif; font-weight: 900; font-size: 30px;"> <tr> <td style="padding: 0; width: 500px; height: 250px; text-align: center;vertical-align: middle;"> <center><a name="links"><table style="width: 500px; height: 250px;font-family: georgia, 'times new roman', serif; font-weight: bold;background-image: url('OVERLAY');text-align: center; margin-top: -2px; margin-left: -2px;"> <tr style="font-size: 30px; color: #fff;"> <td colspan="2" style="vertical-align: middle; text-transform: uppercase;">Character Name</td> </tr> <tr style="font-size: 15px;text-align: center;"> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> </tr> <tr style="font-size: 15px;"> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> </tr> <tr style="font-size: 15px;"> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> <td style="width: 250px; vertical-align: top;"><a style="color: #fff;text-decoration: none;" href="URLGOESHERE">LINKTEXTGOESHERE</a></td> </tr></table></a> <a href="#base"><div class="triangle" style="width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom: 20px solid #8A1A1A;position:relative;z-index:100;margin-top: -15px;"></div></a></td> </tr> </table> </div></raw-code> <center><div style="display: block;width: 500px; text-align: center; font-family: 'century gothic'; font-size: 11px;margin-top: -15px;">'clean and simple' design by <a style="color: #000; text-decoration: none;" href="http://mistojen.dreamwidth.org/">mistojen</a></div>

color change:

#8A1A1A

instructions:

1. Replace the following:
   • MAINIMAGE with the url for the image as your base. In the example code above, this image is the plain one of Natasha Romanoff. This needs to be exactly 500x250 in size. You can change this, but if you do, then you also need to change all of the dimensions in the rest of the code to match whatever you change it to.
   • OVERLAY with the url of the image you're using for your overlay. This is either going to be a solid block of a dark color that'll completely cover the main image or, if you have some Photoshop skills, it'll be a low opacity dark layer over a transparent layer saved down as a .png. This will make it transparent so you get the effect in the sample code above. If you haven't got access to make an overlay image, you can simply change the code: where it says background-image: url('OVERLAY'); you'll want to change that to background-color: rgba(0,0,0,.66). the .66 in that can be adjusted lighter or darker by making the number lower or higher, respectively.
   • CHARACTERNAME
   • URLGOESHERE with the navigation links you'd like to insert
   • LINKTEXTGOESHERE with the link text for those links.
2. Please do not remove credit.
3. If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
4. Enjoy!

Comments

[lovesherboys]

Hi, It's Murgy. I can't figure out what I did here to make the overlay image sit lower in the box.

[mistojen]

I'll look when I get home and have a computer but did you use the first code? Because that one won't work on some journal layouts; it gives that exact response, the second usually does fine. If you used the second, it'll just be a margin thing and I'll troubleshoot when I'm not mobile :)

[mistojen]

So my family came in and I didn't get around to looking at this again until just now, sorry about that, but it looks fine to me on the computer? Not sure if you switched the code or what, but I'm not seeing the margin issues like I was on mobile yesterday, so it looks like you're all set?

[lovesherboys]

quick question.... is there a way to put the links on either side of the Devil's Trap, and Center the name without completely borking the code? this is what mine looks like now.

[mistojen]

Yeah you just do all the rows the way you did that bottom one, only in the second td tag just leave a space between the open and closed tags rather than putting a link, and put the links in the first and third ones.