The Ultimate Generator Tutorial

A comprehensive explanation of the most fought with layout on IJ

GENERATOR TUTORIAL INTRODUCTION

Hello, and welcome to 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! What inspired this tutorial? A few things, actually.
• There is no readily available Generator base.
• I see tons of Generator layouts around that don't have the full coding in place (ie. sidebar on Recent is missing from all other page views.)
• Most customized layouts for Generator that I see around (even my own!) are weighed down with unnecessary additions that don't actually style anything.
• There are no truly comprehensive tutorials for Generator.
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!

GENERATOR DRAWBACKS

Generator has a lot of drawbacks. A lot. Depending on your needs, not all of them will bother you. There are some of you who may look at this list and think, "I can totally live with all of that." But there's no denying Generator's problems, so you should be aware of what it can and cannot do when working with it to save yourself a potential headache later.
• No styled tags page
• No styled month page
• You cannot center your content on the page with a sidebar; topbars only
Limited userpic positioning**
• Limited bottom nav styling
• Limited archive styling
• Limited entry styling
• No linked subject lines
• Cannot populate information into sidebars (tags/page summary/calendar/etc.)
• Entry tags are not displayed in journal views
• Icons are not displayed on Recent unless it's a community account

**While writing this guide and creating our base code I finally devised a line of code to solve this longstanding issue! More on this later, but I'm so pleased to be able to give you guys this fix!

THE GENERATOR COMPLICATION

This is a little bit of an advanced explanation, so I'll try to explain it as best I can for people who don't do much code work. Bear with me!

Generator is comprised entirely of tables which, by today's HTML standards, is absolutely awful. No designer today would rely on tables for their site's framework. There are, of course, very specific instances where tables come in handy, but most times you can do it better with divs, which you would then style in the CSS.

So why is Generator a pile of nested tables upon tables? Because when it was created back in the early LiveJournal days, tables were still the primary go-to for setting up HTML pages. Now, of course, we have much better options available with div styling, an incredible expansion on valid CSS, and HTML5, which give us the freedom to individualize on a much deeper level.

"But how does this effect what I want to do to my layout?" you're probably not even asking. I'm going to tell you anyway! Why? Because to successfully work with Generator, you need to understand its limitations and why it functions the way it does.

WHAT THIS MEANS FOR YOU

Generator's framework has three things to keep in mind: It's all tables, all the time. Very few of these tables are classed, which means styling one styles them all. The elements that are classed tend to share names with other elements and, thus, they will share styling.

Editing individual aspects of the layout can be frustrating at times, or even outright impossible. One example is that the post's userpic area shares a class with the page's bottom navigation. Don't ask me why, because it makes no sense, but the result is that it makes editing your userpic's position—especially the poster's name underneath it—an uphill battle.

Keep that in mind when editing. Because you're having to edit entire elements that aren't specific to your layout, namely table and its inner tags, this may very well effect things you don't want it to. This is why, sometimes, game ads on your f-page may look strange; because they are also using tables, and the styling you've had to use on them is conflicting. This is the perfect example of why nothing being classed is such a pain.

Now that you know the drawbacks, let's talk about the benefits of Generator. Complete Style can do these things too with different methods, but I'll save that for another day.

WHAT GENERATOR CAN DO

I may sound like the world's most anti-Generator person in the world right now and, while it's true that I don't really work with it often since I prefer Complete Style, there are actually a lot of upsides to Generator that we're going to talk about now!

While you may only be able to do a limited amount of customization to the entries themselves, the appeal of Generator lies in one big plus: You can create your sidebar completely from scratch. What does this mean for your layout? You can have almost anything you want. If you can code it, it can most likely be used. Topbars, sidebars, multiple custom areas, or even a full page that hides your recent entries. You can even (very easily) have a different sidebar/etc. depending on the page view!
• Extremely open custom coding
• Easily customized entry links
• Easily customized entry date and subject
• Overall page coding is easily styled
• Can set custom tab icon
• Can be used in combination with custom styles (paid accounts)
• Simple method for different sidebars per page
↑ TOP ↑

USING S1 GENERATOR TO CREATE A CUSTOM LAYOUT

