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

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

From:
( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.