WebCMS Posted November 14, 2023 Share Posted November 14, 2023 Is there a place to add CSS and JS in one place that is common to all themes? I could not find a way to add CSS even at the theme level. Ideally, there should be a common.css application-wide and a custom.css for each theme. And the JS file similarly (common.js and custom.js). Otherwise, it will result in redundant CSS and JS for each theme. If there are a dozen themes, the work and redundancy multiplies as many times. Link to comment Share on other sites More sharing options...
Marc Stridgen Posted November 14, 2023 Share Posted November 14, 2023 Im a little confused as to why you would have redundant CSS and JS there. Actually the opposite would be true. If it automatically adds it at an application level to themes that dont need it, then it would be redundant code. The theme is what defines the look of the site, and is therefore what contains any code relating to the way the site is displayed, by design. So any CSS or JS, would need to be added into the theme (or multiple if that's what you require). There are a few exception to this rule when it comes to javascript, such as javascript that needs to run at page level when new content is loaded to the page (used for some analytics services for example), which you can add in System>Settings>Advanced configuration. Generally however, you should be adding to the theme if they are theme related Link to comment Share on other sites More sharing options...
WebCMS Posted November 14, 2023 Author Share Posted November 14, 2023 (edited) Most of the CSS I created was to alter/enhance the appearance of the themes and make them interactive using predefined CSS variables to make them generic across the themes. And there are some custom tweaks specific to some themes. But I need to apply the same common CSS changes for each theme + custom changes for some themes every time I make changes/enhancements to CSS redundantly. Other successful web dev tools implement a global CSS and page-level CSS where we could upload files, specify file URLs or type out the code into a textarea box. It would be nice to have a global CSS common to all the themes and a theme-level CSS specific to themes where we could add URLs to these files or upload files or just type into text areas. CSS is purely client-side and safe to inject. I could live without theme-level JS but a global common JS would be nice. Will it work for all themes if I add the CSS and JS to Advanced Configuration > Body Code and Page View JS boxes under Settings? I've seen these settings before but haven't tried using them. What will be the order of execution when code is added to these boxes in conjunction with theme-level CSS specific to some themes? If theme-level CSS gets included at the end for higher precedence, that should work. Edited November 14, 2023 by WebCMS Link to comment Share on other sites More sharing options...
opentype Posted November 14, 2023 Share Posted November 14, 2023 14 minutes ago, WebCMS said: It would be nice to have a global CSS common to all the themes and a theme-level CSS specific to themes where we could add URLs to these files or upload files or just type into text areas. IPS is moving in the other direction and removing options to mess with these things. It’s just not something the average Invision Community user needs. That being said, it’s actually pretty easy to set up a custom plugin or app to apply global CSS and JavaScript code. And on a self-hosted installation, you could also just set up your global code on the file system and then call it from each theme. So, there are multiple options to achieve it. But IPS will probably not create a dedicated feature for it. Meddysong and Marc Stridgen 2 Link to comment Share on other sites More sharing options...
Marc Stridgen Posted November 14, 2023 Share Posted November 14, 2023 24 minutes ago, WebCMS said: Will it work for all themes if I add the CSS and JS to Advanced Configuration > Body Code and Page View JS boxes under Settings? It would depend on what "It" is exactly. All I can really say is to try it. We cannot make any guarentee on the order in which CSS is loaded, other than that which is provided at a theme level for that purpose Link to comment Share on other sites More sharing options...
Recommended Posts