How to avoid text changes in Open Data Deep customization

[KenDoman]

I've been trying to implement some of custom header items from your Open Data Deep Customization example, and I've run into some issues. In the header HTML, I've added a style block and put some CSS styles in it, but the content is changed in the output after it's saved.

Below, I've added a sample snippet of the style block I added to the header CSS. CSS selectors were renamed to protect the innocent.

<style>
  .ember-view > div {
    border: 3px solid purple;
  }
  a.newlink:after {
    content: "I am a new link :)";
    color: blue;
  }
  a.oldlink:after {
    content: 'I am an old link :(';
    color: red;
  }
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And below is the output found in the HTML:

<style>
  .ember-view &gt; div {
    border: 3px solid purple;
  }
  a.newlink:after {
    content: &quot;I am a new link :)&quot;;
    color: blue;
  }
  a.oldlink:after {
    content: &#39;I am an old link :(&;39;;
    color: red;
  }
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Are there any recommendations to get around these text substitutions in style blocks, or am I limited in what I can do with styling?

[KlaraSchmitt]

Hi Ken,

Special characters (eg. ' " < >) do get stripped out of the text card when doing embedded styling there. I've also run into a similar situation when I've tried to do background-image: url(''); within embedded style tags. In my case, I was told to do it inline via style="...". Unfortunately, pseudo-selectors cannot be applied inline and at this time, are not supported in the <style></style> section. I can follow up with my team and see why we strip out some of the aforementioned special characters.

However, you said you were trying to do this in the HTML block, correct? We do have a CSS editor for the header block specifically in the sidebar under Header Settings and it does support special characters. It is neither a global CSS editor nor a page CSS editor, but if you were trying to get these styles applied in your header - it should work for that case. I tried the code you provided above and I was able to implement the :after classes within my header. 

The reason the header CSS is limited to that component and does not cascade is because the header can appear on multiple pages within the app, and we were having issues with some folks doing absolute positioning on a global level, which would break the layout when new features were released.

[KenDoman]

Hi Klara,

Thanks for the insights. I had a feeling about how the special characters (like "< >"), but I'm glad you've confirmed it. I've been able to modify my selectors to work with it. Some pseudo-selectors will work, but not the content attributes of a :before or :after selector.

As for the style block in the header vs. the CSS editor, I did that on purpose. I noticed that a style block in the header would cascade onto other pages when the custom CSS editor content would not. I wasn't trying to absolutely position anything on a global level, but probably something just as breaking.

[KlaraSchmitt]

Hi Ken,

While that is very astute of you to figure out how do global styling in that manner, as you might've determined from my earlier response, it was our intention that homepage aside, styling of the internal pages would be strictly through the theme editor at the moment, and later through a set of sass variables to minimize layout-breaking feature changes. It is a bug that the HTML header block allows the embedded style tags. I would strongly recommend you not use it as it will be fixed in the future and thus will undo any custom CSS on those internal pages.

Thank you.