cancel
Showing results for 
Search instead for 
Did you mean: 
xcotto
Explorer III

SubAcconts Theme Editor not Applying

Jump to solution

I was trying to apply the theme editor and some custom CSS/JS  into different SubAccounts that we use in our instance and these changes are not applying to their respective SubAccounts.

any help will be appreciated Smiley Happy

1 Solution

Accepted Solutions

Here are my take-aways from your response above:

  1. "I load CSSv1 into each subaccount individually" - my interpretation is that you are applying a common css file to the sub-accounts
  2. "So when I apply a new CSS ...we call it CSSv2...When I apply that at the Credit Classes level" - my interpretation is that you are applying a customization to the top level account
  3. "There is nothing different about the courses except they are located in different sub-folders" - my interpretation is that you are not seeing the effect of the customization in the sub-accounts

I hope I am following your progression correctly, it sounds as though you are applying your standard CSS (i.e. CSSv1) to the sub-accounts, then applying your custom CSS (i.e. CSSv2) to the top level account.

Try it the other way around.

Apply your standard CSS (i.e. CSSv1) to the top account, "Credit Classes"

Apply your custom CSS (i.e. CSSv2) to the sub-accounts

See if swapping your approach gets you what you are looking for.

View solution in original post

11 Replies
canvas_admin
Community Member

 @xcotto ​,

I just did some testing in our beta account and tweaked our main CSS file to remove some formatting and I uploaded the tweaked CSS into a sub-account (along with the theme editor/saver) and it worked fine for me.   Perhaps something is off in your code?   Would you mind sharing it here or would it make no sense to another institution?

Hi Mark,

Sorry that I've being away. but we've find a way to do it but more for the Login Branding. This Code should be in the root account.

// TEST ENV//

   if (window.location.hostname === "example.test.instructure.com") {

  // Background 

  $('body.ic-Login-Body').css('background-image', 'url(https://dl.dropboxusercontent.com/u/12834278/UI/NUC/login-background_NUC_IMG.jpg)');

  // logo

  $('.ic-Login__header__logo img').attr('src',('https://dl.dropboxusercontent.com/u/39752414/July%201st/Login%20Logo%202.fw.png));

  }

});

XCT

parisky
Community Member

I am having the same problem here..

The account hierarchy goes like this - 

Credit Classes is the main account..  under that account is:

  • 5 Subject areas subaccounts (math, language arts, natural sciences, etc).....  

under each of those subaccounts are the respective courses in that Subject area...

If I apply the (NEW as of June 28) theme for the "Credit Courses" account (at the top of the hierarchy) I do not see the changes in all the respective sub-accounts that fall under ..

For example... If I open up the sub-account Natural Sciences, shouldnʻt I see the new theme I download into the higher tier account...????

Have you applied custom styling to the sub-accounts?

If so, the sub-account styling would over-ride the parent styling.

Can you clear any sub-account styling that may or may not be there, and see if the parent styling is then honored?

Also, dumb question, but are you sure the sub-accounts are properly nested under "Credit Classes"?

I have created several custom sub-account themes, and they are working as expected, so for what it's worth, these is likely something simple going on here.

Try creating a new sub-account from scratch, under "Credit Classes", and see if the styling propagates as expected.

parisky
Community Member

Thanks Garth for the reply~

Iʻm sure itʻs something simple Smiley Wink

Iʻm attaching a photo from the admin > subaccount page for credit classes..  showing the hierarchy..
Also, regarding over-ride..  wouldnʻt applying an updated CSS file to the highest level (credit classes in my case) over-ride all the sub-accounts?  It only does the highest-level for a few of the classes within that whole account...  So I need to be clearing sub-accounts???

Iʻve left the last sub-account open (Social Sciences) to show you the sub-accounts at that level..   All the courses are placed within the subject areas at that level..  ie all Econ classes at the econ level.

I appreciate your insightful reply Garth...   You responded quicker than Canvas CS :smileyshocked:

