How to customize Edx Theme in Bitnami Distribution

  • Once you setup the bitnami Edx distribution, you can ssh into your machine and go to themes folder:
    
    cd ~/apps/edx/themes/
    
    
  • Clone your theme git repository:

    
    sudo git clone https://github.com/Stanford-Online/edx-theme.git stanford
    
    
  • Make sure the directory name is same as the name of the theme. Also rename the .scss file to have the same name as the theme:

    
    cd ~/apps/edx/themes/stanford/static/sass
    sudo mv _default.scss _stanford.scss
    
    
  • You may have to edit the _stanford.scss to replace all themes/default instances to themes/standford
  • Edit the lms environment options configuration file:

    
    cd ~/apps/edx/conf
    nano lms.env.json
    
    
  • Update the configuration values as shown below:

    
    "USE_CUSTOM_THEME": true
    "THEME_NAME": "stanford"
    
    
  • Rebuild the LMS platform assets:

    
    cd ~/apps/edx/edx-platform
    sudo SERVICE_VARIANT=lms ./bin/paver.edxapp update_assets lms --settings=aws
    
    
  • Restart the Apache server:

    
    sudo /opt/bitnami/ctlscript.sh restart
    
    

Few other tips can also be helpful for debugging. Such as, if you are using Bitnami Open Edx as a virtual machine on your laptop and want to access the VM’s MySQL Database from your host machine, then you can enable it with the following command:

$ /opt/bitnami/mysql/bin/mysql -u root -p -e "grant all privileges on *.* to 'root'@'%' identified by 'your_root_password' with grant option";

The default password is bitnami for the root user.

And change the bind_address configuration option (in the /opt/bitnami/mysql/my.ini file) as shown below:

bind-address = 0.0.0.0

Comments

  • Randy

    logo and tab icon how do i change them

  • My-Classes

    @Randy,

    You should be able to change the logo by using the theme-header.html file in your theme/templates directory.

    For example, if you have a theme named ‘customTheme’ and logo named ‘mylogo.png’ then you can write the below code inside apps/edx/themes/customTheme/templates/theme-header.html file in the block name="navigation_logo":

    <img src="${static.url('themes/customTheme/images/mylogo.png')}" height="50" alt="Home Page" />

    Wish you the best.
    http://my-classes.com

  • Randy

    thank you so much worked lovely
    was hoping to change the browser tab icon also, how do i go about changing that one?

  • My-Classes

    You can either overwrite the apps/edx/themes/customTheme/static/images/favicon.ico file with your own icon (and rebuild the assets).

    Or, if your theme has a template file named /customTheme/templates/main_django.html then inside that file you should typically find a line that specifies the favicon, as below:

    <link rel="icon" type="image/x-icon" href="{% static "images/favicon.ico" %}" />
    

    You can adjust that line and rebuild the assets.

    Wish you the best
    http://my-classes.com

  • Randy

    Thank for all the help my platform is running nicely, but i have another question, is’t possible to have a slideshow as the banner i.e(replace sunset.png with a slideshow)

  • My-Classes

    Yes. Theoretically, you should be able to replace the banner code with your own code (for the slideshow), since its just HTML and rebuild the assets. Pack the js files the appropriate directories and it should work fine. We did not try it ourselves, though. If you get success, please share it here with others.

    Wish you the best,
    http://my-classes.com

  • Randy

    Hi again, i’ve came across another problem with the platform, once registered and all i navigate to the courses page and the stanford seal png doesn’t show and when i change it to my own png also doesn’t show.. Also im trying to add some links to other websites on the registration sidebar but the smallest of changes in the registration_sidebar.html makes the registration page not work at all.
    last i just have a question, is’t possible to add extra fields to the registration page such as Mobile number?

    • My-Classes

      Thanks. It may require checking your installation. Edx Groups is a good place to find more help on this. Or if you need some one to setup your Edx platform (on commercial basis), would be happy to provide some contacts.

      Wish you the best
      http://my-classes.com/