I would like to use the same CSS sheet (like bootstrap, foundation) across Ignition and non-Ignition (standard web based) projects. Is there a process to integrate an external style sheet into a Perspective module project? I looked through the docs and I didn’t see anything specific on the topic.
The goal is for a consistent look and feel on buttons, text boxes, tables etc. across our application portfolio.
tldr: Possible using theme.css (documentation pending), a custom module, or via the forthcoming project-inheritance system. Read on for details…
Currently there are two ‘official’ ways you’d be able to do that. One is by creating your own theme css, adding it to the appropriate gateway location, and then choosing that as the theme for all your projects. Not sure we have theme css documented yet, but it will be in the coming weeks leading to release.
Another way would be by writing a (very simple) module targeting the perspective API and adding a ‘component’ that simply declared a dependency on a resource (your css), and then embedding that component into your apps. If this sounds like more work, then you’re right. Technically feasible, but not what I’d suggest if you don’t need to create custom components.
In the next week or so we’ll be merging the new project resource system into the nightly builds, which is a large change to how Ignition stores information about your projects. The new system supports “project inheritance”, which will allow you to create a single ‘style project’ where you can define your custom styles (named styles) in a single project, and then use them in any other project. While not the same as creating a css file, it will be an excellent way of creating reusable style elements that your organization can standardize around. I suspect people will create similar reusable projects for libraries of embeddable views. A style or component project would be my recommendation for what you are looking for in most cases, simply because it will be more accessible to application designers (they won’t need to know/understand css to make changes).
One or more of these solutions should satisfy any styling need I can imagine.
Is there a way to make the class CSS styles inherited by the objects created in a view? Or is there a plan to make it so that you could do that?
Not sure I'm following the question - can you break it down for me a bit?
If I create a style class and then assign a view’s root container to have that style class, I would also like all new items (buttons, labels, etc…) that I create to default to have that same style class instead of having to assign each one to the same class. At least I would like to have the option of having the parent style be inherited by the children.
Ah, I think I understand now.
Right now there is no way to set the default style classes of a component, though it’s a good idea and something we’d like to support.
On a view level, the idiomatic way to approach it would be to create a Template View, and then set parameters for the classes you want to use, and bind those parameters to the appropriate style.classes properties. We actually demonstrated a simple example of this in the ‘Design Like a Pro’ webinar last week.
So for now - no default or inheritable styles by default, but we’re working on improvements to this system. Consider instead creating Template Views and pre-wire them for style classes that you can define as default parameter values.
Did theme.css ever get documented? I was looking to import some existing css into a new project and can’t seem to find a theme.css file anywhere on the gateway.
Thanks,
Dan
it sounds like you’re looking for the
Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes
directory, where the Perspective theme files are located.
There isn’t a whole lot of documentation around how to use the files located there because we’re currently modifying those files and how components use them. When that work is completed in the coming weeks, I expect the documentation will be vastly expanded to include how to use your own.
For now what I recommend is that you copy one or both of the files located in the specified directory, supply any additional stylings you’d like, then save the modified files with unique names. Within the designer you just need to set session.props.theme to the name of the file you want to use (without the extension). So if I copied light.css and made changes to it, then saved it in that same directory as demo.css, I would set session.props.theme to “demo”.
Awesome! Thanks for the help.
I’m trying to change the fill color of the new symbols in v8.1rc3 from the variables.css file as shown below but i can’t seem to resave the file.
How I was able to get around the permission issue was to copy the info into a new file (I used notepad++) and save as the same name, then I copied the file from where I saved it into the proper theme directory in Ignition.
