Hi again!

Since my previous midnights-style covers were a hit, I thought it would also make a good navigation overlay and decided to spin the code into a splash page. It will only work on the main page of your journal, not on singular entries. If you want the navigation to be bound to an entry instead of as an overlay, I would highly recommend using the previous cover code instead!

Also, I tried it on a couple default Dreamwidth layouts and it seemed to work just fine, but I didn't test it on every single DW layout so it may or may not behave a little bit buggy on ones I didn't test. It will not work as-written with layouts imported from livejournal or insanejournal, as far as I know. But onto the installation!

Installation

1. Post a new entry to your journal and copy this code:
   <div class="midnights_nav"><div style="display: grid;grid-template-columns: 1fr 1fr 2fr;grid-template-rows: 1.25fr 0.75fr 2fr 0;grid-column-gap: 0px;grid-row-gap: 0px; width: min(100vw, 100vh); height: min(100vw, 100vh); background: #ece8e5"> <div style=" grid-area: 1 / 2 / 2 / 4; align-self: end; justify-self: bottom; font-size: min(10vw, 10vh);font-family: helvetica, verdana, sans serif; font-weight: 800;background: -webkit-linear-gradient(45deg, #COLOR1, #COLOR2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.05em;text-align:left; line-height: 1.2;">NAME</div> <div style="grid-area: 1 / 1 / 4 / 2; align-self: end; justify-self: left; font-family: helvetica, verdana, sans serif;font-size: min(2vw, 2vh);font-weight: 600; background: -webkit-linear-gradient(45deg, #COLOR1, #COLOR2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 1em; line-height: 95%; text-align: left;"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="http://shipping.dreamwidth.org">Code</a></div> <div style="grid-area: 2 / 2 / 4 / 4; background: url(BACKGROUNDURL) center center; background-size: cover;"></div><div style="grid-area: 1 / 1 / 1 / 1; font-family: helvetica, verdana, sans serif;font-size: min(3vw, 3vh);font-weight: 600; background: -webkit-linear-gradient(45deg, #COLOR1, #COLOR2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 1em;"><a href="#entry-ENTRYNUM">x</a></div></div></div> Replace COLOR1 (3 instances), COLOR2 (3 instances), NAME (1 instance), BACKGROUNDURL (1 instance), all the links, and ENTRYNUM (1 instance - instructions below on how to find the ENTRYNUM). If you choose to delete the link credit, please link back to this journal elsewhere so other people can find this code!
2. This should make the album cover show up as a regular entry. Go to the entry and find the numeric id of the entry in the url (http://journalname.dreamwidth.org/ENTRYNUM.html). Remember to edit the entry to replace this id.
3. Make sure to either forward-date this entry or sticky it so that it always shows up when you go to your journal.
4. Now go to organize-->customize style and under custom-css, copy the following and replace all instances of ENTRYNUM with the id from a previous step:
   #entry-ENTRYNUM{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.6); z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0px; margin: 0; border: none; } #entry-ENTRYNUM * { padding: 0px; margin: 0; } #entry-ENTRYNUM .header, .footer, .poster, .userpic{ display: none; } #entry-ENTRYNUM:target{ opacity: 0; transition: visibility 0s 0.5s, opacity 0.5s linear; visibility: hidden; }

If you'd like to see a live example, please check it out here. I did test this on a chrome 108, firefox 84, safari 14.1 and ios 16.1. This will not work with IE.

I tried it on themes Caravan, Tectonic, Patsy, Leftovers, Mobility, and Abstractia. The spacing between lines on the navigation changes a little bit, but other than that it should work fine on all those layouts.

Please enjoy and happy holidays!

45 Nie Mingjue Icons

NMJ x 45

( Read more... )

989 Loki Episode 3 Icons

Sylvie x 203
SPOILERS FOR EPISODE 3 OF LOKI

( Read more... )

■ trust ■ friendship ■ category 3 ■ catefoury ■ trust ■ friendship ■ category 3 ■ catefoury

23 Jin Guangyao/Meng Yao

Jin Guangyao x 23

( Read more... )

429 TGCF Donghua S1 Special Ep Icons

Various x 429

( Read more... )

15 Jiang Cheng minipost Icons

Jiang Cheng x 15

( Read more... )

255 Heaven Official's Blessing Episode 11 PART 1, Manhua 49 Icons

Various.. Sorry guys part 2 coming tomorrow BUT YAY we officially are getting a s2

( Read more... )