Is there a way to use a script to make conditional which stylesheet is loaded depending on a datafield?

OL Connect Professional Designer
1

Hi,

I am trying to figure out the best way to change the css of a print-context page depending on the record in a data field. So far I have been doing it in a rather messy way, changing each class depending on that field. But it would be neater if I could just have separate stylesheets for each scenario, and a script that would load that stylesheet if the data field condition was met.

I have managed to cheat a little and create a html snippet with the

2

Hello Rebecca,

Generally speaking, it’s only necessary to change a whole stylesheet if the whole design of your document (or website) changes completely - often changing stylesheets is used to “theme” website.

It would help to know what it is that needs changing before I can help you determine the best method to do it - in web technologies, every challenge has its own solution(s)!

But here are a couple of hints:

  • Use classes rather than inline styles. You can have more than one class to any element and classes can be shared between multiple elements - so you can affect change on a lot of elements in one fell swoop.
  • Styles are inherited, aka they will propagate down to children elements. For example, if you want to make a table row bold or have a background, you apply that style to the <tr> element, not each <td> individually.
  • CSS selectors are really, really powerful. You can things like “apply this style to: links that have no alternate text which are within the menu div but only if they follow a line separator with a specific class”. I’m not kidding ( #menu &gt; hr.line + a:not([alt]) { /* styles go here */ } ) and this is… actually still a pretty simple selector. Here are some search results for more info.

Hope this helps!

~Evie

3

Thank you for taking the time to answer Evie!

To add a little more detail, we are printing a document where the text stays the same, but the branding will change depending on a data field (company). So Each company has a different stylesheet and logo but all the other data stays the same. I have indeed so far done as you suggested and had lots of little rules, but when a new company is added it gets fiddly. That is why I wondered if there was a way to do something along the lines of (I know this doesn’t work but just to show what I mean):

if (record.fields[“Business”]==“BusinessName”) {
results.replaceWith(loadhtml(“Stylesheets/BusinessName.css”));
}

4

Well, if you really DO need to modify the whole stylesheet (which in your situation, probably is the best way to do it) then you can.

Selector: link[rel=stylesheet][href~="css/base.css"]

Code:

var BusinessName = record.fields.Business;
results.attr(“src”, “css/” + BusinessName + “.css”);

I unfortunately don’t have any file that’s remotely close to what you’re doing, but this is, err, supposed to work? I guess? :stuck_out_tongue:

5

Thanks Evie, I will give it a try and let you know!

6

Awesome, I was needing this exact script, dynamically change the stylesheet href value. I will say the code was 99% correct. Minor change and it worked(changed “src” to “href”):

var BusinessName = record.fields.Business;

results.attr(“href”, “css/” + BusinessName + “.css”);