Default horizontal rules

  • Author
    Posts
  • #2875904

    windwhistle
    Member

    I occasionally put a break in my text by typing and centering a short underline or line of dashes. Or do the same to precede and set off an end note. But now, whenever I try to do this, the short line immediately defaults to a full width horizontal rule. I can fix it by looking up and inserting the html code for a 10% hr or whatever, but I’d much rather change the CSS so the short line I type stays as I type it and doesn’t default to a full width horizontal rule. Can someone help me with the CSS to do this? Thank you in advance.

    The blog I need help with is piedtype.com.

    #2876104

    kathrynwp
    Staff

    Could you please link to a post or page where you’ve added your usual line so I can see what element is being generated? Once I see it I’ll be able to help with the CSS. Thanks!

    #2876108

    When you say a short line, how are you inputing that within the editor? I can’t seem to reproduce this issue. Are you using the
    <hr>
    html?

    #2876124

    windwhistle
    Member

    @kathrynwp https://piedtype.com/2017/02/13/andrew-sullivan-and-the-madness-of-king-donald/

    @thesacredpath One example: I want a short line above a footnote. So on the visual editor page I type an underline to the desired length (an inch or so), hit return, and type my note on the next line:

    __________
    *This is a footnote.

    If I publish, that short line will have been converted to <hr /> and extend the full column width. Then I have to look up the right code and replace <hr /> with <hr width=”20%” /> in the text editor. It didn’t used to do that; the line would appear as I typed it.

    Same thing happens if, say, I want a centered horizontal rule of about 30% width. I type a line about the length I want and center it (all done in visual editor). If I publish, the line will default to a full width rule.

    Sorry. I don’t think I’ve explained this very well.

    #2876125

    nizamilputra
    Member

    Hi @windwhistle,

    You can use custom class to do that. For example we add class .footnote, with specification:

    .footnote{
      font-size: 80%;
      padding-top: 10px;
      display: inline-block;
      border-top: 1px solid #ccc;
    }

    Then you can use it by adding .footnote in your HTML,
    <p class=”footnote”>*However, truth is an absolute defense against defamation charges. If a statement is accurate, then by definition it is not defamatory.</p>

    #2876126

    windwhistle
    Member

    @ nizamilputra

    Thank you. I may try that. But it’s not just footnotes. It’s any line I type. I was just hoping there was something I could add to my CSS (or maybe delete from it) that would keep a typed (under)line from being converted to a full width horizontal rule. Particularly since that never used to happen. I shouldn’t have to start adding special html codes just to type a simple line.

    #2876177

    @windwhistle, I was having problems reproducing this, but was finally able to. This is part of Markdown, the shorthand editor language that allows you to compose posts, etc., with regular characters and punctuation marks.

    Go to Settings > Writing and disable Markdown and your rule issue will go away.

    #2876178

    windwhistle
    Member

    @thesacredpath It worked!! Thank you so much. You’ve always been my CSS guru. I’d have never figured that out and it was making me a little crazy. Thanks! You made my day.

    #2876181

    You are welcome. It took me a bit of time to figure out what was causing that.

    #2876188

    windwhistle
    Member

    I’m sure it did, since there were no clues in the code that I could see. I really can’t thank you enough for your time and effort. Tell your boss I said you deserve a promotion!

The topic ‘Default horizontal rules’ is closed to new replies.