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

December 2018

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

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

Family Trees


PREVIEW: ICONS


PREVIEW: NO ICONS


Information

Hey guys, that's right! The long-awaited family tree code is FINALLY here. Why did it take so long? Well, here's the story: This is the only way to do a family tree in CSS from what I've seen that supports spouses and non-nuclear offshoots. I've seen a couple of people using this pure CSS family tree for family trees here and there on IJ, which is also the method I used for mine as it seems to be the only fully functioning method for a pure CSS family tree.

Because of the nature of this code, I will not be able to offer code assistance for broken codes. You can find a color coded guide here to help you with nesting patterns, but I only have time to help with cases of editing colors/images/etc. on this code. Sorry about that! I've done my best to outline everything in the HTML as well as included an FAQ below.

Coding: Icons



Coding: No Icons



Installation

Paste into a custom style (or off-site equivalent if you don't have a paid account) and start adding/removing family members! I recommend using a live editor because this is a very easy-to-break code. I'll cover what are likely going to be frequent questions below really quickly; if you have any questions I haven't covered just let me know and I'll add them!

FAQs

I don't need a family member to link to a journal. Can I change that? Yep! I've included a non-linking option, so if a family member doesn't need a link you can change the journal link to span tags instead and it will look exactly the same.

<a href="http://JOURNALNAME.insanejournal.com"><img src="URL"><b>NAME</b><br>0000 — 0000</a> becomes <span><img src="URL"><b>NAME</b><br>0000 — 0000</span>

Can I do the same thing in the No Icons version? Yes! The method is the same as above, you just won't have an image tag in the mix.

How do I denote the relationship status? You'll want to add a class to the SPOUSE link or span tag, the spouse is the SECOND link or span in a set of parents. The three classes are class="married", class="together", and class="separated".



Can I use this in an entry? Sorry, but not really. This code uses :before and :after selectors to create the connecting branches, and those are accessible only in a CSS stylesheet, which means you wouldn't be able to include them in an entry code (the same way you can't add a :hover specification to links in an entry code.) This can be used either as-is in an HTML page here in IJ or elsewhere, in a Generator layout (with some editing), or possibly extracted and put into an entry with no cut if you put the :before and :after selectors in your CSS and also don't mind it looking broken in the entry view itself.

Can I merge the Icons and No Icons versions? Unfortunately not; doing so will cause a lot of broken connectors. If you're wanting to use the Icons version but don't need icons for some members, I'd suggest going with a mystery/faceless icon in those instances.

Can I use larger images? You can, but you may have to readjust other elements to get things to sit as needed again. This is not a fluid/responsive code. If you use larger images I recommend a set height and width for all images, and then editing any instance of 100px to reflect that. If things look off at that point, you may want to edit the connectors to account for new heights and widths. In this example I've changed the image dimensions to 150x80 and removed the border radius.

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!

Comments

Dec. 5th, 2018 10:28 pm (UTC)
Omg dude YESSSSSSSSSS
Dec. 5th, 2018 10:29 pm (UTC)
Dec. 5th, 2018 11:41 pm (UTC)
Holy motherforking shirtballs, this is amazing.
Dec. 7th, 2018 08:41 pm (UTC)
Heeee! ♥ I definitely couldn't have done it without picking at the original to see how it was done, and after a lot of searching around and seeing other goes at making a pure CSS family tree, I think the one I used for my setup method might??? be the only way to do it without sacrificing things people need??? Which absolutely sucks because I found an extremely cute flex one, and we all know how I feel about flex, but it didn't really have aunt/uncle type support and I tried to make one with flex that did and nah, it was either not gonna be possible or it would have been An Undertaking lmao.
Dec. 6th, 2018 01:24 am (UTC)
this is beautiful and i am 100% going to spend way too much time playing with it for the foreseeable future. THANK YOU!
Dec. 7th, 2018 08:41 pm (UTC)
AW YAY!!! I hope you have fun with it!
Dec. 6th, 2018 08:50 am (UTC)
this is so cool and you're a genius!
Dec. 7th, 2018 08:43 pm (UTC)
Aw ty ty ty!! ♥ I definitely couldn't have done it without picking at the original to see how it was done, and after a lot of searching around and seeing other goes at making a pure CSS family tree, I think the one I used for my setup method might??? be the only way to do it without sacrificing things people need??? Which absolutely sucks because I found an extremely cute flex one, and we all know how I feel about flex, but it didn't really have aunt/uncle type support and I tried to make one with flex that did and nah, it was either not gonna be possible or it would have been An Undertaking lmao.
Dec. 6th, 2018 10:15 am (UTC)
Yaaaas. Finally. It is heeeeeeere.

