How to add a red line over the text of the footer?

[merlinuwe]

Thanks to your great plugin.

When I use this code as a footer, I get to following (see screenshot):

<div>    
<span style="position: relative; top: -1em; left: 3em; border: 1px solid red; font-size: 10px;">lustig</span>
<div>

    <div style="display: flex; justify-content: space-between; align-items: center; margin: 1em 3em; width: calc(100% - 6em); font-size: 10px;">


        <div style="border: 1px solid navy; flex: 1; text-align: left;">
            <span class="title"></span>.md
        </div>


        <div style="border: 1px solid navy; text-align: right;">
            Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
        </div>
        
    </div>
    </div>

When I delte the first three lines

<div style="display: flex; justify-content: space-between; align-items: center; margin: 1em 3em; width: calc(100% - 6em); font-size: 10px;">


        <div style="border: 1px solid navy; flex: 1; text-align: left;">
            <span class="title"></span>.md
        </div>


        <div style="border: 1px solid navy; text-align: right;">
            Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
        </div>
        
    </div>
    </div>

I get this, which is correct:

How can I add a red line over this footer?

[l1xnan]

I'm not sure if you want to add a red line above the footer content, if so, try it:

<div>
+    <div style="position: relative; top: -1em; left: 3em; border-bottom: 1px solid red; width:100vw"></div>
    <div>
        xxx
    </div>
</div>

[merlinuwe]

Thanks for your response.

When I use this (or

---

instead of xxx) as a footer:

<div>
+    <div style="position: relative; top: -1em; left: 3em; border-bottom: 1px solid red; width:100vw"></div>
    <div>
        xxx
    </div>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin: 1em 3em; width: calc(100% - 6em); font-size: 8px;">
        <div style="border: 0px solid navy; flex: 1; text-align: left;">
            <span class="title"></span>.md
        </div>
        <div style="border: 0px solid navy; text-align: right;">
            Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
        </div>
    </div>
    </div>

I get this as pdf:

The following informations of the footer aren't visible anymore.

[merlinuwe]

Background information

I have a template in Microsoft Word with this footer

and I'd like to have the same (or similar) footer style in the pdf file.

[NaeemBolchhi]

@merlinuwe

<div class="two">
    <div class="zero">
        <div class="one">
            <left>ASD</left>
            <right>123</right>
        </div>
    </div>
</div>

<style>
    .one {
        border-top: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .zero {
        border-top: 1px solid transparent;
    }
    .two {
        border-top: 4px solid red;
    }
</style>

In my experience, the header and footer fields don't have the same "margin" on left and right sides that the body of the pdf gets from your configuration. I've added some padding to left and right to get the header and footer aligned with the body text on my Obsidian. I didn't add those to the CSS here since you need to adjust it with your body text margins in mind.

[merlinuwe]

Thank you very much for your respond. Based on your suggestion, I finally got this:

This is the code for such a footer:

<div::after.uwe>
    <div class="two">
        <div class="zero">
            <div class="one">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            </div>
        </div>
    </div>
</div>

<style>
.uwe::after  {
    content: "\00a0"; /* Fügt ein Leerzeichen ein, um sicherzustellen, dass das Pseudo-Element gerendert wird */
    display: block; /* Ändert das Pseudo-Element zu einem Block-Element */
    clear: both; /* Sorgt dafür, dass das Pseudo-Element nach dem Inhalt des <div> platziert wird */
}
.one  {
    color: white;
    border-top: 1px solid #622423;
    margin-bottom: -6em;
}

.zero {
    border-top: 2px solid transparent;
}

.two {
    margin-left: 22em;
    margin-right: 22em;
    border-top: 4px solid #622423;
}
</style>


<div class="uwe">
    <div style="display: flex; justify-content: space-between; align-items: center; margin: 1em 3em; width: calc(100% - 6em); font-size: 8px;">
        <div style="flex: 1; text-align: left;">
            <span class="title"></span>.md
        </div>
        <div style=" text-align: right;">
            Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
        </div>
    </div>
</div>

[emisjerry]

Hi, this is my simple version:

<div style="width:100vw;font-size:10px;border-top:1px solid red;margin-left:20px;margin-right:20px;">
  <span style="width: 80%;font-size:10px;text-align:left;">
    <span class="title"></span>
  </span>
  <span style="width: 20%;font-size:10px;float:right;text-align:right">
    <span class="pageNumber"></span> / <span class="totalPages"></span>
  </span>
</div>

Ref: https://youtu.be/DnghHAcMW_g

[merlinuwe]

And this is mine, based on emisjerry (thank you very much):

<div style="width:70vw;font-size:10px;border-top:3px solid #622423;margin-left:20px;">
<div style="margin-top:1.5px; margin-bottom:3px; width:70vw;font-size:10px;border-top:1px solid #622423;margin-left:0px;margin-right:20px;"></div>
  <span style="width: 80%;font-size:10px;text-align:left;">
    <span class="title"></span>.md
  </span>
  <span style="width: 20%;font-size:10px;float:right;text-align:right;margin-right:0px;">
    Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
  </span>
</div>
</div>

It looks as so:

[merlinuwe]

New release of Obsidian (1.5.8) -> new CSS

The only thing I had to change was 100vm -> 95 vw.

<div style="width:95vw;font-size:10px;border-top:3px solid #622423;margin-left:20px;">
<div style="margin-top:1.5px; margin-bottom:3px; width:95vw;font-size:10px;border-top:1px solid #622423;margin-left:0px;margin-right:20px;"></div>
  <span style="width: 80%;font-size:10px;text-align:left;">
    <span class="title"></span>.md
  </span>
  <span style="width: 20%;font-size:10px;float:right;text-align:right;margin-right:0px;">
    Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
  </span>
</div>
</div>

It works well:

[merlinuwe]

The one above doesn't work anymore. Here is a new solution:

<div style="width:95vw;font-size:10px;border-top:3px solid #622423;margin-left:20px;">
<div style="margin-top:1.5px; margin-bottom:3px; width:95vw;font-size:10px;border-top:1px solid #622423;margin-left:0px;margin-right:20px;"></div>
  <span style="width: 80%;font-size:10px;text-align:left;">
    <span class="title"></span>.md
  </span>
  <span style="width: 20%;font-size:10px;float:right;text-align:right;margin-right:0px;">
    Seite <span class="pageNumber"></span> von <span class="totalPages"> Seiten</span>
  </span>
</div>
</div>