Now, keep in mind that this guide is not a generalized CSS lesson, so I will not be going into depth on coding practices, and will instead be focusing on coding rules and tricks that are specific to Generator. It's probably best if you've fiddled with code before, or have resources aimed towards teaching CSS. W3schools' CSS section is, as always, a great starting place for your CSS questions. First, let's go over the components of this code. The real key to editing Generator is to first understand what you're reading. Let's start with the bare bones and look at Generator without any HTML or CSS specifications.

GENERATOR'S FRAMEWORK

FRIENDS_OPT_ITEMS
Defines the number of entries on Friends page; zero cannot be used.
FRIENDS_OPT_ITEMS=>20
FRIENDS_WEBSITE
Where to place your custom HTML for Friends view; designated spot for original Generator header block.
FRIENDS_WEBSITE<=

          FRIENDS VIEW SIDEBAR HTML

<=FRIENDS_WEBSITE
DAY_TALK_LINKS
Where to put your comment links for Day view.
DAY_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">

          DAY VIEW COMMENT LINKS

</td></tr>
<=DAY_TALK_LINKS
DAY_WEBSITE
Where to place your custom HTML for Day view; designated spot for original Generator header block.
DAY_WEBSITE<=

          DAY VIEW SIDEBAR HTML

<=DAY_WEBSITE
LASTN_TALK_LINKS
Where to put your comment links for Recent view.
LASTN_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">

          RECENT VIEW COMMENT LINKS

</td></tr>
<=LASTN_TALK_LINKS
GLOBAL_HEAD
Spans all page views. Is used for the journal title, shortcut icon, and CSS. Any appearance editing should be done here, either to the entries, page, or adding custom classes and IDs.
GLOBAL_HEAD<=

          <title>Page Title</title>
          <link rel="shortcut icon" href="URL" type="image/ico" />

<style>
<!--


          ALL CSS GOES HERE


-->
</style>
<=GLOBAL_HEAD
FRIENDS_TALK_LINKS
Where to put your comment links for Friends view.
FRIENDS_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">

          FRIENDS VIEW COMMENT LINKS

</td></tr>
<=FRIENDS_TALK_LINKS
DAY_DATE_FORMAT
Date formatting for Day view. Can be disabled by deleting this line of code. Multiple date formats allowed.
DAY_DATE_FORMAT=>DAY DATE FORMAT
LASTN_OPT_ITEMS
Defines the number of entries on Recent page; zero cannot be used.
LASTN_OPT_ITEMS=>10
LASTN_DATE_FORMAT
Date formatting for Recent view. Can be disabled by deleting this line of code. Multiple date formats allowed.
LASTN_DATE_FORMAT=>RECENT DATE FORMAT
CALENDAR_WEBSITE
Where to place your custom HTML for Calendar view; designated spot for original Generator header block.
CALENDAR_WEBSITE<=

          CALENDAR VIEW SIDEBAR HTML

<=CALENDAR_WEBSITE
FRIENDS_DATE_FORMAT
Date formatting for Friends view. Can be disabled by deleting this line of code. Multiple date formats allowed.
FRIENDS_DATE_FORMAT=>FRIENDS DATE FORMAT
LASTN_WEBSITE
Where to place your custom HTML for Recent view; designated spot for original Generator header block.
LASTN_WEBSITE<=

          RECENT VIEW SIDEBAR HTML

<=LASTN_WEBSITE

As you can see, there is a method to the madness when you strip it all down to the bones! My hope is that being able to see it deconstructed this way will help you recognize and memories each area, so that when editing a full layout you won't get lost or overwhelmed.
↑ TOP ↑

GENERATOR CSS GLOSSARY

BASE ELEMENTS

.shadowed and .caption - classes within the original top header for Generator
.entrybox - class for each entry
.index - controls multiple things, including the userpics, dates, bottom nav, and original header toplinks
.meta - controls multiple things, including mood and music, bottom nav, and original header links
td.caption - entry title at the top of each entry
.comments - entry links at the bottom of each entry
Base classes cannot be renamed and cannot be removed.

CUSTOM ELEMENTS

.date - custom class inserted into entry date formatting
#sidebar - custom ID wherein you can put any coding
Custom classes and IDs can be renamed to anything you like, or even removed.

DIVS OR SPANS?

