cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
GideonWilliams
Community Champion

Cascading Stylesheets/Javascript from Main Account to Sub Accounts

Jump to solution

We set up a theme with attached CSS stylesheet and JavaScript in our main account.

We have a whole series of sub accounts (which is how we manage our different faculties).

Will the theme but more importantly the CSS style and JavaScript cascade down into the sub accounts?

I only ask this because we have been experiencing issues with deleting a Theme (and a different CSS stylesheet) from a sub account. I could not delete the theme only the stylesheet. I then had to save the theme which of course I did not want so now we have a completely different theme for a sub account. It would appear that I would have to manually ass in the CSS and JavaScript file? 

IMHO, the whole new Themes feature is not as straightforward as the one they had previously - am sure there are benefits but struggling to see what they are?

Thanks

1 Solution

Accepted Solutions
robotcars
Community Champion

I'm going to add to this with a coded example.

In our global theme javascript file, we have the following code, which produces the following image.

var ccsd = {
    data: {
      org: 'CCSD',
      url: 'http://ccsd.net',
      help: {
        del: ['https://nvlaatccsd.cayzu.com', 'http://ccsd.net/departments/professional-development-education/online-tool-support']
    },
  },
  update: function() {
    if (typeof ccsdx !== 'undefined') { // subaccounts use this namespace to store custom functions
        while (ccsdx.length) {
            ccsdx.pop()(ccsd.data)
        }
    }

    // the top-right account/sub-account link
    $('#account-logo').remove();
    $('.ic-app-crumbs').after($('<a>', { id: 'account-logo', href: ccsd.data.url, target: '_blank' }).html(ccsd.data.org))
  },
  util: {},
  ajax: {
    dataFilter: [],
    onComplete: [],
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

279030_Screen Shot 2018-06-11 at 1.23.13 PM.png

In our sub account themes, we can plug into our global javascript and change the values, which will produce the following image.

var ccsdx = ccsdx || [];

ccsdx.push(function(o){
    o.org = "Nevada Learning Academy";
    o.url = "http:\/\/nvlearningacademy.net";

    o.help.del = o.help.del.filter(function(v) { return v !== "https:\/\/nvlaatccsd.cayzu.com" });
});

if (typeof ccsd !== 'undefined') ccsd.update();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

279031_Screen Shot 2018-06-11 at 1.24.23 PM.png

We have affixed a 'location' name to the top right of Canvas, and then use sub account themes to change those values. If a school has a separate help link, we also update the help tray as well. You can also see in the pictures that the CSS has overwritten the global nav tray background color with the schools primary color.

In addition, our sub account themes also change course content elements like the H1, H2, H3, HR to the schools primary and secondary branding colors.

View solution in original post

6 Replies
chofer
Community Coach
Community Coach

Good morning,  @GideonWilliams ...

We currently don't use sub-account for our Canvas instance, but I thought I'd throw this suggestion out there...  Have you considered testing this in your school's "Test" environment rather than trying things in your live "Production" environment?  That way, you can set up the sub-accounts how you want in "Test" and then play around with the global CSS and JS files as much as you want without disturbing anything in "Production".  I would recommend making copies of your current CSS and JS files and including the word "test" somewhere in the file names to distinguish between your "Production" environment global files and your "Test" environment global files (this is what we do).  https://community.canvaslms.com/docs/DOC-10799-4214717430?sr=search&searchId=5fca0831-ab42-4e3e-b6a7... 

Hope this helps, Gideon!

Thanks  @chofer ‌ - We did do some testing in the Test environment and had things set up prior to the changes in how Themes were managed. Nearly 3 years down the line we want to update and refresh the look. Would love to be able to simply remove all Themes from every account level in one stroke or have an option that would allow us to select bespoke themes created in other accounts....

MattHanes
Community Champion

Will the theme but more importantly the CSS style and JavaScript cascade down into the sub accounts?

I'm not 100% sure I'm answering your question but let me give it a try. We have some CSS that adds icons next to the navigation items of a course for our elementary students. I added that CSS to our "Elementary" sub-account theme. None of our courses are in that sub-account directly. We have sub-accounts underneath "Elementary" for each school. And then another sub-account for each school that is the school year the courses were active. So I can add the CSS to the Elementary sub-account and it applies to a course that is nested underneath like this:

Elementary (sub-account) >> Blah Blah Blah Elementary (sub-account) >> 17-18 (sub-account) >> 1st grade Math (course)

So if I'm interpreting the question correctly, the answer is "yes, it does cascade down into the sub-accounts". 

Hope that helps!

Thanks so much for explaining and clarifying and also testing this for me Matt!

robotcars
Community Champion

I'm going to add to this with a coded example.

In our global theme javascript file, we have the following code, which produces the following image.

var ccsd = {
    data: {
      org: 'CCSD',
      url: 'http://ccsd.net',
      help: {
        del: ['https://nvlaatccsd.cayzu.com', 'http://ccsd.net/departments/professional-development-education/online-tool-support']
    },
  },
  update: function() {
    if (typeof ccsdx !== 'undefined') { // subaccounts use this namespace to store custom functions
        while (ccsdx.length) {
            ccsdx.pop()(ccsd.data)
        }
    }

    // the top-right account/sub-account link
    $('#account-logo').remove();
    $('.ic-app-crumbs').after($('<a>', { id: 'account-logo', href: ccsd.data.url, target: '_blank' }).html(ccsd.data.org))
  },
  util: {},
  ajax: {
    dataFilter: [],
    onComplete: [],
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

279030_Screen Shot 2018-06-11 at 1.23.13 PM.png

In our sub account themes, we can plug into our global javascript and change the values, which will produce the following image.

var ccsdx = ccsdx || [];

ccsdx.push(function(o){
    o.org = "Nevada Learning Academy";
    o.url = "http:\/\/nvlearningacademy.net";

    o.help.del = o.help.del.filter(function(v) { return v !== "https:\/\/nvlaatccsd.cayzu.com" });
});

if (typeof ccsd !== 'undefined') ccsd.update();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

279031_Screen Shot 2018-06-11 at 1.24.23 PM.png

We have affixed a 'location' name to the top right of Canvas, and then use sub account themes to change those values. If a school has a separate help link, we also update the help tray as well. You can also see in the pictures that the CSS has overwritten the global nav tray background color with the schools primary color.

In addition, our sub account themes also change course content elements like the H1, H2, H3, HR to the schools primary and secondary branding colors.

Robbie_Grant
Community Coach
Community Coach

 @GideonWilliams ,

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

 

Robbie