Indented text

gramjoeldavies

I need an idiot proof way for members to indent text.

My forum is for writers who need things to look exact in their posts. But in BBCode, spaces are removed and default to left-justified. Using [indent] tags has no effect. The Advanced Editor in WYSIWYG mode was no good for a different reason (it puts double space between paragraphs).

I can use non-breakling-line-space HTML ( & n b s p ; ), but non-techy writers find it tricky and it's awfully fiddly for text with multiple and varying indents.

Any ideas?

whu606

@gramjoeldavies

What about the Quote option:

Like this, for example

if you are using the Advanced Editor or Buttonbar Εditor.

gramjoeldavies

Sadly, no. For one, we quote each other in comments a lot. But it looks wrong, increased line-spacing is a big deal for us.

Ideally, I want a way to set up my own formatting for either [indent] or possibly < pre > tags

whu606

@gramjoeldavies

Not sure if this is too much of a fudge for you, but if you don't plan to use bulleted lists, you could add this to your custom.css

.Message ul li {
    list-style: outside none  !important;
    line-height: 1;
}

And you'd end up with something like this, where the first part is standard text comment, and the 2nd part is a bulleted list with the bullet removed, and line height set to 1 (obviously you could change that value.)

gramjoeldavies

Thanks. It's odd, I know that ought to work, but I'm not seeing any change in the appearance of lists.

I've been trying to style .Message pre { } as well, with no result.

whu606

If you aren't seeing css changes, it is likely a cache issue.

Try the same page in a different browser.

You'll need the !important, as the original style.css has !important for that rule.

Where are you making the changes?

gramjoeldavies

Something else must be going on. Three browser with newly cleared caches all behave the same.

I put this code in the same place I put all my customisations: /theme/MY_THEME/design/custom.css

I already have working css for .Message { } in there. It's very strange.

PS on inspecting the element, it looks like the css for .Message ul li {} is loading from style.css, but my custom code for .Message is loading from custom.css

whu606

That's certainly the right place.

Do you use CloudFlare, or any kind of minifying tool?

What do you see for the css in the inspector if you use Firebug or a similar tool?

Generally, if there is a clash, one of the rules is scored through.

gramjoeldavies

Hang on... just tried putting the code near the beginning of my custom.css file. It works! Must be something lower down I should take out.

Thanks for you help.

whu606

You're welcome.