Table of Contents & Link to Page snippet breaking footnote borders

[Waistel]

Renderer

v3

Browser

Chrome

Operating System

Windows

What happened?

It appears having any Table of Contents tag on a page removes the decorative border around the footnote/page number. I know the contents page of 5e books don't tend to have page numbers but this doesn't explain why it breaks it when the two are on the same homebrewery page.

I'm trying to use the "Link to Page" snippet inside my footnotes and on my headers to help navigate around a very large document. Click to go back to the page with the next biggest header or click to go to the top of that section, etc. However it does mean it goes into the old school blue underlined hyperlink style, which is undesirable.

The same snippet is used and keeps its formatting inside of the table of contents snippet, so I have been able to make functional links that look normal by essentially making miniature tables of contents.

Unfortunately this seems to remove the decorative border. It doesn't matter if this toc code is used in a header, a footnote, or anywhere on the page.

I'm not sure what is causing this bug. Is this fixable, or is there another method to index/navigate my document this way?

Also if there is any way to still use Auto Page Numbers but set my own "Page 1", that would be amazing. A real pain to fill in hundreds of page numbers, but using auto numbers on a document with cover pages and contents basically starting on page 5 doesn't feel right.

Code

No response

[ericscheid]

Also if there is any way to still use Auto Page Numbers but set my own "Page 1", that would be amazing. A real pain to fill in hundreds of page numbers, but using auto numbers on a document with cover pages and contents basically starting on page 5 doesn't feel right.

If you want the page numbers to reset to some value on a given page, enter this into the Style Editor

.page#p2 .pageNumber { counter-reset: phb-page-numbers 9; }
.page#p2 { counter-reset: phb-page-numbers 9; }

.. where the p2 is the physical page you want this to apply to, and 9 is one less than the new page number you want to start counting from.

---

EDIT: fixed the selector

[Waistel]

reset to some value on a given page

What I meant was to designate a new start point for the auto counter, so it would automatically apply it for every page from then on. This method only works for each individual page, and therefore would be just as much effort as typing them in manually page by page.

5e books don't count the front cover page (because it's "outside" the book") but Homebrewery does, and some other books don't start counting until the contents page or the page after.

Is there a {{pageNumber,auto-1}} equivalent, where it subtracts a value from the counter?

And any idea about Table of Contents removing the decorative border next to the page numbers? I really would like to have built in navigation for my players.

[Waistel]

If the border or link to page snippets conflicting with table of contents snippet issue can't be fixed, is there a way to manually add the border image into the page? Is that image available to users? I don't mind copy and pasting a line of code into my end of page sections.

[Gazook89]

@ericscheid ’s suggestion will do what you ask— it will set the starting page for the count. So if you have 5 pages of fluff, and content starts on page 6, you can start “page 1” on the 6th page and just continue using the auto page number snippet

[ericscheid]

reset to some value on a given page

What I meant was to designate a new start point for the auto counter, so it would automatically apply it for every page from then on.

That is actually how counter-reset works. https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset

This method only works for each individual page, and therefore would be just as much effort as typing them in manually page by page.

If every page has the auto pagenumber snippet ({{pageNumber,auto}}), then the counter will auto-increment on every page. That bit of css resets the counter value for the given page, and subsequent references will then auto-increment the counter.

[ericscheid]

The decorative border that has the bubble to hold the page number is inserted by the {{pageNumber}} snippet, which renders in html as

<p><span class="inline-block pageNumber auto"></span></p>

This is then styled via the (default) phb theme stylesheet via a rule on .page:after

.page:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  height: 50px;
  width: 100%;
  background-image: url('/assets/PHB_footerAccent.png');
  background-size: cover
}

This however is disabled if the page via this rule .page:has(.frontCover):after { unset: all }.

What you can do is re-apply the same style rule, but this time with a higher priority selector, like this (where p9 indicates this occurs to the 9th physical page)..

.page#p9:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  height: 50px;
  width: 100%;
  background-image: url('/assets/PHB_footerAccent.png');
  background-size: cover
}

[Waistel]

If every page has the auto pagenumber snippet ({{pageNumber,auto}}), then the counter will auto-increment on every page. That bit of css resets the counter value for the given page, and subsequent references will then auto-increment the counter.

That's how I thought it would work, but after testing it only seems to work on the specified page, using the code you gave me in your first reply. I've tested it on a couple of brews, and even started a blank one to test it.

P1, no number, as intended. P2, designated as "p1" as intended. P3 and P4 do not have their counter changed at all. It doesn't seem to matter what number I choose, the following pages still display 3 and 4.

I'm obviously missing something here.

[Waistel]

The decorative border that has the bubble to hold the page number is inserted by the {{pageNumber}} snippet
[...]
This however is disabled if the page via this rule .page:has(.frontCover):after { unset: all }.

