Dynamic Content CSS?

General Discussion
1

I am starting to play more with Dynamic Content. From what I have seen, you can only assign in-line styles to dynamic content. This is a no-go in terms of responsive design, since we can’t use media queries.

How do we use external style sheets for our dynamic content?

2

You can use external stylesheets, they suppose to be outside DWC, linked in the page where the DWC will be included. that actually give more flexibility because you can use the same dynamic content in different places, and each place will have their one styling.

But there are some special things to consider:

  • DWC removes the class attribute from the content
  • DWC includes some styles inline of their own.

Here is the workaround:

in DWC, use ids instead of classes to identify the elements you want to style - just an id in the wrapper Element can be enough depending on the styles you need to build.

if you need something similar to class, use data attributes, like :
<p data-myclass="className" > this is a paragraph</p>

the CSS selectors should use all options but classes, in case you decided to use custom attributes, build the css code to style it like this:
p[data-myclass="className"] { background-red }

I know this could be an issue if you use some framework like bootstrap, but it is possible to use all the power of CSS in DWC the way it is today.

I guess a lot of the dynamic options users can have out -of-the-box requires updates in the content and styles - I would suggest an option in DWC to disable auto styling for advanced users.