I’m important a course that originated as static html. I’ve built the course.xml and linked to the source html files.
Here’s where I’m stuck. The formatting is heavily reliant on the css style sheet. I uploaded it to /static within the course, and referenced it in the head of each html file. BUT edx is stripping off the entire section which breaks the css. And this also means I can’t embed the css into the source html files either. I scoured the docs, this site, web searches and found nothing so far.
How can I implement the css stylesheet? (if it’s even possible)
Thank you for replying. I have a single course to customize.
They want to customize using a CSS style sheet for the headings, indentation, and other formatting.
@fotmasta, there is this OEP about functionality that would provide course-wide HTML overrides, but its status has been “Provisional” for the last 4 years. At the moment, there are some other ways to achieve this, though:
Creating a separate site with a comprehensive theme. To do this, you would need to:
Set the course_org_filter option to display only this specific course on the new Site.
This way, the whole site will have a custom theme, but it will be available on a separate domain.
This workaround is described here. Basically, you can embed the styling directly in XBlocks on each course page. For example, you can add the following HTML XBlock to a unit to override the page’s body:
<style>
.course-wrapper {
background-color: red !important;
}
</style>
This will apply only to pages that contain these XBlocks, so other parts like the Course Outline page or Discussions will not be altered.
@fotmasta, I’ve just found that we have implemented OEP-15 and merged it into the edX master branch shortly after my last comment. You can now define custom CSS and JS resources in the course advanced settings in Studio.
If you are using Koa, then we have also internally backported this feature there. Feel free to use our opencraft-release/koa.3 branch if you’d like.
Hi, I have tried to add a custom wide CSS in the advanced settings in the Studio but I don’t see my custom CSS loaded in any page (even after restarting the platform). Do I need to do something else for my changes to take effect (e.g. clear cache)? I could not find any specific instructions anywhere about this topic (most existing articles are about large-scale theming). I use the tutor version of open edx.
Hi @gxexakis, it seems that the final implementation had a few changes that were not updated in the linked OEP yet. The most important change is that additional resources should be simply provided as a list (without defining “global_scripts”). You don’t need to restart the platform after adding them in “Advanced Settings”. Clearing the browser’s cache might be helpful in some cases, though.
You can find the list of discrepancies here or read the updated version of this document here.
Hi, I need some more guidance on loading custom CSS files. I am trying to add a Custom CSS file to my Advance Settings but I do not see the CSS implemented. I am not sure where I am having the issue.
Is there specifications/ limitations to where the file should be located? I have the custom.css file in a GIT repository.
I have mostly classes that I want to implement. Is there any limitations to this?
@bergman, partially. It is correct that this has nothing to do with the MFEs. However, XBlocks are rendered directly by the LMS, so the styling is applied to them. The learning MFE only displays the XBlocks within an iframe.
But… Doesn’t xBlock’s iframe render its own fragment html (+css, +js) piece exclusively?
Those custom CSS/JS are included into parental legacy page. They never appear in parental MFE page, I think?
In the legacy experience, XBlocks were rendered directly on the same page.
In the Learning MFE, they are still rendered by the LMS, so they must be displayed in an iframe. Therefore, you can apply the course-wide styles to XBlocks, but not to the rest of the page.
Can we place the CSS file into the 'File & Uploads" of one course and use that as a ‘global CSS’ file host for many courses? So using your example we would add the files web path:
Is this the best solution to have one place for a global CSS file for many courses? OR can we host the CSS file on Github instead? We are looking for the solution most unlikely to go wrong.
We are currently adding a RAW HTML component on every page with a ‘link stylesheet=’ to the Advanced Settings. We have to do this on every page, which isn’t a problem but we just want to know what is the most robust solution before we build out lots of classes.
