Hello, I am researching meteor for a project I am about to start. Part of the requirements for the project is that, different students from different schools are going to log into this app. Based on the school of the student that is logged in the styling/branding of the web application should change to that of the school.
Is this possible in meteor websites? I imagine I would have to set a global variable in my Sass file and change it based on the URL or maybe dynamically create different css files? What would be the way to achieve this in meteor?
When I convert the site to android and ios apps, will I be able to change the theme based on the students school too? I know the CSS and JS files are all packaged with the apps when submitted but is there a way to do this with the new hot code push system or any other feature meteor has?
Understanding the best way to go about achieving these things in meteor will be very helpful!
Building on to @dapearce’s answer if you’re thinking of a more global change in CSS. You can potentially get the user’s school from the currentUser document and add that to the body as a class. You can then have scoped css files in SASS and specify which elements look different.
@Maaz Could you explain further? So I plan for this to be dynamic. In the sense that there would be an admin panel where you can add a school lets say “Havard University” and then add the color, lets say red as their primary color. so any student who says they go to havard will get the red navigation colored bar. But I have to somehow add these colors programmatically to the style sheet. i have thought about having a school database that also holds their color and logo in a field that gets swapped out depending on the student but I am glad to hear this will work on both mobile and web
If defining schools and colours are dynamic then it’s not as simple as having a few stylesheets in SASS. You’ll be probably be dealing with style attributes for often than not. If you’re only switching colours though, it might not be that bad to just throw that into style attributes. As far as I know there is no easy way to generate SASS on the fly and add it to your project dynamically.
Spacebars is pretty good at handling dynamic attributes example copied from an article
Do some thinking about how to break up your styles in a way that makes the most sense. For example, you may have global CSS or SCSS stylesheets for some things, but use inline styles for properties that you want the user to customize.
If you are not using react and using Blaze like I was when I created this post, use inline styling. So I was creating a brand-able (White label) app where a client can choose their own colors. I stored the colors they chose as one of the users attributes and then displayed it inline whenever they logged on.
If you want to be able to do this on the fly, you can update this attribute based on actions in your app. So if someone clicks a button, the app turns red. You can update this attribute at the click of a button and you would see the app in real time change. So yes it is possible.