I Need Guidance on Advanced Theming Customizations in Open edX

Development Design
1

Hello everyone, :wave:

I am currently working on a project involving Open edX and I’ve run into a challenge that I’m hoping someone here might be able to help with.

I am using Open edX’s default theming for my platform but I’m looking to make some customizations to better fit our organization’s branding. Specifically, I want to modify the appearance of the courseware pages and the course navigation to align with our visual identity. My goal is to adjust the colors, fonts, and possibly the layout of certain elements, such as the course blocks and navigation menus.

I also check this: https://discuss.openedx.org/t/getting-latest-patches-from-open-edx-after-making-customization-on-openedmendix But I have not found any solution. Could anyone guide me about this? While I have found some documentation on basic theming and CSS modifications, I’m unsure how to approach more in-depth changes. For instance, I’d like to understand the best practices for overriding default styles without breaking functionality or making updates cumbersome in the future. Are there specific files or directories within the Open edX theme that I should focus on? Additionally, are there any recommended tools or approaches for testing these customizations to ensure compatibility across different devices and screen sizes?

Thanks in advance!

Respected community member! :smiling_face_with_three_hearts:

2

Hey!

Are you trying to make these changes in the MFE or on the base HTML pages?
If it is just the base pages, you may fork the themes directory and change any html files and CSS variables as you see fit then pull it and set it in the env folder. (I am using tutor which has this process documented pretty well)

3

Hi herepax183,
To customize the HTML you can use the files that are in:

env/build/openedx/themes/theme/lms/static/sass/partials/lms/theme/
_extras.scss
_fonts.scss
_variables.scss

And to customize the MFE you can use the files that are inside each one of the microfontend to test them (for example this is the one for account) in:

/tutor/frontend-app-account/node_modules/@edx/brand/paragon/
_overrides.scss
_fonts.scss
_variables.scss

and then you upload them all combined (the ones for the MFE) in:

/templates/brand-openedx/paragon 
_overrides.scss 
_fonts.scss 
_variables.scss
1 Like