Previous | Next

The Ultimate Generator Tutorial

This is a tutorial I've been meaning to do for literal years! It took forever to get to it, but today we're going to pick apart the train wreck that is Generator in hopes that more people can actually use it to create custom content. Exciting stuff!

This tutorial is going to cover any and everything I've ever learned while fighting working with Generator, so it's going to be extremely long. It's worth it, though; I promise! If you've ever wanted to make your own Generator layout, but the task seemed too daunting, you are right where you need to be. And, with that, away we go!

Don't forget to post the creations you make using this new workable base at [info]rpresources and the new community, [info]s1generator, which I've created for all Generator-specific needs!



May. 4th, 2016 03:01 am (UTC)
May. 4th, 2016 03:13 am (UTC)
May. 4th, 2016 03:26 am (UTC)

May. 4th, 2016 07:00 am (UTC)
SAVING FOREVER! You are amazing.
May. 4th, 2016 07:01 am (UTC)
Heeeee, THANK YOU! ♥ I'm glad it's finding use so soon!
May. 4th, 2016 04:29 pm (UTC)

Mem'd this so I don't lose it again. <3

May. 4th, 2016 08:14 pm (UTC)

Re: Mem'd this so I don't lose it again. <3

Yassssssss, it's finally up!
May. 5th, 2016 03:25 am (UTC)
Have I told you that you're a genius lately? <3
Aug. 18th, 2016 09:10 pm (UTC)
Is it possible to limit the number of entries shown on the recent page? If so, how do I do this?
Jun. 6th, 2017 10:53 pm (UTC)
i am not tess, BUT if you go to this page of her tutorials and check out where she talks about 'LASTN_OPT_ITEMS' you'll find the answer ♥
Jun. 6th, 2017 10:47 pm (UTC)
hey! i love this so much. any chance that you could let us know how to switch the sidebar from the left to the right? i can't quite figure it out!
Jun. 6th, 2017 10:56 pm (UTC)
Hey, sure! All you'll need to do is use right:100px; (or wherever you want it on the right side) in the sidebar ID and then swap the margins in table


left:200px; change this to 'right' instead



Jun. 6th, 2017 10:57 pm (UTC)
thank you so much!
Jun. 6th, 2017 11:04 pm (UTC)
hmm, did you mean that i should switch things -right and -left on the second part? because when I tried


only the sidebar shows up.
Jun. 6th, 2017 11:07 pm (UTC)
OH pfft, I misspoke, sorry about that! Change margin-left to auto and margin-right to the amount of space you want between the content and the sidebar (so the sidebar width plus some wiggle room, usually.)
Jun. 6th, 2017 11:06 pm (UTC)
annnnd is it possible to have multiple sidebars? like one on each side or one on a side and one on top? i am so sorry for all the questions. i am just SO EXCITED that you have helped me finally understand generator layouts.
Jun. 6th, 2017 11:11 pm (UTC)
LOL don't be sorry! It's very possible, yes! You can make as many outside elements as you like, just remember only one can actually be a div (the rest need to be spans set to block if you want them to act like divs) and each new independent container needs visibility:visible; in it.

So if you have a sidebar with inner elements and a topbar with inner elements, only the outermost container holding all those inner elements needs the visibility set. If you plan to have images inside any of these make sure you set it to #sidebar img{display:inline;} or whatever the element ID is or the images just won't show up.
Jun. 6th, 2017 11:15 pm (UTC)
okay, cool! so, how would i go about giving these other elements an id/putting them into the code? for example, say i wanted to link the following on a top bar:

seriously, thank you so much! i am going to pm you about something unrelated to this btw.
Jun. 6th, 2017 11:22 pm (UTC)
Aw, no problem at all! (and okay!)

Okay so say you want a sidebar and a topbar! Here's your most basic CSS:

#sidebar img{display:inline;}

#topbar img{display:inline;}

Now, I'll need to explain something about the topbar positioning. To horizontally position an absolute or fixed element, you need left:50%; and margin-left: negative half of whatever the total width is (this needs to include padding and borders, so if you had 10px padding and 1px border you'd add 22px to the total width before dividing it in half for the negative margin.)

Your HTML will look like this:

<div id="sidebar">

<span id="topbar">

AND ONE MORE THING THIS IS ABSOLUTELY MY FAULT AND I AM FIXING IT RIGHT NOW LOL. There is a very minor bug in my docu that only effects topbars. Change this:

/* ORIGINAL TOP HEADER */ .shadowed{visibility:hidden;position:absolute;top:0;height:0;background:transparent;}

To this:

/* ORIGINAL TOP HEADER */ .shadowed{visibility:hidden;position:absolute;top:0;left:0;right:0;height:0;background:transparent;}
Jan. 31st, 2018 03:46 pm (UTC)

combine a code

I have a question about the code CAST & INFO: CITY STREETS

How do you combine(set the seccond code into the first code) that code. I have try differnd things but I can not get it done.

Can someone help me with this?
Jan. 31st, 2018 04:22 pm (UTC)

Re: combine a code

Hi, I'm sorry but could you give me more information over on the correct post? Are you wanting a combination of the inner pages to be text info and cast, or are you wanting each cast page to have a section for text info?
Apr. 3rd, 2018 07:14 pm (UTC)
I'm sure I've missed it but I spent an hour looking for the right coding to hide the website link in pretty basic generator layout. I don't mind the profile and calendar links but I the three together just look weird to me. I've scanned other layout codes to see where they are hiding it but every time I try to add it to my coding it changes other things, story of my coding life, what should I be looking for or what coding do I need to add to make just the website link be hidden from the generator layout?
Apr. 10th, 2018 04:32 pm (UTC)
Hey! So I'm sure there are technically quicker/shorter ways to do this, but since Generator is... Generator and nothing is actually labeled in a mindful way, the way I just worked out for you is most likely the most correct way to get exactly what you want with no unintended side effects. This will do it just fine for you! It's an in-depth target that goes into the top header table and the div inside it to grab only the first row of the righthand nested table, which is the website and then hide it!

table:first-of-type .shadowed table tr td:nth-of-type(2) table tr:nth-of-type(1){display:none;}

Let me know if you need anything else hidden!