What you can do is re-apply the same style rule, but this time with a higher priority selector

This wasn't the issue I was having. I gave this a go, and I see you can add the border to cover pages. The problem I'm having is that the border is disappearing on non-cover pages that also have any Table of Contents snippets.

I also tried adding this code to the pages being affected, in case any Contents Pages somehow were being treated as Cover Pages, but it does not seem to be a related issue.

[calculuschild]

I have been able to make functional links that look normal by essentially making miniature tables of contents. Unfortunately this seems to remove the decorative border. It doesn't matter if this toc code is used in a header, a footnote, or anywhere on the page. I'm not sure what is causing this bug. Is this fixable, or is there another method to index/navigate my document this way?

In the PHB, a Table of Contents page does not have the footer decoration, so it is not a bug that including a Table of Contents makes it disappear. This is by design.

Rather than try to make a "miniature table of contents" to trick the Homebrewery into changing the color of the link, I would suggest just... changing the color of the link. For example, you could add this CSS to your Style tab to tell footers to just inherit the normal color from the footer, but still show an underline when you hover over with the mouse:

.page .footnote a {
  color: inherit;
  text-decoration: none;
}

.page .footnote a:hover {
    text-decoration: underline;
}

If you don't know CSS already, learning can get you quite a lot of customization out of the Homebrewery to do pretty much anything you want.

[Waistel]

Rather than try to make a "miniature table of contents" to trick the Homebrewery into changing the color of the link, I would suggest just... changing the color of the link. For example, you could add this CSS to your Style tab to tell footers to just inherit the normal color from the footer, but still show an underline when you hover over with the mouse:

Thank you! This is obviously the best solution, but not knowing any real code I was doing my best to use the built in tools, so sorry if my work around sounded ridiculous.

This stops the footnote "breaking", which is perfect.

I'm still unsure why my reassignment of page numbers isn't working though.

[calculuschild]

I'm still unsure why my reassignment of page numbers isn't working though.

The previous advice was slightly incorrect. You should use:

.page#p2 {
  counter-reset: phb-page-numbers 1;
}

[Waistel]

That worked. Thank you for your assistance.

I have one final question, and then I can say this issue is totally solved.

How would I apply the colour change and underline on hover code to other things? I intend to use it on headers and in spell lists. the .footnote part obviously points to the footnotes.

With headers is there a particular phrase for each header size that replaces ".footnote"?

And I am trying to do the same thing with spells on spell lists linking directly to the spell description page. So I have

.page .spellLink { font-family: 'ScalySansRemake'; color: black; text-decoration: none; }

So I tried the following to no avail.

.page .spellLink a { color: inherit; text-decoration: none; }

.page .spellLink a:hover { text-decoration: underline; }

The colour change is applied, but not the underline on hover part.

[G-Ambatte]

In the PHB, a Table of Contents page does not have the footer decoration, so it is not a bug that including a Table of Contents makes it disappear. This is by design.

I think we could probably be more explicit about the fact that adding {{toc [...]}} removes the footer - my first thought was to change the snippet to something like {{toc,noFooter [...]}} and change the styling from .page:has(.toc) to .page:has(.noFooter), so users could opt out of a footer on any page they liked. Unfortunately this would change the Table of Contents page footer for all of the existing brews, potentially interfering in what is otherwise finished brews.

I'm not sure which would be the better way forward.

[G-Ambatte]

With headers is there a particular phrase for each header size that replaces ".footnote"?

For headers, you would replace .footnote with h1 through h6, depending on which particular header size you are targeting.

Depending on how you are adding the class to the header, you might need to use h#.spellLink instead of .spellLink h#.

Target with .spellLink h2
{{spellLink
## H2 Header
}}

Target with h2.spellLink
## H2 Header
{spellLink}

[5e-Cleric]

I think we could probably be more explicit about the fact that adding {{toc [...]}} removes the footer - my first thought was to change the snippet to something like {{toc,noFooter [...]}} and change the styling from .page:has(.toc) to .page:has(.noFooter), so users could opt out of a footer on any page they liked. Unfortunately this would change the Table of Contents page footer for all of the existing brews, potentially interfering in what is otherwise finished brews.

I'm not sure which would be the better way forward.

Perhaps for v4, include this '.nofooter' class

[dbolack-ab]

I think we could probably be more explicit about the fact that adding {{toc [...]}} removes the footer - my first thought was to change the snippet to something like {{toc,noFooter [...]}} and change the styling from .page:has(.toc) to .page:has(.noFooter), so users could opt out of a footer on any page they liked. Unfortunately this would change the Table of Contents page footer for all of the existing brews, potentially interfering in what is otherwise finished brews.
I'm not sure which would be the better way forward.

Perhaps for v4, include this '.nofooter' class

I think that's the best idea. I'm gonna mark this v4.