DEV Community

Cover image for Open edX theme powered by TailwindCSS
Cubite
Cubite

Posted on • Updated on

Open edX theme powered by TailwindCSS

Untitled (2)
Live Demo: https://lms.demo.cubite.io

Introduction

what is open edx ?

Open edX is an open-source learning management system used by many universities and organizations worldwide.

Why should I use Tailwindcss for open edx theming?

Tailwindcss is a utility-first CSS framework. New to Utility-First CSS? In short, it makes writing CSS more fun by moving things like color and spacing into function arguments rather than in separate classes. It also provides some nice features like built-in theme support, and default values for properties that change based on the element type.

TailwindCSS brings following advantages to your frontend:

  • Designing with constraints. Using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs.
  • Responsive design. You can’t use media queries in inline styles, but you can use Tailwind’s responsive utilities to build fully responsive interfaces easily.
  • Hover, focus, and other states. Inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes.
  • Easier to Maintain: Maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success.

How to use our Theme?

First clone the theme repo in your server

mkdir /edx-themes
git clone https://github.com/cubitetech/theme -b lilac cubite-theme
Enter fullscreen mode Exit fullscreen mode

Change server configuration

In /edx/etc/lms.yml change the following variables to:

ENABLE_COMPREHENSIVE_THEMING: true
DEFAULT_SITE_THEME: cubite-theme
COMPREHENSIVE_THEME_DIRS:
- /edx-themes
Enter fullscreen mode Exit fullscreen mode

Compile frontend assets

In your open edx server run:

sudo -H -u edxapp bash
source /edx/app/edxapp/edxapp_env
cd /edx/app/edxapp/edx-platform
paver update_assets lms --settings=production
python manage.py lms --settings=production collectstatic --noinput

Enter fullscreen mode Exit fullscreen mode

Restart services

After the compiling is finished successfully restart open edx services

sudo /edx/bin/supervisorctl restart all
Enter fullscreen mode Exit fullscreen mode

Don't miss the news

Feel free to visit https://fabulous-trailblazer-4633.ck.page/b77d1d8054 and subscribe to stay up to date with the latest news and releases.

If you need any help contact us at hello@cubite.io

Top comments (20)

Collapse
 
ogezie profile image
ogezie

I have installed open edx nutmeg using tutor on my VPS. How can I install this theme on it?

Collapse
 
ogezie profile image
ogezie

Finally, I have installed the cubite theme on my open edx nutmeg, but I can't edit the theme pages (footer, body, logo etc.). Please, someone should point me in the right direction on how to edit. I have actually done some editing of the files, I don't know how to effect the changes. I have tried using the following commands but all failed:

$ tutor local start -d or tutor local init

Please help. I love this theme and really want to use it on my site. It's far better than indigo.

Collapse
 
jacksonkitundu profile image
Jackson Kitundu

Hello, Can you tell me how you installed the cubite theme on nutmeg i cant compile the assets.

Thread Thread
 
ogezie profile image
Info Comment hidden by post author - thread only accessible via permalink
ogezie

Download this howto that I found on the net. I have modified it slightly as regards my installation. objectstorage.eu-frankfurt-1.oracl...

 
jacksonkitundu profile image
Jackson Kitundu

Thank you so much. I will give it a try.

Collapse
 
kktau profile image
kktau

hey i would really appreciate your help, tried to download the object storage and nothing came through

Thread Thread
 
ogezie profile image
ogezie

Hi, could you elaborate more?

Thread Thread
 
kktau profile image
kktau

The link you posted above is no longer available could you repost it or send a link to your GitHub that you running this on because I would love to use it for my open edx powered by tutor

Collapse
 
ductong169z profile image
Kazima

I had problem when run paver update_assets lms --settings=production
and sudo /edx/bin/supervisorctl restart all.
the changed template had not apply to my edx untill i reboot server.
please help me

Collapse
 
corpcubite profile image
Cubite • Edited

Please paste the paver output here. It can be permission issue, make sure edxapp user has access to the directory maybe doing something like can solve it.

sudo chmod -R 777 /edx-themes
Enter fullscreen mode Exit fullscreen mode

change /edx-themes to your theme directory if you changed it.

Collapse
 
ductong169z profile image
Kazima

yes. i run paver in ../edx-platform.
it run ok.
after that. i restart services with "sudo /edx/bin/supervisorctl restart all"
but nothing is change. I must reboot server to get a change

Thread Thread
 
corpcubite profile image
Cubite

I added another command python manage.py lms --settings=production collectstatic --noinput to the doc. Let me know if it helped.
I'm going to record a video and will add it to this doc.

Thread Thread
 
ductong169z profile image
Kazima

tks u. it worked <3

Thread Thread
 
corpcubite profile image
Cubite

Glad to hear it. Great work @ductong169z

Collapse
 
blueneel05 profile image
Nilkamal Gotarne

if I have to update anything, how to do it ? i tried changing the index file and recompiled assets but it is not reflecting.

Collapse
 
corpcubite profile image
Cubite

Hi,
Do you see the theme applied to your site (without the change) ? If not make sure you set lms.yml variables as in this article.
Also check the update_assets command output to see there is no error during the compiling the assets.
If you still need help let me know so we can jump in a call to see what is going on in your instance.

Collapse
 
ductong169z profile image
Kazima

hi, can you tell me where you place mkdir /edx-themes.
I try paver update_assets lms --settings=production
it get error with COMPREHENSIVE_THEME_DIRS

Collapse
 
corpcubite profile image
Cubite

Hi
/edx-themes is the root directory. You can place the theme folder where you want but you have to change the COMPREHENSIVE_THEME_DIRS variable accordingly to the path where you put the folder

Collapse
 
ductong169z profile image
Kazima

I applied success. And when I want to custom it.
Should I make change in /themes or in /lms/template.
thanks

Collapse
 
polarkaung profile image
PolarKaung • Edited

Hello, i am having "There has been a 500 error on the test1_edx servers " error when i enroll in demo course and loading the dashboard. That problem doesn't appear on default theme. Am I doing anything wrong? I am using tutor for installation of open-edx tho. So i add the theme folder into the corresponding theme folder in env, build the openedx image, run with 'tutor local quickstart' and then set the theme with 'tutor local settheme cubite-theme"

Some comments have been hidden by the post's author - find out more