NAV PAGE: COLOUR BLOCK

[marwood]

a pretty simple code you can use for journal navigation pages that i originally made for an OC journal and decided to share! here is a live preview with a different colour scheme so you can see how it comes out with different elements. hopefully it's easy enough to customise - you can add/remove as many links as you want and they will stay vertically centred in the box. :^)

i also did a bit of fudging with the actual journal layout (this is the original) on my OC journal so that hovering over the link makes the white space get wider. unfortunately this isn't something you can do within the entry HTML, but if you'd like to know how i did that please let me know and i can help you out!

colors:
box background: #849693
link text: #911c35
link square: #571624

code:
<lj-raw><div style="margin: 0 auto; width: 400px; display: flex;"> <div style="width: 250px; height: 400px; background: url('IMG_URL_HERE') center; background-size: cover;"></div> <div style="width: 150px; height: 400px; background-color: #849693;"></div></div> <div style="margin: -400px auto 0 auto; width: 400px; height: 400px; font-family: georgia; font-style: italic; font-weight: bold; font-size: 13px; letter-spacing: 3px; display: flex; align-items: center; line-height: 200%; text-align: right;"> <div style="width: 267px;"> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link one</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link two</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link three</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link four</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link five</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link six</a> </div> </div> <div style="margin: 3px auto; width: 400px; text-align: right; font-family: georgia; font-size: 9px; letter-spacing: 4px;"><a style ="color: #888; text-decoration: none;" href="https://withnails.dreamwidth.org/5917.html">CODE</a></div></lj-raw>

Comments

[marwood]

Thank you!! I'm pretty sure this is because of your journal's layout, as the layout HTML is overriding the styling of the code. The easy cheat way to get around this is: in the HTML for the code (so not your journal layout HTML, but the HTML for the entry specifically!) if you find #f1c6c6; and add !important before the colon, so it will look like this: #f1c6c6 !important; ! You will need to do this with each individual link.

The other slightly more faffy option is to go into your layout HTML, find the a styling for the whole page, and change the link colour there. This way you can also change the colour the text becomes when you hover over it (that will be under a:hover), but if that doesn't bother you then !important is the best way to go. I hope this makes sense, please let me know if you need any more help!!

[feliny]

asdljk you are a doll, thank you so much! Worked like magic. I'm currently studying C# so anything code-related that I learn is just the best.

You made my day :)