Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Indented text

edited February 2016 in Vanilla 2.0 - 2.8

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?

Comments

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited February 2016

    @gramjoeldavies

    What about the Quote option:

    Like this, for example

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

  • edited February 2016

    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

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited February 2016

    @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.)

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

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    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?

  • edited February 2016

    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

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited February 2016

    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.

  • edited February 2016

    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.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    You're welcome.

Sign In or Register to comment.