Now watch my head explode while making this work. xD
Dec. 7th, 2018 08:42 pm (UTC)
F I N A L L Y LOL. I only had a version of it sitting around for what like eight months?? I was just so worried about ease of use lmao.
Dec. 6th, 2018 11:59 pm (UTC)
OMG THIS IS AMAZING! I can't wait to play with it!
Dec. 10th, 2018 01:19 am (UTC)
Yassss! It's finicky, but it's super worth it when you desperately need a family tree LOL.
Dec. 10th, 2018 07:02 pm (UTC)
sometimes the best things are! I just need to stop making my family trees so complicated!
Dec. 9th, 2018 06:31 am (UTC)
Whoa, this is amazing! 👍👍
Dec. 10th, 2018 01:19 am (UTC)
Heee, thank you! :D
Dec. 10th, 2018 01:15 am (UTC)
Holy... this is fabulous!

I don't have any broken code (yet!) but I was wondering if with the code, is it at all possible to have on the same line: the child, their separated spouse, and new partner? Or does the code just kind of go 'no' at that?
Dec. 10th, 2018 01:19 am (UTC)
Aw, ty!!! ♥

It definitely won't support that, I'm really sorry!! If anyone else needs this feature please comment and let me know and if there's enough interest (because I foresee it being a pain in the ass LOL) I'll try and work the option in and update the code!
Dec. 10th, 2018 01:38 am (UTC)
Awww that's a shame. But having seen how the code reacts when I did try to I can see why it doesn't currently work. Anyway if anyone ever does decide they want that feature please give me a heads up :)

Aside from that code is behaving for me at the moment so yay! :)
Dec. 10th, 2018 02:27 am (UTC)
welp. knew it was going to happen eventually lol.

i don't think the code likes large families since a) i have to zoom out (until it's teeny) to see the whole thing since the left half seems to get cut off, and b) even though (afaik) i've gotten the nesting code right i have 2 partners not on the same line.
Dec. 10th, 2018 10:37 pm (UTC)
Hey, so! In .tree ul you'll want to change justify-content:center; to justify-content:flex-start; and you should be able to side-scroll with no issue! Check out this thread for more info and a fix to keep your header top-center during side-scrolling!

(I'm not sure about your relationship hiccup though; I'm sorry! If it's not a broken nesting pattern then it's a glitch when nesting too many of some thing or another, so if you can check through and verify that it's not a broken pattern I'll take a look and see if I can fix the glitch!)
Dec. 10th, 2018 10:53 pm (UTC)
♥ That helped a bunch!

