FHIR Chat · Adding css to input · IG creation

Stream: IG creation

Topic: Adding css to input

Keith Boone (Feb 24 2020 at 14:55):

Sometimes you need a little tweak to your template, perhaps even on just one page. At other times, in your IG. IG Builder has it's fixed set of templates, and you might not be able to control them.

Is there a way to add a css file somewhere in your input folder that will be incorporated into the IG pages?

NOTE: I've also tried adding <style type='text/css'> markup to the page in question, but it seems to get stripped from the build process.

Lloyd McKenzie (Feb 24 2020 at 15:31):

If using the 'standard' template, you can define your own custom extension to the template - see how UTG works.

Keith Boone (Feb 24 2020 at 22:50):

Link. I don't know what UTG is.

Lloyd McKenzie (Feb 24 2020 at 23:00):

https://github.com/hl7/utg

Lloyd McKenzie (Feb 24 2020 at 23:00):

Uniform terminology governance

Eric Haas (Feb 25 2020 at 16:28):

Yes I know you can by hacking the templates. But Lloyd how do you do it without changing them. I think we need a set of parameters so you can inject your custom assets into the templates. Then all you do is add your custom stuff in your local assets folder and add the parameter to the ig resource and away you go. Does this already exist or do we need to add it?

Lloyd McKenzie (Feb 25 2020 at 16:34):

I don't think we should add it. If you're changing the look and feel of an IG (adding CSS, etc.), then you're essentially defining an override on the template - so be explicit that's what you're doing. Style stuff should be managed separately from 'content' stuff. The template approach does that.

Lloyd McKenzie (Feb 25 2020 at 16:36):

It also makes it easier for the FMG looking at HL7 IGs to see if the template is being overridden in some manner - and whether that's ok or not.

Lloyd McKenzie (Feb 25 2020 at 16:36):

Note that this isn't "hacking" - overriding templates is a key part of how templates work.

Grahame Grieve (Feb 25 2020 at 19:51):

what custom stuff are we talking about?

Lloyd McKenzie (Feb 25 2020 at 20:22):

@Keith Boone ?

Jose Costa Teixeira (Feb 25 2020 at 20:25):

also, you can do local customizations to the templates but afaik these will not work when you put it in the ci build

Lloyd McKenzie (Feb 25 2020 at 20:49):

It depends what the customizations are. If you mess around with the Ant or scripts, it won't run in the CI build unless you're a trusted source

Jose Costa Teixeira (Feb 25 2020 at 20:54):

my custom template (as in a folder called myTemplate next to my input folder) worked locally but the ci build said "cannot find template" or so - nothing about being trusted

Jose Costa Teixeira (Feb 25 2020 at 20:55):

but this was a loong time ago (like 2 weeks ago) so this may have changed.

Lloyd McKenzie (Feb 25 2020 at 21:00):

That might be about how you expressed the path. UTG does this and it works on CI build

Grahame Grieve (Feb 25 2020 at 21:02):

ci build said "cannot find template"

Should work. I can investigate if necessary

Jose Costa Teixeira (Feb 25 2020 at 21:14):

no need, thanks. I will ask if I find it again

Keith Boone (Mar 10 2020 at 19:17):

I want to use GlyphIcons on one page of a guide I'm working on. That's handled via CSS. It's not needed for all guides, nor in this guide, for all pages.
In my case, I only need those icons on one page. I can probably address it with <style> tags in the .md file, but as I recall, inline styles are sometimes not supported by browsers.

That's one item (for the mobile health guide)

Another item is we want to add an alert much like the publish box to each page saying "this is for community review yada..yada..yada"
Another item is to add a way to add comments to a page (perhaps even JIRA Tickets once we have a JIRA Project).

These last two are for V2-toFHIR. Those last two are BOTH very likely TEMPLATE changes, and that makes sense.

Jose Costa Teixeira (Mar 10 2020 at 21:31):

to add your own css - the ihe ig template does it. basically you can add a new css and a file called _append.fragment-css.html in the includes which points to the new css

Jose Costa Teixeira (Mar 10 2020 at 21:34):

the ballot box can be seen in e.g. the Belgian IG i'm working on
http://build.fhir.org/ig/hl7-be/be-core/

Jose Costa Teixeira (Mar 10 2020 at 21:36):

html:

<blockquote class="stu-note">
blah blah
</blockquote>

Jose Costa Teixeira (Mar 10 2020 at 21:36):

the css is

.note-to-balloters::before {
  white-space: pre;
  content: "Note To Balloters\A ";
  #background-color: yellow;
  color: red;
  font-weight: bold;}
.note-to-balloters, .stu-note{
    margin: 5px;
    padding: 10px;
    border-left-style: solid;
    background-color: #fff2ff;
    border-left-color: #ffa0ff;
}

.stu-note::before {
  white-space: pre;
  content: "Note\A ";
  #background-color: yellow;
  color: red;
  font-weight: bold;}

Jose Costa Teixeira (Mar 10 2020 at 21:38):

adding jira ticket is possible but I don't think anyone has done that bit of javascript yet...
I checked the Jira API and I thought it required a POST so I guess it needs some coding.

Keith Boone (Mar 11 2020 at 03:24):

I already did some scripting to support DISCUS, but for real world IG use in HL7, we want to use Jira. When we have a place to put tickets for the V2 project, I'll work on coding it up.

As for @Lloyd McKenzie 's suggestion, I'll write it up, perhaps as a blog post, so that others won't have to decrypt someone else's code.
I have it working, and it's not terrribly difficult, but it did require some decrypting of all the right pieces parts.

Jose Costa Teixeira (Mar 11 2020 at 04:55):

I've written a how-to based on Lloyd's devdays session and discussions, and some of it is in a PR for the ig-guidance (@Lloyd McKenzie ).
Not sure if useful.

Last updated: Apr 12 2022 at 19:14 UTC