Previous | Next

Can't Stop This Feeling: Moodboards



Today, as helped decided by my $5+ patrons over on Patreon, we have three mood boards; two larger ones with varying setups, and a mini! If you like these I'll be sure to make more in varying styles, so be sure to comment if you want more mood boards! And if you'd like to get in on future polls for what types of free-use content I'm posting every month, head on over to my Patreon.

These mood boards should be somewhat easy to edit with a height/width guide (below) and basic plugging in of images is as easy as 1-2-3. Enjoy! ♥

And don't forget—this is the last day of my 20% off sale!

Cant get enough mood boards? [info]marlovian has two great ones too!

Square Coding

Circle Coding

Diamond Coding

Installation Guide

Paste into an entry and fill in the following!

URL1 through URL4 - Background images
ICONHERE - Icon image

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

#fff - Background color
#ddd - Border color

Inner widths/heights are percentage-based, so if all you want to do is scale the whole code up or down it's as simple as changing the outer width and height!

600px - Height on Square and Circle
500px - Width on Square and Circle
400px - Height and width on Diamond

0.5% and 1% - Padding/space between images

30% and 50% - Positioning of icon on Square
38.8% and 56% - Positioning of icon on Circle
36.2% and 55% - Positioning of icon on Diamond

40% and 53% - Width/height - top left - Square
58% and 53% - Width/height - top right - Square
40% and 45% - Width/height - bottom left - Square
58% and 45% - Width/height - bottom right - Square

58% and 53% - Width/height - top left - Circle
40% and 53% - Width/height - top right - Circle
40% and 45% - Width/height - bottom left - Circle
58% and 45% - Width/height - bottom right - Circle

49% and 56% - Width/height - top row - Diamond
49% and 42% - Width/height - bottom row - Diamond

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!


Jul. 15th, 2017 09:30 pm (UTC)

*faint* MORE
Jul. 15th, 2017 10:20 pm (UTC)
Oct. 9th, 2017 02:04 am (UTC)
hi! i was wondering if there was a way to add a link to the icon image? i can't seem to figure it out. :(
Oct. 9th, 2017 03:01 am (UTC)
Oh, that's a great idea! You can, but a little extra editing needs to be tossed in (it's fast, though!) Which version were you needing it for?
Oct. 9th, 2017 03:03 am (UTC)
credit goes to my friend, tbh! i tried to figure it out for her, and when i couldn't help i thought i'd ask the source. ♥ it's for the square one!
Oct. 9th, 2017 03:16 am (UTC)
Nice nice! Okay, so when you're adding a link to the icon, obviously just adding the link shoves it all the way down like wtf, haha. So what you're actually going to do is add a link AND move the positioning from the icon to a style tag in the link instead so it stays in its lane.

So! For the square one this:
<img src="ICONHERE" style="background:#fff;padding:1%;width:100px;height:100px;position:relative!important;left:30%;bottom:55%;">

Becomes this:
<a href="LINKURL" style="position:relative!important;left:30%;bottom:55%;"><img src="ICONHERE" style="background:#fff;padding:1%;width:100px;height:100px;"></a>

And this method of moving positioning to the link instead of the image will work with any of them, so have fun! ♥
Oct. 9th, 2017 03:17 am (UTC)
THANK YOU SO MUCH! ♥ Thank you for taking the time to describe what you did, and why, too! That's incredibly helpful and thoughtful of you.
Oct. 9th, 2017 03:19 am (UTC)
Aw, no problem at all! ♥ I really like for people to know why the changes work, I feel like it goes a long way in helping make the edit pan out!

(PS the topbar on your journal is super adorable!)
Dec. 14th, 2017 07:23 am (UTC)
is there a way to add hover-text to the images?
Dec. 14th, 2017 08:43 pm (UTC)
You sure can! Add title="infohere" to each div that contains an image background and/or to your icon and each image area will have its own hover text! Or you can add it to the main outer div or just the icon if you only want one/want it in a specific spot.