Sign in

Is it possible to make horizontal line display as an actual line

  • This topic has 4 replies, 3 voices, and was last updated 1 month, 1 week ago by .
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #8074
    Avatar photoKemikalElite

    When I preview a page in my browser it looks like 3 dots with a lot of extra space in between as in the screenshot below:

    However with my old editing method, using a regular markdown editor and exporting to HTML it appears as an actual line as in this screenshot:

    Is there a way to change it to appear as a regular line or is this just the only way the program works?

    I tried different themes however it doesn’t change the line break.

    #8076
    Avatar photocandidexmedia

    You’ll want to either modify or override the style for the <hr> tag in CSS.

    Here is what it looks like in Inspect Element: https://imgur.com/a/PtKcRom

    Here are some ways of making <hr> a line:

     

     

    #8078
    Avatar photoitips3727

    @KemikalElite

    Sure, you can add a single ‘plain’ horizontal line for < hr > (I’ve added a space either side of hr here purely for display purposes, so normally, there should be no spaces).

    I’ve tested the following fix on several current GetPublii.com themes. It seems the most recent GetPublii.com themes have the necessary CSS code built in.

    After you’ve added the default < hr > as shown in your first screenshot above, assuming you’re using WYSIWYG view, choose the ‘<> HTML’ button on the editor bar to view the code.

    Find your < hr > then change:

    <hr>

    to:

    <hr class="separator--long-line">

    Once you’ve saved your changes on the page, when you preview the page or the site, the page on which you’ve made the change should display your ‘plain’ horizontal line.

    #8079
    Avatar photoitips3727

    Following up on my last comment above, more information is available under the ‘Separator’ subheading on: https://getpublii.com/dev/default-publii-classes-for-using-with-css/

    #8080
    Avatar photoitips3727

    @KemikalElite

    To clarify further, as outlined on https://getpublii.com/dev/default-publii-classes-for-using-with-css/ if you use the Block editor to create your page in Publii, for this exercise, you don’t need to be concerned with code. Just create the default horizontal line with the Block editor, then use the command to change the default line from, say, 3 stars to a ‘plain line’. Works great.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.