How to apply CSS styles to cloned sections?

OL Connect Professional Designer
1

I have a section called ‘Plain Run Page’ which includes default.css and a master page called ‘Master Page - Footer’.

In my control script, I am dynamically setting a PDF as the background onto cloned sections (similar to https://learn.objectiflune.com/discourse/t/dynamically-load-multiple-multi-page-pdfs-in-designer/1023/1)

What I’m noticing is that the CSS styles that were applied to the master page elements and called by the original section (‘Plain Run Page’) are not being applied to the cloned sections:

[Plain Run Page]

[Plain Run Page Clone 1]

Based on these screenshots, it looks like default.css is not being applied to cloned sections which is why the formatting of the text is different between the original and clone.

If this is the case, is there a way to apply the default.css to the cloned section?

2

It is a known issue in version 1.7. CSS get lost when cloning a section. This has been fixed in the upcoming version 1.8.

The workaround is to use inline style in your HTML.

3

Thank you hamelj, as a workaround, I’ve created the following script that looks to apply the CSS styles across cloned sections:

4

This is indeed a known issue in 1.7 (unfortunately) After creating section clones via a Control Script, the links with the CSS stylesheets files are gone. This causes the formatting to be lost.

Typically the CSS stylesheets reside in the Stylesheets folder located in the Resources panel of the template. The cloned section no longer references these files. These files are normally referenced by <link> tags in the <head> section of the HTML. An example:

<link rel="stylesheet" type="text/css" href="css/default.css">

Workaround
An User Script (e.g. script entries residing in the Scripts folder of the Designer) can be used to re-establish the link to these files. E.g. add the respective <links> to the <head> element of each section. Below a sample script to link the standard stylesheets and a custom stylesheet to the <head> of each section.

Selector: html head

Script:

var stylesheet = '<link rel="stylesheet" type="text/css" href="css/default.css">';
stylesheet += '<link rel="stylesheet" type="text/css" href="css/context_all_styles.css">';
stylesheet += '<link rel="stylesheet" type="text/css" href="css/context_print_styles.css">';
stylesheet += '<link rel="stylesheet" type="text/css" href="css/my_custom_stylesheet.css">';
results.append(stylesheet);

Hope this is of some help,

Erik

5

Excellent, thank you Erik, I was able to implement successfully using the following:

6

Good to hear!

Erik