cancel
Showing results for 
Search instead for 
Did you mean: 
jarredtruschke1
Surveyor II

Nested Subaccount CSS Inheritance

Jump to solution

Hi everybody,

I'm hoping to get some clarification on something that has been unclear to me, and gain some insight...  Smiley Happy

Themes are inherited from the account level, so that you can have a master theme, and then a subaccount theme that works along with the master theme that is loaded from the account level.

I was hoping that cascading inheritance functionality was in place for nested subaccounts as well; meaning that a subaccount would inherit the theme from the account level, but then also its parent subaccount, and then its own theme.

A subset of the structure I'm working with looks like this...

University (main account)

     Zone (Online, Media Media, Organizations, etc)

          School

We're actually rolling something out by College (School), but each college resides in a "zone". Zones are defined as Online, Organizations, Mixed Media, etc. Each zone has styles that apply to them, and then each college has styles specific to them as well. I can't roll up changes from the Online zone to the main University account, since the Mixed Media zone has different needs, so I really do need to have 3 levels of cascading styles applied. 

I thought that styles were inherited down through subaccounts, but it doesn't appear to be working this way. When you read the documentation here closely...

https://community.canvaslms.com/docs/DOC-10891-4214418311

It seems to state that a subaccount can have it's own style, and then inherit from the Main Theme (so no cascading down through subaccounts). It also seems that after the Main Theme is applied, that a page will apply the nearest Theme (with the CSS applied) based on the subaccount the page resides in, and will ignore the theme from the subaccount nested above it.

I can certainly copy the style from the Zone theme and apply it to the School subaccount theme as needed, but then if a style changes, I need to go into all of the other subaccounts and change them there too, which is what we're trying to avoid.

Has anybody else had any experience with this? I'd appreciate any insight!

Thanks!

Jarred

Tags (3)
1 Solution

Accepted Solutions
akkaufmann
Learner II

Hi  @jarredtruschke1 ‌,

If I am understanding you correctly, you are adding actual CSS files to the theme rather than just using the theme editor. 

Here we only have used the options in the theme editor rather than custom CSS files, so I can't attest to how CSS files work, but we have added some custom Javascript files to our themes, and it seems that they work in a similar way.

From how I understand it, if the theme of a subaccount doesn't have a CSS/Javascript file attached to it, it will use the parent account's file(s). If it does have its own file(s) then it only uses the file(s) attached to it and ignores the parent's file(s).

In our case, we have 'account' Javascript files that reference our Javascript files with the actual code so the code isn't duplicated and is easier to maintain. It also has the added benefit of not needing to upload a new file to Canvas for every little tweak since the code is stored on a different server.

You should be able to do something similar with CSS (assuming you are able to host the actual CSS on a different server) and then only upload CSS files with @import(s) to the files with the actual CSS.

For example, the CSS file uploaded to the school account could look something like this:

@import url("url/unversity.css");

@import url("url/zone.css");

@import url("url/school.css");

That way you don't have to duplicate the CSS code in every file and then have to update multiple files if there is a change to a higher level account.

Let me know if you have any questions about this method.

Alex

View solution in original post

6 Replies
kenneth_rogers
Instructure
Instructure

Hello,  @jarredtruschke1 !

I wanted to apologize for your question sitting here without gaining any traction. Unfortunately, we don't use subaccounts at my institution (don't get me started!!!), so I'm not going to be much help to you. However, I'm going to share this with https://community.canvaslms.com/groups/admins?sr=search&searchId=29ae084f-e097-4f46-9c29-67a2386eba6...‌ and https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=4282649c-b86a-4aae-b219-...‌ to see if we can get some additional eyes on this for you!

Thanks  @kenneth_rogers , I appreciate the effort!  Smiley Happy

akkaufmann
Learner II

Hi  @jarredtruschke1 ‌,

At my institution, we have similar setup to yours in regards to accounts and we do have some special branding for the subaccounts of the main account, and that branding does cascade down to the subaccounts of the subaccounts.

The difference in branding isn't tremendous (just a different 'watermark'), but it does affect the subaccounts without the need to touch the theme editor.

Alex

Hi akkaufmann‌,

Thanks for your follow up!  Our styles do cascade down through the subaccounts, but the challenge that I'm having is that when I introduce a new style into a lower subaccount (by creating a theme), the style from the Theme from the subaccount above it seems to not be applied.

As an example, we have a master style applied to the main account. At the first level we have a style applied that changes the style of the Page Title by introducing css through the Theme.

At the next level down, I have to introduce a new theme with a new CSS file for changing the position of something for an entire group of courses. This works as I imagine it should, but the style for changing the Page Title is no longer applied.

It makes sense, in a way, that this new Theme would overwrite the theme above it, but I guess I also had an expectation that the CSS would cascade its way down through the themes, as the Master Theme css seems to cascade down through. It seems like the only CSS to cascade and trickle through the entire subaccount structure (even when a subaccount has its own Theme applied)  is the master CSS.

Do your styles cascade down from subaccount to subaccount, even when the lowest level of subaccount has its own Theme & css applied to it? Or do they only inherit from the Master Theme?

Thanks for your time!

Take care,

Jarred

akkaufmann
Learner II

Hi  @jarredtruschke1 ‌,

If I am understanding you correctly, you are adding actual CSS files to the theme rather than just using the theme editor. 

Here we only have used the options in the theme editor rather than custom CSS files, so I can't attest to how CSS files work, but we have added some custom Javascript files to our themes, and it seems that they work in a similar way.

From how I understand it, if the theme of a subaccount doesn't have a CSS/Javascript file attached to it, it will use the parent account's file(s). If it does have its own file(s) then it only uses the file(s) attached to it and ignores the parent's file(s).

In our case, we have 'account' Javascript files that reference our Javascript files with the actual code so the code isn't duplicated and is easier to maintain. It also has the added benefit of not needing to upload a new file to Canvas for every little tweak since the code is stored on a different server.

You should be able to do something similar with CSS (assuming you are able to host the actual CSS on a different server) and then only upload CSS files with @import(s) to the files with the actual CSS.

For example, the CSS file uploaded to the school account could look something like this:

@import url("url/unversity.css");

@import url("url/zone.css");

@import url("url/school.css");

That way you don't have to duplicate the CSS code in every file and then have to update multiple files if there is a change to a higher level account.

Let me know if you have any questions about this method.

Alex

View solution in original post

Hi akkaufmann‌,

Thanks for your follow up! That is what I've been experiencing as well, I just wanted to be sure I wasn't alone on my own little island!

When I create those CSS and JS files, I wanted to be sure I understood what should be declared, and what should be inherited. We do @import those files in our themes, so that's how I'll be sure to proceed.

Thanks again for your follow-up and insight!

Take care,

Jarred