Questions
0
Under review
CSS in article assets
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
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
Customer support service by UserEcho
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.
So it would be like: