Custom CSS + JS files

Post

Posted
Rating:
#4596 (In Topic #980)
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’

& the correct way of referencing them

This may be a bug or maybe I'm doing something wrong. Please let me know.

Firstly, I've noticed when creating a new custom CSS file or JS template within the 'edit templates' screen (and choosing 'new', entering file name manually, and clicking 'edit'), these files aren't saved anywhere. I tried creating them multiple times, and despite each time giving me a successful result, they were no where to be found from within the editor when I went back to look for them.

Instead, I navigated to an existing CSS file and JS template directly from within the editor, then replaced the filename in the URL with the name of my custom file. This brought me to an empty template where only then was I able to actually create and store the file.

Secondly, I'm confused as to how referencing works because it seems like when a custom CSS file is created, it's automatically included in the templates (at least it was for me). After creating my custom CSS file, I was able to utilize various style attributes from the custom CSS file when referencing the class names in my HTML without the need to require or include the custom file inside the global template.

However, when I created a custom JS file, it was not automatically referenced. So I assumed the only way I could get the JS to function properly is by adding {$REQUIRE_JAVASCRIPT,myfile} to the global template. Once I did this, the automatic inclusion of the CSS was dropped off, requiring me to also include the CSS file manually in the global template using {$REQUIRE_CSS,myfile}. I was unable to tell if the JS bit was working correctly, as it is sort of dependent on my custom CSS.

Now, with both Tempcode 'require' symbols written in the global template (one for the custom CSS and one for the custom JS), it seems only the CSS is being included and not the JS.

Please let me know what I'm doing wrong.
Online now: No Back to the top

Post

Posted
Rating:
#4597
Joe
Avatar
Standard member
Joe is in the usergroup ‘Honoured member’
I can include both in a Comcode page and everything works fine, but I would need to define these files globally as they would be used throughout the site.

{$REQUIRE_CSS,buttons}
{$REQUIRE_JAVASCRIPT,buttons_global}
Online now: No Back to the top

Post

Posted
Rating:
#4605
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
The first part is a bug, sorry about that, fixed in:
Fix bugginess in template editor with new non-tpl templates · ocproducts/composr@6dee621 · GitHub

Reading the rest of your posts now.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#4606
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’

Joe said

it's automatically included

The self-learning cache can be a bit weird, with what it might pick up on and pre-include.
However, you should explicitly include as you've done.
You can do that in the HTML_HEAD template before {$CSS_TEMPCODE}/{$JS_TEMPCODE,header}.

There is a coding standard that says CSS or JS files should not be created to have unintended side-effects. i.e. if these files are loaded up and you don't need them, you shouldn't have any code in them that detrimentally changes the behaviour of the pages you don't want them on. So bear that in mind. Your site should be able to function on all pages if all the CSS and JS files were loaded on all those pages (of course in practice they won't be).


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

mytracker, gabriel58, John Connor, Salman, amit.nigam, KingBast, 232 guests

Forum statistics:
  • 991 topics, 4,755 posts, 5,578 members
  • Our newest member is agentaruhanbola
Birthdays:
Back to Top