[6] Fake Splash Page Layout

[lina_trinch]

❖ Mobile friendly! ❖ Stylized control strip ❖ Tag, archive, icon, & comment pages ❖ Navigation and links modules ❖ Links change color on hover

code here!
temporary live-preview here!
imgur album preview here!

❖ I wanted to try making a splash page and decided that was way too complicated on DW. You might get one of those in the future but, for now, we're stuck with this thing. ❖ Go to Select a New Theme and select Tabula Rasa, the Plain version. ❖ Copy and paste the code into the Use embedded CSS field under Custom CSS. ❖ Replace BACKGROUND_IMG with your chosen background image's url. I recommend something taller than it is wide to get the same effect as the example. Whether or not you go by that, just know that the image is coded to fit into the screen from top to bottom but not necessarily from left to right. ❖ Considering the width of your background image, the content may not fit inside of it as neatly as it does on my example. If you want to change this, ctrl+f width: 80%; and width: 60%; to raise or lower their values. I'd work with it on increments of 10% and go from there. Just make sure you keep them all the same (all 80%'s turn into 50%, etc). ❖ Under Choose Page Setup (at the bottom), select "1 Column (modules at top and bottom; no sidebar)," aka the second one. ❖ Make sure Use layout's stylesheet(s) is checked. In the Custom stylesheet URL field, paste in: https://fonts.googleapis.com/css2?family=Montserrat+Subrayada&family=Roboto+Condensed:wght@300&display=swap ❖ Go to the Presentation tab. Select "text-only" for the following options: • Select whether user interaction links are printed as text or using the available icons • Select whether entry management links are printed as text or using the available icons • Select whether comment management links are printed as text or using the available icons #fff #ebebeb #c4c4c4 #9c9c9c #000

Comments

[glitchesaintshit]

Hey! Cool layout!

I've been playing around with it on one of my side accounts--is there any way to change the page background (white bars on the side) to black? I've tried just about every attribute in every spot I can think of & I got everything ELSE changed to dark, but not those! If not, no worries, thanks anyway ✨

[lina_trinch]

Thanks for liking it! And, of course!

At the very top of the code, under body, you'll see the first line labelled background. We're just going to tack a color to the end of it. Like so:

background: url("BACKGROUND_IMG"), #000;

And that's it! Have fun with it. c:

[glitchesaintshit]

thanks so much! lifesaver!! 💖

[moonwitchery]

hey! i have just noticed this layout is weirdly incompatible with your site skin codes (i use the light rainbow one mostly) - when i have the site skin active, the image doesn't show up, but appears immediately when i disable it. i do have some additional code so i removed it to check if that was the issue and it resolved, but no dice. not a super huge deal, but i thought i would flag it up to you. thanks for yr time + work :>

[lina_trinch]

Hi! Thanks for letting me know! But I've been trying to recreate this error and can't seem to be able to. The live preview layout and your own seem to work fine with all of the skins I've made, so I can't really figure out what problem you're having. :(

What browser are you using? And if you don't mind, can you send me a copy of the site skin code you're using via pastebin or something? With the additional stuff included, just in case. Perhaps I updated my side of the code and just... forgot?? That's extremely possible.

Either way, I'll try to help you get to the bottom of this!

[elegiaque]

Hey, sorry for the delay in getting back to you! this is the code that I have, and I'm currently using an up to date Vivaldi browser. I might have missed tweaks that I made that caused issues, too, I try to keep all my edits separate at the bottom but you never know \m/

[lina_trinch]

The code you sent also seems to work fine. If I had to guess, I would think it's the browser you're using. I did a little googling on how extensions work with Vivaldi. Seems you just use Chrome extensions like normal, but some of them do have conflicts. Stylus appears to be one of them.

For now, go into your layout's code. At the top under body, you'll see: background: url("BACKGROUND_IMG");

Add an "!important" in there so that it looks like: background: url("BACKGROUND_IMG") !important;

See if that works for the time being. Either way, I'm going to try working on making these more compatible for other browsers, but there may not be anything I can do in this case. Sorry. :(

[moonwitchery]

!important absolutely fixed it for me - thank you for looking into it, I was worried it was a browser issue when it didn't seem to be anything I'd added in, lol. Much appreciated, this definitely solves it for now :)

[lina_trinch]

no problem! I'm really glad that worked.

By the way, if you use uBlock Origin on Vivaldi, we might be able to just use the skins there and it might be able to circumvent any conflicts. Let me know if you'd like to try that out. I can attempt to walk you through the process, lol.

Either way, you're welcome! I'm glad it's working now. c:

[juneghost]

hi! i use this in my other account but how i can add this one -> https://i.imgur.com/1TDvhtQ.jpg to background image?

[lina_trinch]

Whichever layout you want to use is up to you! As far as where the put the background image, search (or use CTRL+F on a Windows computer) to find BACKGROUND_IMG and replace that with your URL.

IIRC, though, Dreamwidth may not like using images from Imgur. If this doesn't work, try hosting your image somewhere else and trying again.