killthecake | [47] Single Image Navs

Header

→ Link

Code:

<div style="text-align: center; width: 100%; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; font-size: 28px; color: #111; cursor: default; margin: 5px 0;">
      Header
    </div>

</div>

</div>

Header

→ Link

Code:

</div>

</div>

❖ This is another code released early on the Patreon to my subscribers! Coming out SUPER late this month, but it's here!

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ This is all done via the magic of grids, if you were wondering. But you can add as many links/text/whatever as you want.

❖ It also helps if the image/gif you're using is larger than 500x300 (for the small one) or 500x600 (for the large one). You can still use something smaller, it'll just look a bit blurry.

Ctrl+F & Replace:
❖ IMAGE_URL - this is your background image. Feel free to use gifs!
❖ URL - link urls
❖ Header - if you want a header in your nav, this is it
❖ Link - the name of your link, comes with a little arrow

silver image placeholders
transparent these are the portions of the grid that allow the image/gif behind it to come through. You can change these if you want to get creative.

#f7f7f7 the "transparent" part that's really Dreamwidth's default background. When using this code with a layout, just change it to the same color that's the background of your entry.
#111 text and links

rgba(0,0,0,0.4) shadow for the text box
rgba(255,255,255,0.6) slightly transparent, light screen over the text box for better contrast. You can change the "255's" to "0's" if you want to make it dark. You can also change the "0.6" higher or lower to make it more and less opaque with "1" being solid and "0" being transparent.