[Solved] Reload external CSS

OL Connect Professional Designer
1

I’m developing a template using an external CSS.

When I first imported it, the styles have been applied correctly, whenever I change the external file (with the Designer still open on actively working on it) however, changes aren’t reflected in the Designer. I have to remove and import again the external file.

I suspect it’s happening something similar to what’s reported here: External Library wont refresh - DataMapper - Upland OL User community

If so, how can I define an external CSS so that all templates importing it reflect its changes at runtime too? I have to develop 20ish templates and the goal of using an external CSS would be to update all templates at once if changes are needed. If I have to open all of them, delete the import and re-import the CSS the purpose of an external file is somewhat diminished.

EDIT:
Just read in the docs how to refresh a CSS

Tip: To refresh the remote resources in a Designer view, use the Refresh option in the menu (View > Refresh) or the Refresh button at the top of the Workspace.

Still the second part of the question remains, will templates load the CSS everytime a Print job is submitted or will they use a local cached version?

2

The cache for remote content is cleared automatically at the start of each job.

1 Like
3

I have to retrace my steps.

The following CSS, imported as remote CSS file in the Template do not update when clicking refresh. I have to close and reopen the Template altogether if I apply a change.

In addition to this it seems that CSS specificity is not respected. The font Arial Narrow size 10pt gets applied to everything regardless of the fact that another CSS block, with higher specificity defines a different style.

* {
	font-family: "Arial Narrow";
	font-size: 10pt;
	text-align: justify;
}


.blocco_indirizzo {
	font-family: "Arial";
	font-size: 10pt;
}


.piedino {
	font-family: "Arial Narrow";
	font-size: 8pt;
	text-align: justify;
}
4

I see what you mean, remote stylesheet resources are apparently not refreshed after clicking the Refresh button. This only occurs for stylesheets, not for other remote resource types. I created a ticket to fix that bug (internal ref: SHARED-93506). I’m not sure how this could have slipped through the cracks for so long.

As for specificity, I’m afraid I cannot reproduce that. I’m just spitballing here, but if your HTML looks like this: <p class="piedino"><span>Lorem ipsum</span></p> the font specified in the “.piedino” rule applies to the paragraph since that rule has the highest specificity, but the font specified in the “*” rule applies to the span (without a class) and the “Lorem ipsum” text.

Just to show that it should work:

  • Create a new print template
  • Change the class of the paragraph to “test”
  • Add the following style rules: * { background: green } .test { background: blue }

The background of the paragraph is now blue, as expected.

1 Like
5

If you can PM me an anonymized template that shows the specificity issue (preferably stripped down as much as possible) I would be happy to take a look.

6

Indeed, you are right. I must have misunderstood how to properly use the * selector.

Changing the selector to body makes the section result as expected.

The aim was to set a global font unless otherwise specified by a higher specificity selector.

Using body instead of * visually results as expected.

Thank you very much for the availability but as it seems I was wrongly using *