0
Under review

CSS in article assets

Adam Wratten 5 years ago in BLOX CMS updated by Christine Masters (Director of Product Management) 4 years ago 2
Hello, folks!

Our Editorial staff is looking to get a little more fancy with their articles (finally) and I'm trying to find ways to facilitate that without running into issues regarding layout and coding.

As such, I'm wondering if there is a way to use CSS in an article asset.

Typically, when I want to do any sort of styling in an article asset, I have to do it inline. In most cases, this wouldn't be an issue, but now that multiple platforms need to be considered (mobile, tablets, etc.) it's important to keep in mind screen widths and how this can affect users' views.

If I wanted to just place an image and have it scale, that would be fine, but what if I want it to adjust completely depending on the screen size? In CSS, I would use @media tags, but these do not work inline.

So, long story short, I would like to be able to create <style> tags in article assets and not have the system remove them when I save, or would like some sort of alternative that would allow me to have articles treat things differently depending on screen size.

What can I do?

- Adam
If you have template access, you could stash an article-specific CSS file in your global folder and then modify your article display template file to load a specified CSS file based on a custom property.

For example:

if this.asset.custom.stylesheet;
cms.page.add_css('global/resources/styles/articles/'+this.asset.custom.stylesheet+'.css');
end;

Assuming you're on Zen templates instead of Flex, you could simply create a new content.article.html.utl file in your global folder, copy the contents from the core version of the file, and insert the above lines of UTL.

In this example, on the "other" tab of an asset, you'd create a new custom property called "stylesheet" and give it a value that equals the name of the CSS file you've inserted into a designated spot in your global folder. (I have the stylesheet call adding the ".css" to the end, but that's optional.)

Downsides here? It breaks the content.article.html.utl file off the upgrade path. But... if you're using Flex templates, you could do the same thing with one of the opt_ macros without having to modify a core file at all.


Under review
Also, on Zen templates, there is a class in the main container to target CSS specifically to that article.

So it would be like:

.article_fcee2867-bdc4-56c9-8931-1294cfab2acd-html strong, .article_fcee2867-bdc4-56c9-8931-1294cfab2acd-html b {
color: #fff;
font-weight: bold;}