(I've looked through a couple times now, and as far as I can tell the nesting pattern isn't broken. I even tried adding in </ul> and such in places as a test but that definitely broke the code. So you might be right about it being a glitch of nesting too many along the same line when the 'space' isn't available.
Dec. 10th, 2018 11:06 pm (UTC)
I've been having this problem, too. Additional info: it seems like, if your tree is wide enough, the spouse will stack like that if the couple have no children or only one child—once they have two, it goes back to normal. Not sure if that helps.
Dec. 14th, 2018 07:13 am (UTC)
(souffle on her character's journal now...)

Yeah i noticed that as well when I was filling in stuff and hadn't gotten to adding the kids a couple had yet.
Dec. 10th, 2018 08:40 pm (UTC)
Hi Tess! I love, love, love this! THANK YOU!! I normally make giant images in PS for things like this and this is so much nicer and easier to edit!

Unfortunately, I'm also having the icon version cut off the left side—even before I started editing anything, just as is. Any insight would be marvelous! Thanks again!
Dec. 10th, 2018 10:07 pm (UTC)
Never mind! It WAS just because it was too big. I changed the justify-content in the tree container to left instead of center and now I can see it all. I was able to re-center h1 by messing with padding-left; h2 is giving me trouble, but I'll defeat it!

Thanks again, Tess! You rock!
Dec. 10th, 2018 10:29 pm (UTC)
OHHH this is great info! I hadn't had time to look into it yet, but I'll take a look at your fix soon and check some things out and add information to the FAQ with your finds; thank you so much for helping with troubleshooting! That tracks though, haha. Centered flex content that cuts off can be finicky, so!
Dec. 10th, 2018 10:34 pm (UTC)
For the header, I'd recommend added position:fixed;left:0;right:0; to the CSS for header and add #whole{padding:120px 0 0 0;} to your CSS to make room for it! That way it'll stay center top while you're side-scrolling.
Dec. 10th, 2018 11:04 pm (UTC)
Re: Above: I'm so glad I could be at all helpful. I've learned almost everything I know about coding, limited though that may be, from your tutorials and codes! (And now I'm going to go to school for it!)

Thank you for the header fix! Here's an annoying question about it, though (sorry!): it's awesome for side scrolling but when I scroll down the older generations float in front of it—is there a way to have it scroll up with them? It's great as it is, but I was curious!

(Also sorry that I keep blowing up your notifications by having to make all my comments twice because I don't know how to use IJ, apparently.)
Dec. 10th, 2018 11:12 pm (UTC)
AW, thank you! Oh man, that's awesome!!!

Okay, so, this is uhhh entirely on me lmao. We'll pretend I didn't totally mess up this thing I've done approx. a million times & can do in my sleep, because that seems to be my theme for the day. I can't believe I didn't account for that LOL. The simplest fix is to add the background from body to header as well, and then add a z-index:2; to the header while you're at it! But if you want a fix that doesn't keep the header over the tree as you scroll I can see about coding up a different method for you!

(Don't even worry about it LOL. I have days where I am literally incapable of commenting without having to delete it and repost for some reason or another hahaha.)
Dec. 10th, 2018 11:52 pm (UTC)
I'm really excited!!

Thank you! This is great. A version where the header doesn't go over the tree would also be great, but only if you feel like it/have time—I know you've got plenty of other exciting things to work on!

(Glad I'm not the only one!)(Oh my god I literally did the same thing again—I am a MESS.)
Dec. 11th, 2018 12:01 am (UTC)
Yeah, I bet!! What classes are you taking?

Yeah, I can def poke around at a non-fixed header option soon! I'm hesitant to mess with code today though, because I am CLEARLY having trouble humaning right now hahaha.

I AM LAUGHING SO HARD. WE'RE BOTH HAVING SUCH A DAY LOL.
Dec. 11th, 2018 12:29 am (UTC)
It's a one year certificate program because I already have a BA. My first semester will be Website Development (so, like, HTML, text, graohics, it would seem), System Administration, Java, and an "Upper level computer elective" that I choose with a faculty advisor. And then the second semester is more Website Development and Java, a class on CSS, JQuery, and other advanced web technologies, and a Database Systems class. I wish I was starting in the spring, but it'll probably be fall because, you know, the omnipresent Life Stuff.

WHY ARE BRAINS. Especially ones with our particular shared set of idiosyncrasies!!
Dec. 11th, 2018 03:33 pm (UTC)
Okay what makes it for me is the absolutely adorable hearts and rings images! These are amazing regardless tho.
Dec. 11th, 2018 10:29 pm (UTC)
THAT'S MY FAVORITE BIT TOO LOL, ty!! It was a last minute decision and I'm so glad I decided to because it wound up being extra cute haha.
Dec. 15th, 2018 04:47 pm (UTC)
YES YES YES I HAVE BEEN LOOKING FOR SOMETHING LIKE THIS FOREVER!!