How to fix Transmogrified based layouts

[liv]

We recently fixed a bug with Transmogrified, that was causing the layout to get all stretched out and weird if you enabled the Navigation Strip. However, the fix has made the content narrower than it was. If that bothers you, here's what you can do:

• Go the Custom CSS tab of the Customize Journal Style wizard.
• There's a big box there called "Embedded CSS".
• After whatever CSS you already have, add the following line: #container {margin: 0}
• That will make the journal content stretch out over the whole page.
• If you want to make the journal content wider, but without using the whole page, you can set a width for container element. This will probably work best if you use a percentage, and you may want to set a margin as well.
• One example of some CSS code that will work: #container {width: 96%; margin-left: 2%}

We also have a few other tweaks to Transmogrified that you might have noticed. First of all, we've made a new Wizard property that lets you switch your user icon to the left or right of the entry. Lots of people have been using afuna's genius CSS to move user icons to the left, so we put her CSS into the layout code, and now all you have to do is tick a box. To use this option, do this:

• Go to the Customize Journal Style wizard.
• At the bottom of the first page, under Additional Options, there's an option called Place icons on left or right of entry.
• Just set it to "Left", save your changes, and your icons will switch round.

We have also altered the CSS that used to make commas between tags, because it was broken in some browsers (like Internet Explorer). We've replaced it by directly printing the commas, so most people won't see any change. However, if you use a custom stylesheet or custom CSS which includes information about the symbol between the tags, you may see two commas or two divider symbols. Here's how to fix that:

• Look in your stylesheet or custom CSS for some code that looks like this: .tag li:before { content: ", "; } .tag li:first-child:before { content: " "; }
• Edit your CSS to take away that line.
• You can still change the symbol used as a divider for tags, but you need to use a custom theme layer instead of CSS.
• If you're confident with custom theme layers, add the following line to your layer: set text_tags_item_sep = "X ";
• Replace the X with whatever symbol you want to use.
• Make sure you include the space between the quotes if you don't want your tags to be squished together.
• Save the theme layer.

Finally, we have taken away the huge ugly space on top of collapsed comments (the ones you see in long threads when there are more than 50 comments on one entry). This has a side effect that comments with no icon can look a bit squashed together. If you don't like that, here's what to do:

• Use the Embedded CSS box in the Custom CSS tab.
• Add the following CSS: .partial .comment {margin-top: 20px;}
.full .comment {margin-top: 76px;}
• Save your changes.

Voilà, your collapsed comments will be stacked nicely, but your expanded comments will be spaced evenly whether or not the commenter uses an icon. (This makes comment pages consistent with journal and reading pages.)

Comments

[liv]

Thanks for this comment. I haven't had a chance to test with nav strip settings; can you confirm that my fix still works if the nav strip is present?

[matgb]

SB's PC is booting up (it's her layout that's broken), so we'll be doing it at some point fairly soon.