Okay, I know this part gets a little confusing, so here it is in its simplest form: You can only have one div per page view, of which there are four: Recent, Friends, Calendar, and Day (that's why your custom coding must be repeated four times.) Any other div placed within the same page view will act like a span tag. The difference? A div is a block and a span is an inline element usually reserved for lesser styling, like text formatting. But, like I said, this isn't really a CSS lesson, so let's move on to the very simple workaround!

So, you've got your sidebar div and it's good to go, but you want more div blocks inside of it or on another area of the page. Just code it as you normally would, but add display:block; to the styling. When you put it into the HTML you'll do it as a span instead of a div, but it will look exactly the same. Easy as 1-2-3!

Just remember: If your extra content is outside of the only actual div in the page view you need to repeat visibility:visible; in its styling.
↑ TOP ↑

GENERATOR SETTINGS

Ready to install a Generator base and get coding? Great! There are four things you need to do if you're not already on Generator. Your setup should look like the following images when you start:

Account > Manage Profile: Input a website and/or layout credit.


Journal > Customize Journal: Set your style system to S1.


Journal > Customize Journal > Look and Feel: Set all page views to Generator.


Journal > Customize Journal > Custom Options: Paste your code and start editing!

Images too small? Click to open in a new tab!
↑ TOP ↑

You're ready for the documentation!
Click on through for full coding notes and the base layout!



FAQs & TROUBLESHOOTING

Why isn't my sidebar/topbar/etc. showing up? The two most common reasons for your custom content to not show up are A.) You need to add visibility:visible; to the outermost div, or B.) you need to put a website in your profile.

Why do I have to have a website for my sidebar to show up? Your custom coding is actually inside of the original Generator header. The original header's inner content is disabled and its outer container is hidden. Inputting a website in your profile (which would normally display itself on your Generator header) gives your custom coding an anchor with which to put itself into the layout.

My sidebar shows up, but the inner content looks strange/is missing pieces. Why? Make sure you only have one actual div. Any inner div or extra sidebars etc. should be a span instead, set to display:block; if you want it to act as a div.

Everything is fine except for my sidebar's image. That's missing! Your custom coding's image must be set to display:inline; to appear. You can set this in #sidebar img, or whatever your custom ID may be.

Why is my sidebar only showing up on one page view? Any custom coding you have needs to be repeated four times, once for each page view (recent/friends/calendar/day.) This is also why you can have different coding on each view. Make sure all four sections have your coding. These are: FRIEND_WEBSITE<=, DAY_WEBSITE<=, CALENDAR_WEBSITE<=, and LASTN_WEBSITE<=.

Long subjects are conflicting with the post date. OR I can't get the subject and date to sit on top of each other. These are just two very big hiccups in Generator. The subject and date share a table row, and are each in their own column. Picture a box with two boxes inside of it, sitting side by side. If this isn't making sense, you can give the subject's CSS a red background and the date's CSS a blue background to see exactly where they sit.

With absolute positioning you can give the date its own row, but you can only position it on top of the subject, or risk long subjects running into it. Another option is to disable the date so that the subject sits alone and has its own line. This is done by removing LASTN_DATE_FORMAT=> and FRIENDS_DATE_FORMAT=>. None of these fixes are ideal or elegant, but such is the Generator life.

Why do all bottom navigation areas look almost identical across Generator layouts? There's just not much we can do to these without unintentionally changing other aspects of the layout. This is for two reasons: The tables, and the baffling decision to class a ton of unrelated things as .index. You can, of course, style them to an extent, but repositioning them is yet another fruitless fight. This is a bug I do intend to study more.

There's a lot of stuff here, and I'm getting a little lost/overwhelmed. Can you help me? Of course. Please feel free to comment the Questions post if you need anything clarified. Just take it slow, and remember that a lot of the information here is intended to help you fully understand the workings of Generator, rather than just pointing you at what to edit. If you go straight to the Documentation you can view only what needs to be edited.

Am I allowed to post the layouts I make with this? Of course! I'd actually be very sad if no one did! A lot of work went into this project, and its purpose is to make Generator easier to understand and edit. There's a line of code in the base's CSS that reads /*--- GENERATOR BASE BY TESSISAMESS @INSANEJOURNAL ---*/; all I ask in return is that you leave that where it is, since rewriting the base took a lot of time, testing, and troubleshooting to give you guys a base that will work correctly.

Does this overhaul mean we'll be seeing more Generator layouts on ~tessisamess? Maybe, but probably not. I do plan on editing all of my old Generator layouts to use this new, clean base later on down the line, but Complete Style is my first love. This undertaking was mostly just for those of you who've been needing better resources for your Generator layouts.
↑ TOP ↑