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!



INTRODUCTIONFRAME BREAKDOWNCSS GLOSSARYDIVS OR SPANS?
GENERATOR SETTINGSFAQ & TROUBLESHOOTING
VIEW EXAMPLE JOURNALVIEW THE DOCUMENTATIONASK A QUESTION

Comments

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

EXAMPLE:

#sidebar{
visibility:visible;
position:fixed;
top:50px;
left:200px; change this to 'right' instead
width:140px;
text-align:center;
font-size:10px;
}


AND

table{
width:650px;
margin-right:100%;
margin-left:400px;

}
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

table{
width:650px;
margin-left:100%;
margin-right:400px;
}

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{visibility:visible;position:absolute;top:200px;right:100px;}
#sidebar img{display:inline;}

#topbar{visibility:visible;position:absolute;display:block;top:20px;left:50%;margin-left:-250px;width:500px;}
#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">
SIDEBAR CONTENT
</div>

<span id="topbar">
TOPBAR CONTENT
</span>


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;}