-
-
Notifications
You must be signed in to change notification settings - Fork 49
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Example for adding Custom CSS #398
Comments
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 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! 👍 |
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. |
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 |
Thanks @martijnversluis, that will do for me. Your work is amazing … |
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
The text was updated successfully, but these errors were encountered: