We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

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

August 15, 2022 at 8:19 pm #8074

[anonymous]

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.

August 16, 2022 at 5:10 pm #8076
[anonymous]
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:
August 17, 2022 at 12:30 pm #8078
[anonymous]
@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.
August 17, 2022 at 12:47 pm #8079

[anonymous]

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/

August 17, 2022 at 1:09 pm #8080

[anonymous]

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