Example for adding Custom CSS

[melvas6]

Hi thank you so much for the great project. It made my work so easy.

I had a difficulty in customizing layout because of CSS class collisions.
I want to add custom CSS to row class in HtmlDivFormatter. Is there a way to override default CSS by passing in scoped CSS, applying only to rows within the paragraphs?

Thank You

[martijnversluis]

Hey @melvas6! You're welcome, great to know this is valuable for people 🙌

If I understand your question correctly, you want to scope the generated CSS. That is possible using the scopedCss() function. Although the function description indicates otherwise, scopedCss is also suitable for output from the HtmlDivFormatter.

Scoping or changing the CSS classes within the HTML output is not possible at this moment,

I hope this answers your question. If you need more info, feel free to ask! 👍

[melvas6]

Hi @martijnversluis, Thanks for the quick reply.

I still haven't been able to make of scopedCss() function. It returns a CSS string with the given classname attached. What am I to do with this?

.chordSheetViewer` .chord:not(:last-child) {
  padding-right: 10px;
}

.chordSheetViewer .paragraph {
  margin-bottom: 1em;
}

.chordSheetViewer .row {
  display: flex;
}

.chordSheetViewer .chord:after {
  content: '\200b';
}

.chordSheetViewer .lyrics:after {
  content: '\200b';
}

I must admit, I'm not familiar with CSS a lot. For now, I have declared global classes that would override the default behaviour. However, it affects the other elements too. Would love a scoped classes solution, where we could pass in CSS styles and it will get added to the default classes.

.row{
    white-space:pre;
    margin: 0 !important;
    margin-left: -12px !important;
}
.paragraph{
    margin-top: 20px;
}
.chord{
    color: var(--chord-color);
    font-weight: var(--chord-weight);
}

I would be really happy if this comes towards a clean solution.

[martijnversluis]

If you want to apply styling only to rows within paragraphs, you could write CSS like:

.paragraph .row {
  ...
}

or

.chordSheetViewer .paragraph .row {
  ...
}

The ability to customise the CSS classes for HTML output is still a useful feature, so I added it to the backlog: #399

[melvas6]

Thanks @martijnversluis, that will do for me. Your work is amazing …