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!
×

October 2019

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

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

Icon Directory [Multi-tag Search]


LIVE PREVIEW


Information

Hey guys! This month we've got something a little different for our HTML page; this one's for the iconmakers on the site, but this could easily be edited into a cast list or character roster! This directory page code allows you to combine multiple tags to narrow your search, something I forever wish we could do natively on IJ haha. Enjoy! ♥

Please note: I don't usually do this, but this page is not compatible with Insanejournal as it uses jQuery. You will HAVE to have webhosting somewhere offsite, such as Tumblr or a dedicated host, to put this code into. Because these types of pages can't be used on paid IJ accounts I won't be making/posting many of these unless there is a demand for them, so please make sure to comment if you'd like more codes with programming in them or I won't make them a focus.

Icons used in the demo are from the lovely [info]figmented!

UPDATE 9.23.19 A small update to fix this issue. Sorry about that, guys!

The Coding



Less Icons?

No problem! If you'd rather have three or six icons instead of nine, just delete the image tags you don't need!

Something other than icons?

Also not a problem! If you're using this for screencaps or a character list and you'd rather have just one image, just delete the image tags you don't need and change the following:

.set img{width:100px;height:100px;margin:10px;background:var(--page-bg);}

To this:

.set img{width:100%;height:100px;margin:10px;background:var(--page-bg);}

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!
Tags:

Comments

Sep. 4th, 2019 11:23 pm (UTC)
this is also really cool! and tempting
Sep. 5th, 2019 02:05 am (UTC)
I FEEL YOU LOL. I may or may not be making advanced layout and code search directories so that people can search by advanced criteria using this as a base lmao. (It's sort of on hold atm OBVIOUSLY HAHA but I'm hoping to have them done and up by November!)
Sep. 5th, 2019 02:38 am (UTC)
lol def take your time there! it sounds like you've got a lot on your plate. i'm excited to see what you come up with tho! bc that sounds really awesome
Sep. 5th, 2019 12:33 am (UTC)
I have been looking forward to this since you've shown me the sneak peek. Now to see if I can figure out how this works.
Sep. 5th, 2019 02:05 am (UTC)
Yasss! Lmk if you get stuck or if my instructions are dumb LOL.
Sep. 5th, 2019 03:33 am (UTC)
Tess, this is absolutely freaking amazing. Once again, you blow everything else out of the water.
Sep. 5th, 2019 02:59 pm (UTC)
I love this! I hope you make some more of these, it would be wonderful to have some more variation among the directories. :)
Sep. 5th, 2019 04:27 pm (UTC)
yaaas i already use something similar to this for [info]oslo and honestly i could never go back for icon directories! it's SO useful
Sep. 6th, 2019 02:38 pm (UTC)
I will be more likely to use the IJ based directory for icons (dammit, you are going to force me to make an icon journal now lol) but I maaaay attempt to repurpose this as a new muse list. This is amazing, you are amazing! 😍
Sep. 7th, 2019 02:58 am (UTC)
So, I am putting together a muse list using this code here and I've noticed when I use the filters, there are large gaps between rows which I am assuming is because of the flex box alignment, but I can't figure out what to change it to to eliminate the giant space between rows...

(I know you're in the middle of moving and etc so absolutely no rush answering this!!!)
Sep. 7th, 2019 03:03 am (UTC)
LOL NEVERMIND, I FIGURED IT OUT RIGHT AFTER THIS COMMENT, SORRY ♥
Sep. 21st, 2019 04:56 pm (UTC)
Hello! This is gorgeous and I'm practically drooling at it, and the idea of having my big directory match my layout. Plus, all the flex and wrapping is just gooooorgeous ♥ However, I'm having some trouble wherein the new rows of icon sets are starting really far down for some reason. I've uploaded the coding here if you could take a look and maybe see what I'm doing wrong? It started when I added more filter categories down the side so I'm wondering if it's something to do with that? Hopefully you can help, and thank you in advance!
Sep. 21st, 2019 10:23 pm (UTC)
Aw ty ty!! I LOVE this one lmao.

I also... don't know why it's doing this, but I'm looking into it for you! ♥
Sep. 22nd, 2019 07:31 am (UTC)
I can see why! It must have taken you aaaages, omg.

And I'm glad I wasn't missing something obvious, at least! Take your time ♥! I know how busy you are, and there's seriously no rush.
Sep. 23rd, 2019 08:34 pm (UTC)
I'm still looking into this and as of right now can't find why it's doing this, but I do see that once you have a full page of icons in that's equal to or exceeding your sidebar height it will align properly. I'm still trying to fix this issue, though because wtf lmao.
Sep. 23rd, 2019 08:36 pm (UTC)
JUST KIDDING I REALIZED THE ISSUE THE LITERAL SECOND I POSTED THAT COMMENT. LIGHTBULB HAHA. Add the following:

main{display:flex;flex-wrap:wrap;align-items:flex-start;}

I've also added it to this entry so that future copies of the code are correct.
Sep. 23rd, 2019 08:40 pm (UTC)
Perfect! That did it! :D Thank you so much, honey! ♥ You are a genius.
Sep. 23rd, 2019 08:44 pm (UTC)
My dumb ass hahaha. Definitely should have seen what was missing sooner, but we'll blame period fog. 😂
Sep. 23rd, 2019 08:53 pm (UTC)
The best thing to blame, and the best explanation! ♥ And honestly I'm not sure how your brain doesn't dribble out of your ears from all of this coding, I really don't know how you do it. Especially when they're all so gorgeous!
Sep. 28th, 2019 10:44 pm (UTC)
I thought you might like to see the finished product, so here it is in all its glory! This code is so gorgeous, I can’t get over it 😍