Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

August 2019

S M T W T F S
    123
45678910
11121314151617
18192021222324
25262728293031

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

Moodboards: Can't Stop This Feeling





© TESSISAMESS
© TESSISAMESS
© TESSISAMESS



Information

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!

COLORS
#fff - Background color
#ddd - Border color

OTHER VALUES
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!

Auction!

Comments

Jul. 15th, 2017 09:30 pm (UTC)
OMFG YES and a GUARDIANS theme?

*faint* MORE
Jul. 15th, 2017 10:20 pm (UTC)
I COULDN'T HELP MYSELF LOL. Glad you like! ♥ I'M SUPER STOKED TO MAKE MORE LATER TBH.
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.
Nov. 9th, 2018 07:01 am (UTC)
I need some help... I am trying to use the diamond coding, and somehow the picture in the diamond seems to be... floating below the background diamond? How do I get it to come back up? It's over here. Ty ty ty ty ty ty.
Nov. 9th, 2018 07:50 am (UTC)
Okay, I think I fixed its height by adjusting the first margin parameter. However, how do I make the icon in the diamond not start repeating itself? The ring image seems to move the right final side bit of the ring to the left side... I'm not sure where in the translate/transform/etc it might be doing that since it doesn't do that with your Peter Quill gif! I've tried using square and rectangular dimensions.