canvas credit scheme.jpg

Perhaps the way I'm going things is a bit different from how you are doing things, it's hard to know for sure.

I will try to explain my approach.

I am constantly mindful of Canvas warnings that their updates can break any customization, and I purposely try to keep things as simple as possible so corrections will also be simple and quick.  This is a very simple example of how I have implemented custom styling between accounts and sub-accounts, hopefully it will help with your scenario.

At the top level, "Credit Classes" in your structure, I have uploaded a global CSS file containing the following CSS class definition:

.apSyllabusIcon {

content:url('https://s3.amazonaws.com/<path1>/icons/ico_syllabus.png');

width:50px;

padding-right:10px !important;

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: top left;

}

At the sub-account level, for example "Social Sciences" in your case, I have uploaded a global CSS file containing the following class definition:

.apSyllabusIcon {

content:url('https://s3.amazonaws.com/<path2>/icons/ico_syllabus.png');

width:50px;

padding-right:10px !important;

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-position: top left;

}

Both class names are exactly the same, but they reference a different source for the image.

The account references icons located in <path1>, and the sub-account references icons located in <path2>.

If I create pages in the sub-account "Humanities" and use the CSS class .apSyllabusIcon, I will get the icon from <path1>

However, if I create pages in the sub-account "Social Sciences" and reference the same CSS class .apSyllabusIcon, I will get the icon from <path2>

This allows me to create pages in course templates, using the same CSS classes, but generating different results based on the styling applied to the sub-account where the course template is used.  In other words, all of my course templates use the same CSS classes, and it is up to the sub-account to apply the appropriate styling.

I hope this makes sense.

parisky
Community Member

Totally makes sense!! 

We are only using the CSS currently to make universal CSS updates for all the courses.. All courses are currently using the same CSS configuration (we just started with Canvas so different styles for different departments is down the road).

I am using the "theme editor" to make wholesale changes to all the courses so they donʻt have to be done individually.

For example... if I load CSSv1 into each subaccount individually (at the lowest tier) on the default Canvas css..   I have 20 courses that have CSSv1 (on top of the default Canvas configuration) ..   All 20 courses are published...   all the same exact templates loaded in etc....

So when I apply a new CSS ... (letʻs say we just changed the H2 color from blue to red)...    and we call it CSSv2...

When I apply that at the Credit Classes level... at the point you see the Progress bars for each course...   I only see 4 courses getting the update of CSSv2...  I look in each subaccount that did not update...     and the CSS for the H2 did not get changed.....    

Each of those courses just has the same syllabus template loaded, each course has the CSSv1 applied at the subaccount level...  There is nothing different about the courses except they are located in different sub-folders..

I hope I am being clear in my assessment as your time is truly appreciated and I donʻt want to discount it...

Mahalo~

Alex

Here are my take-aways from your response above:

  1. "I load CSSv1 into each subaccount individually" - my interpretation is that you are applying a common css file to the sub-accounts
  2. "So when I apply a new CSS ...we call it CSSv2...When I apply that at the Credit Classes level" - my interpretation is that you are applying a customization to the top level account
  3. "There is nothing different about the courses except they are located in different sub-folders" - my interpretation is that you are not seeing the effect of the customization in the sub-accounts

I hope I am following your progression correctly, it sounds as though you are applying your standard CSS (i.e. CSSv1) to the sub-accounts, then applying your custom CSS (i.e. CSSv2) to the top level account.

Try it the other way around.

Apply your standard CSS (i.e. CSSv1) to the top account, "Credit Classes"

Apply your custom CSS (i.e. CSSv2) to the sub-accounts

See if swapping your approach gets you what you are looking for.

View solution in original post

Stefanie
Community Team
Community Team

Hello,  @xcotto ​! It's been a while since we last heard from you. Did the responses from  @garth  ultimately resolve this question? For now, I'm going to mark his most recent response as "Correct," but this does not prevent you or others from continuing to participate in the discussion, so please feel free to do so. Thanks!