[10] Make It Rain

[lina_trinch]

Hi Friends

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis nisl a sem bibendum pellentesque. Nullam nec eros eros. Nam ac suscipit sem, a placerat est.

link ♦ link ♦ link ♦ link

Codes:

With Preset Images: <!---MAIN BLOCK---> <div style="display:block;width:400px; height: 314px !important;overflow:hidden;"> <!---SELECTOR---> <details> <summary style="outline:none; color: #f7f7f7;cursor:pointer;height: 64px !important;"><img src="https://img.icons8.com/dusk/64/000000/rain.png"></summary> <!---DROPDOWN---> <div style="width:400px; height: 250px; border-radius: 25px;background-image: url(https://66.media.tumblr.com/tumblr_me65bsyWgF1rg3ywto1_400.gif), url(https://thumbs.gfycat.com/PiercingNeatChick-size_restricted.gif);"> <div style="width: 200px; height: 250px; background: rgba(0,0,0,0.5); align: center; padding: 45px 5px 0 5px;"> <div style="text-align: center; font-size: 12px; font-family: helvetica; color: rgba(250,250,250,0.8);"> <b>Hi Friends</b> <br /><br /> <div style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis nisl a sem bibendum pellentesque. Nullam nec eros eros. Nam ac suscipit sem, a placerat est. </div><br /><br /> <a href="URL" style="text-decoration:none; color: rgba(250,250,250,0.8);font-variant: small-caps;">link</a> ♦ <a href="URL" style="text-decoration:none; color: rgba(250,250,250,0.8);font-variant: small-caps;">link</a> ♦ <a href="URL" style="text-decoration:none; color: rgba(250,250,250,0.8);font-variant: small-caps;">link</a> ♦ <a href="https://killthecake.dreamwidth.org/" style="text-decoration:none; color: rgba(250,250,250,0.8);font-variant: small-caps;">credit</a> </div></div> </div> </details> <!---BACKGROUND---> <div style="width:400px; height: 250px;border-radius: 25px; background-image: url(https://thumbs.gfycat.com/PiercingNeatChick-size_restricted.gif);"></div> </div>

Without Preset Images: <!---MAIN BLOCK---> <div style="display:block;width:400px; height: 314px !important;overflow:hidden;"> <!---SELECTOR---> <details> <summary style="outline:none; color: #f7f7f7;cursor:pointer;height: 64px !important;"><img src="ICON"></summary> <!---DROPDOWN---> <div style="width:400px; height: 250px; border-radius: 25px;background-image: url(TRANSPARENT_BG), url(BACKGROUND);"> <div style="width: 200px; height: 250px; background: rgba(0,0,0,0.5); align: center; padding: 45px 5px 0 5px;"> <div style="text-align: center; font-size: 12px; font-family: helvetica; color: rgba(250,250,250,0.8);"> <b>Hi Friends</b> <br /><br /> <div style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis nisl a sem bibendum pellentesque. Nullam nec eros eros. Nam ac suscipit sem, a placerat est. </div><br /><br /> <a href="URL" style="text-decoration:none; color: rgba(250,250,250,0.8);font-variant: small-caps;">link</a> ♦ <a href="URL" style="text-decoration:none; color: rgba(250,250,250,0.8);font-variant: small-caps;">link</a> ♦ <a href="URL" style="text-decoration:none; color: rgba(250,250,250,0.8);font-variant: small-caps;">link</a> ♦ <a href="https://killthecake.dreamwidth.org/" style="text-decoration:none; color: rgba(250,250,250,0.8);font-variant: small-caps;">credit</a> </div></div> </div> </details> <!---BACKGROUND---> <div style="width:400px; height: 250px;border-radius: 25px; background-image: url(BACKGROUND);"></div> </div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ If you replace the top icon, make sure that you use an image that is 64px high. If you don't or you use text instead, it'll mess up the code. However, you can change the value in height: 314px !important; until you get the desired effect. ❖ This little trick is brought to you by the little dropdown details/summary code thingy. Meaning, there's a tiny arrow that's impossible to get rid of. I made it invisible here (unless you're using a different skin on the site) by changing its color to that of the background. If you also want the little arrow to disappear, just change the color of it to the background you're using, like the one in your journal. Obviously, this isn't a fix for everyone. Anyway, the colors are down below. ❖ The code doesn't scroll. You'll either be forced to use the space you're given or adjust several of the dimensions in the code with a little css know-how. ❖ If you have problems editing this code, let me know. I'll help you out. ❖ There is a small problem in hoping that other people know that this is a dropdown menu thing... I made it so the cursor changes when it hovers over the icon space, but if you think that's not enough, you can always leave a small note somewhere. :T Sorry about that one, folks. I've gone full aesthetic. You never go full aesthetic. Ctrl+F & Replace: ❖ ICON - Image on the top that you click on. I got that image from Icons8. Highly recommended you pick one that has a height of 64px. (That site makes it easy for you to customize dimensions.) You'll have to edit the code if you use something else. ❖ TRANSPARENT_BG - The transparent gif or image used to overlay on your background. ❖ BACKGROUND - The background gif or image. There are two places in the code to input the url. It needs to be in both places for it to work. ❖ URL - Urls for links. ❖ Hi Friends - The header. ❖ Lorem Ipsum - The small text blurb. Keep it short. ❖ link - What to call your links. #f7f7f7 The arrow's color. rgba(0,0,0,0.5) Dark background where the text sits. rgba(250,250,250,0.8) Text color.