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

[afuna]

Liv, you rock for putting all this together. Thank you!

[liv]

OK, all fixed up now. If you have a moment, can you edit this community's layout so that <code> stands out a bit more? I suggest a border and / or background color. Otherwise it's hard to include bits of CSS or S2 code inside sentences, without being confusing.

[afuna]

Hrrm.

I um, maybe went a bit overkill. How does that look? Any suggestions to make it look better?

[liv]

That's a lot better; if you're going to include a border, I would add a little tiny bit of padding (0.1 em or something) because otherwise the dotted lines sort of blur into the code and make some of the letters hard to read.

Also, can you prod denise or mark to put this issue on the BBB? That way we've got a detailed fix here, a mention in the FAQ, and something on the main Support page, which should reduce the number of support requests and complaints in the dw_maintenance post!

[afuna]

Tweaked!

I'll try to catch them on, but I'm about to head to bed, so may not be able to do so for the next few hours.

PS. Shall miss you! Enjoy your trip :)

[dragonfly]

Oh, I am SO putting this in memories. Thanks.

[lomedet]

Wow - thank you for putting all of this together. I, um, have the navigation strip enabled, and something still making my content narrower, which is messing with my custom text (about as custom as I get - CSS scares me). Will the fixes here help with that, or do I need to do something else?

[matgb]

Yes, the narrow content is how it's supposed to appear, but the navstrip broke it (FWIU). But we mostly preferred it broken, hence this fix for those that want it that way. So put the line of container code into your CSS and it'll widen it out again.

[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.

[lomedet]

Thank you!

[oriolegirl]

Thank you so very, very much! That was so simple even an oriolegirl could do it. *g*

[syderia]

Thanks !

[shiny_crystal]

Thank you! I don't have a clue about CSS, but even I could do that :D

[florahart]

...I have no nav strip enabled and have done nothing to my layout, and my content looks, as far as I can tell, identical to how it looked before. ?

[liv]

If you're happy with the way it is, don't worry. What the fix did was make the middle section, with entries and sidebar, a little narrower, and the page margins a little wider. If you have a high screen resolution you may not notice the difference. We made the fix because some people were upset about the minor change (and it wasn't anything drastic), but that doesn't mean everybody has to use it if they don't want to!

[ardath_rekha]

Cool stuff... is there anyway to enable something that lets people have transparent background colors? Currently you can remove a background color so that background images will show through, but the second you edit anything in your settings, the background colors come swarming back. It would be nice not to have to fight that every single time I tweak a page.

[liv]

OK, that's not intentional and it smells like a bug to me. Can you tell me exactly how you're modifying your settings? Are you using layers at all, or working with the wizard?

One thing you could try is specifying a transparent background color in your custom CSS. That should override any colors that layout specifies. Try something like .entry {background-color: transparent} If you need help with the exact CSS to use, tell me which parts of your journal you want transparent and I'll see if I can help you.

I don't think this is related to the recent code changes, though.

[ardath_rekha]

Nope, not something related to the recent code changes... it's something in the interface that insists on having values for all of the color boxes, and forces the default values in every time you open it up... so you have to delete them all again to get transparency. It would be really nice to have a way to select transparency for those boxes and have the colors stop trying to reassert themselves. Not as much a current bug as a long-standing fubar with the LJ code. I attempted to use a .css to override and it still kept reasserting the colors on top. (This was at nexus_stables, btw. I haven't actually tried customizing my own account because I just got so completely frustrated with even the simplest modifications that I threw up my hands.)

[miss_s_b]

It does that on LJ too.

[miss_s_b]

Fixeded. Thank you!

[matgb]

With navstrip on, which is the important bit.

[liv]

Thanks for testing that for me, both of you. I'll pass the advice on to anyone who needs it!

[ex_patchworks703]

Thanks very much for this! And that's a great sheep icon.

Could you give me some advice if you have time? How would I tweak the Transmogrified layout so that my profile, calendar, page summary etc. are on the left?

[liv]

I'm afraid that's beyond my CSS capabilities. Eventually, we're going to have a wizard setting so you can easily choose between left, right and both sides for the sidebars, so your best bet may be to wait until that gets coded up. Otherwise, ask someone who's clever with CSS. style_system (totally unofficial, this isn't an endorsement!) has people who may know how to help you.

[alsatia]

Aha, I had wondered why the images that normally fit were suddenly getting cut off. It didn't register at first that the content wasn't filling up the whole page anymore. *fixes*

[hilarytamar]

W00t! Thanks so much.

[dendrophilous]

a new Wizard property that lets you switch your user icon to the left or right of the entry

THANK YOU!

[onyxlynx]

Excellent; have implemented the container thing. Thank you; good work.

Also, I see that editing comments can now be done in Rich Text as well as HTML. Someday, blockquote as a button will debut. (I can hardly wait for the first time I need to use nested blockquotes. Heh.)

[liv]

I don't know if there are going to be a lot of extra buttons added to the rich text editor, honestly. If you want to use blockquote in comments, one easy way is to click the "More Options" button when you're typing a comment. That will take you to a new screen with the comment form on it, and the full version includes a button called "Quote". You can highlight text in the comment or entry you're replying to, and click the Quote button, and it'll give you either quotes or blockquotes, depending how long the quoted section is. Does that make things a bit easier for you?

[onyxlynx]

Possibly. Thanks. (I never know what weird command I'll need until I need it, and then...)

[erilyn525600]

I'd been wondering why my sidebar was suddenly below all my entries. Setting a width and margin put everything back to normal. Thanks!

[order_of_chaos]

For this, thank you! *fixes*

[msilverstar]

thank you thank you, I hated the narrow text, and spent 20 minutes wandering around trying to figure this out, but this works perfectly, WHEW.

Something this pervasive should maybe go out as a news post? Because most of us non-experts would not think of coming here.

Thanks again!

[afuna]

The entry got a shoutout in last week's news update *grin*

[msilverstar]

Whups, I usually read those carefully. I posted on my own journal just to spread the word.

Would you happen to know if there's a way to make user names above the icons, and the icons drop down into the text box, with the text itself wrapping around? I like that very much in my LJ smooth sailing layout, and would be nice to have it here.

[seleneheart]

I wrote a complete stylesheet for my Transmogrified layout, but the layout seems to acknowledge some of the over rides in the CSS, but not others. Any idea why it's not paying attention to the whole CSS?

Also, is there a place where we can get the code for the default CSS for each theme?

[afuna]

Hmm, it may be that the CSS in the base stylesheet is too specific, but without seeing the layout, I can't say for sure.

Code for each layout can be found at http://www.dreamwidth.org/customize/advanced/layerbrowse

But that may not be very helpful, because it mixes S2 variables, etc. So the absolute best way would probably be to apply the layout to your journal without any other customizations, and then copy the stylesheet there to a text editor so you can view it at your leisure.