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

[divaricate]

This is so nice! I'm currently using it on this RP journal; it inspired me to change my navigation page after eight thousand years. 👀

[feliny]

This is very gorgeous, well done!

I am having issues with the text colour. These are the colours I have for each link:

LINK

However, the text is somehow not letting go of the original text link colour (#911c35) even though that hex code is nowhere in the code for me (even through CTRL+F) since I replaced it with color: #f1c6c6;.

Any idea how to fix this?

Thanks :)

EDIT: I've tried to view it in different browsers and nada. Entering the page shows no issues though.

[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 :)

[lvb]

This is so lovely! I'm using it now on this roleplay journal

[yanyan]

just want to say this is so good. definitely using this for my fic journal soon.

[paravore]

hello! thank you so much for the code!! i'm wondering if you can help me with something? i attempted to make an edit to it so that the text would be on the right and the solid color boxes next to the text would be on the left. but, i'm running into an issue of getting it to stay aligned at the border between the image and the color block. i can get it to move over by adjusting the left margin, but i can't get it to stay consistent even if the screen resolution/width of the browser window changes. would you be willing to help? ;u;

here's what i have so far:
<lj-raw><div style="margin: 0 auto; width: 400px; display: flex;"> <div style="width: 250px; height: 400px; background: url('https://i.imgur.com/EdayhGQ.png') center; background-size: cover;"></div> <div style="width: 150px; height: 400px; background-color: #000000;"></div></div> <div style="margin: -300px 40px 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: left;"> <div style="width: 267px;"> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link one</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link two</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link three</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link four</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link five</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; 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>

with the live version of my attempt here... thank you for your help!!

[marwood]

hello!! i am SO sorry for how long it took me to get back to you – i rarely check notifs on this journal so i just totally missed your comment, my bad!! here is a fix for you:

<lj-raw><div style="margin: 0 auto; width: 400px; display: flex;"> <div style="width: 250px; height: 400px; background: url('https://i.imgur.com/EdayhGQ.png') center; background-size: cover;"></div> <div style="width: 150px; height: 400px; background-color: #000000;"></div></div> <div style="margin: -300px 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: left;"> <div style="width: 400px; margin-left: 233px;"> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link one</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link two</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link three</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link four</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link five</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; 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>

basically you were almost there, it's just that from my (limited, lol) understanding of html, auto margin sort of centres the div by pushing it in equally on both sides based on the width of the display, so if you have the margin set to auto on the right but 40px on the left it's going to be different on every display. i hope this is what you were looking for!!

[paravore]

that worked!!! thank you so much!!