• From: Stockholm
  • Registered: 2024-01-09
  • Posts: 2

Topic: Styling footnotes and references in the graphical editor with CSS

Hi!

I'm in the process of styling most of the major html elements in the graphical editor with CSS in a collaboration for a related number of expositions. So far, it's going really well, including basic CSS reset and even :root variables.

However, when it comes to footnotes and references using (link?) classes like .x-window-mc I'm totally hitting the wall. I've tried every possible dependency ranging from "#container-weave" to "body", "iframe" and "html", but nothing has any effect whatsoever. I understand that a footnote is rendered as a virtual canvas embedded in the main page canvas, which might be the reason it's so hard to execute. Could you comment on this issue based on the following CSS section for a:link stying? Any other solutions or workarounds are most welcome.

Thanks in advance!! /T

THIS WORKS PERFECTLY:

/* General link beaviour */
#container-weave a {
    text-decoration: none;
    outline-color: transparent;
    padding: 1px;
}

#container-weave a:link, #container-weave a:visited {
    color: var(--IASC-2-hex);
}

#container-weave a:focus, #container-weave a:hover {
    color: var(--IASC-2-hex);
    text-decoration: none;
    border-bottom: 1px dotted;
}

#container-weave a:active {
    color: var(--IASC-3-hex);
}


THIS DOESN'T WORK AT ALL (despite any other selectors):

/* Footnote link beaviour */

.x-window-mc a {
    text-decoration: none;
    outline-color: transparent;
    padding: 1px;
}
.x-window-mc a:link, .x-window-mc a:visited {
    color: var(--IASC-2-hex);
}

.x-window-mc a:focus, .x-window-mc a:hover {
    color: var(--IASC-2-hex);
    text-decoration: none;
    border-bottom: 1px dotted;
}

.x-window-mc a:active {
    color: var(--IASC-6-hex);
}

Timo Menke's Website

  • Registered: 2016-10-05
  • Posts: 113

Re: Styling footnotes and references in the graphical editor with CSS

Dear Timo,

Sorry for taking a long time to respond. Indeed, RAW CSS only applies to the page, not to footnotes within it.
This is because the footnotes in RC are loaded currently as separate pages: they are basically mini-expositions in an iframe.

Given your problem, I guess it would make sense to duplicate whatever style was in the page in any footnote there, however, there is some technical challange there, as footnotes can migrate between pages and RAW CSS is local to the page.

I think a better long-term solution would be to have a global stylesheet that applies to all content in one exposition, including footnotes. I find that in using RAW CSS myself, I tend to copy a lot of CSS back and forth between pages, and there is not really a need to have different CSS between pages, as it can be easily localized to a page id if needed. However, because of backwards compatibility, we will have to think a little bit how to implement this clearly.
I will discuss and be back to you.

  • From: Stockholm
  • Registered: 2024-01-09
  • Posts: 2

Re: Styling footnotes and references in the graphical editor with CSS

Thanks a lot for your reply Casper!

Your answer is to the point and I would very much appreciate to apply a global stylesheet to a set of pages within one exposition. As for my particular case that I'm working with as a collaborator there is a minor advantage in applying a slightly altered CSS to different pages, but that could certainly be simplified by (re)using or even adding new classes.

In fact, there are features connected to such a global approach that would be really helpful if considered, e.g. the rather tedious workflow in manually copy-pasting page objects and code when working with different pages within one exposition. Similar to creating a snaphot for a whole exposition (for backup and restore purposes) there should be a way of saving and reusing page templates. Maybe it's been up for discussion and omitted. I understand that any new features and developments can have unwanted backwards (non)-compatibility issues to existing expos.

In detail, I see it will be difficult to apply footnote styles via raw css in the near future and hence I will not enforce any such solution. Thanks again for your insights, looking much forward to hear your input after discussion.

Timo Menke's Website