Skip to content

Commit

Permalink
fix: improve grammar, points, and add image for dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@hinakhadim
hinakhadim committed Jun 7, 2024
1 parent 269e871 commit aa0b231
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 50 deletions.
107 changes: 57 additions & 50 deletions contents/tutorindigo.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,30 @@ What is a theme?

A theme is a collection of files and settings that determine the visual appearance and user interface of the site. It includes stylesheets, templates, and sometimes scripts that together define the colors, fonts, layouts, and overall aesthetic of the platform. Themes allow us to customize the look and feel of our ed tech platform to match our brand identity and provide a cohesive user experience.

So why do we need to install theme? Installing a theme for the platform allows us to improve user experience and customize it according to our brand. The theme allows us to align the platform’s visuals with our organization’s brand, helping us maintain a professional and trustworthy look.
Themes like Indigo are designed to enhance user experience by making it easier to navigate through the platform and engage with course content. In addition to this, themes provide a consistent look and feel across all pages and components of your platform, which is important for user familiarity and comfort.
So why do we need to install a theme? Installing a theme for the platform allows us to improve the user experience and customize it according to our brand. A theme allows us to align the platform’s visuals with our organization’s brand, helping us maintain a professional and trustworthy look.
Themes like `Indigo <https://github.com/overhangio/tutor-indigo>`_ are designed to enhance user experience by making it easier to navigate through the platform and engage with course content. In addition to this, themes provide a consistent look and feel across all pages and components of your platform, which is important for user familiarity and comfort.

Importance of Indigo in Open edX
================================
What is Indigo
==============

`Indigo <https://github.com/overhangio/tutor-indigo>`_ is a specially designed theme for Open edX that brings a modern, clean, and intuitive interface to the Open edX platform.
Firstly, Indigo offers a sleek and responsive design for all devices to enhance accessibility for all users. Secondly, Indigo is built with customization in mind, allowing organizations to easily tweak the appearance to better match their branding needs.
The goal for Indigo has been to engage learners with welcoming messaging and intuitive navigation across the platform. Furthermore, since Indigo is a widely adopted theme within the Open edX community, it benefits from continuous improvements and support from the community, ensuring it stays up-to-date with the latest releases.

Firstly, Indigo offers a sleek and responsive design for all devices to enhance accessibility for all users.

Secondly, Indigo is built with customization in mind, allowing organizations to easily tweak the appearance to better match their branding needs. The goal for Indigo has been to engage learners with welcoming messaging and intuitive navigation across the platform.

Finally, since Indigo is a widely adopted theme within the Open edX community, it benefits from continuous improvements and support from the community, ensuring it stays up-to-date with the latest releases.

What is a plugin?
=================

Plugins are software that can add new features, improve existing ones, or customize the behavior of the platform to better suit specific needs. Tutor plugins are the best way to modify the behavior of Tutor and Open edX. A `Tutor plugin <http://academy.overhang.io/academy/resource/tutorplugins/>`_ is a Python module that will be loaded at runtime. This Python module will make use of the Tutor plugin API to change how Tutor works.
Tutor plugins are used for changing the Open edX LMS configuration settings, adding a new micro frontend to the platform, setting up a new theme, running a new application or installing custom Python requirements in the docker image. Essentially, plugins can allow organizations to tailor the learning experience and address the organizations’ diverse needs.
Plugins are pieces of software that can add new features, improve existing ones, or customize the behavior of the platform to better suit specific needs. Tutor plugins are the best way to modify the behavior of Tutor and Open edX. A `Tutor plugin <http://academy.overhang.io/academy/resource/tutorplugins/>`_ is a Python module that will be loaded at runtime. This Python module will make use of the Tutor plugin API to change how Tutor works.

Tutor Indigo
============
Tutor plugins are used, for instance: to change the Open edX LMS configuration settings, add a new micro frontend to the platform, set up a new theme, run a new application, or install custom Python requirements in the Docker image, etc. Essentially, plugins can allow organizations to tailor the learning experience and address the organizations’ diverse needs.

Indigo Installation
===================

`Tutor Indigo <https://github.com/overhangio/tutor-indigo?tab=readme-ov-file#indigo-a-cool-blue-theme-for-open-edx>`_ is a theme designed for use with Tutor, to give a new look to Openedx platform.
To install and activate the Indigo plugin, use the following commands::

tutor plugins install indigo
Expand All @@ -38,17 +42,19 @@ By default when Tutor is installed, the Indigo theme will be installed along it
Customization
=============

To establish a professional and trustworthy presence on your Open edX platform, it is essential to incorporate your own branding assets. This will ensure your site stands out and is easily recognizable, therefore, creating a seamless experience for your learners. It will reinforce your brand identity and will connect with your audience better.
Furthermore, Customization options include modifying settings such as the welcome message, primary color, and footer navigation links. With the use of primary and secondary colors, the Indigo theme has highlighted Calls To Action (CTAs) and updated buttons across the platform to drive user engagement. The theme allows you to replace these with your brand colors if you desire to build a coherent brand image for your platform.
To establish a professional and trustworthy presence on your Open edX platform, it is essential to incorporate your branding assets. This will ensure your site stands out and is easily recognizable, therefore, creating a seamless experience for your learners. It will reinforce your brand identity and will connect with your audience better.

Customization options include modifying settings such as the welcome message, primary color, and footer navigation links. With the use of primary and secondary colors, the Indigo theme has highlighted Calls To Action (CTAs) and updated buttons across the platform to drive user engagement. The theme allows you to replace these with your brand colors if you desire to build a coherent brand image for your platform.

Similarly, there are placeholders for you to add your organization’s information through the footer navigation links. You can even direct your user to your organization’s privacy policy and terms and conditions.

These settings can be adjusted using the ``tutor config save --set INDIGO_*=`` command. The ``INDIGO_*`` means to set the configuration variables with INDIGO_ prefix as below.
These settings can be adjusted using the ``tutor config save --set INDIGO_*=`` command. The ``INDIGO_*`` means to set the configuration variables with ``INDIGO_`` prefix as below.

1. For setting purple as primary color for platform, you need to run::
1. To set purple as primary color for platform, you need to run::

tutor config save --set INDIGO_PRIMARY_COLOR="#A020F0"

2. For updating welcome message, following should be run::
2. To update the platform welcome message, run::

tutor config save --set INDIGO_WELCOME_MESSAGE="The best place to learn online"

Expand All @@ -63,15 +69,28 @@ These settings can be adjusted using the ``tutor config save --set INDIGO_*=`` c
:width: 800
:alt: Welcome message, primary color and footer navigation links can be updated through Tutor Indigo

For deeper customization, the plugin can serve as a foundation for creating custom themes. Forking the repository and making modifications allows for tailored designs. Changes can be viewed instantly in development mode using tutor dev commands. Here's how you can customize using Tutor Indigo.
For deeper customization, the plugin can serve as a foundation for creating custom themes. Forking the repository and making modifications allows for tailored designs. Changes can be viewed instantly in development mode using ``tutor dev`` commands. Here's how you can customize using Tutor Indigo.

How to make changes to the Indigo plugin
----------------------------------------

To apply changes to a dedicated subsection, one must have to first clone the Tutor Indigo by running ``git clone https://github.com/overhangio/tutor-indigo.git`` and make changes in it. To reflect the changes, rebuild the "openedx" Docker image and restart containers::

cd tutor-indigo
pip install -e . # install forked tutor-indigo
tutor config save
tutor images build openedx # rebuild Open edX image
tutor images build mfe # rebuild MFE image if the changes are related to MFEs
tutor local start -d


Logos and Images Alterations
----------------------------

Changing the platform logo and favicon will reinforce your brand identity and ensure user recognition. The platform logo appears in the header, while the favicon is the small icon in the browser tab. Customizing these elements creates a professional and consistent look across your Open edX platform. However, the theme currently offers a placeholder logo that can easily be replaced later when your organization wishes to transition to a more customized learning experience.
To use your own logo and images, following steps need to be done:
To use your logo and images, the following steps need to be done:

- Clone the Tutor Indigo by running the command ``git clone https://github.com/overhangio/tutor-indigo.git``
- Go to ``tutorindigo/templates/indigo/lms/static/images`` for replacing images for LMS and ``tutorindigo/templates/indigo/cms/static/images`` for replacing images for CMS
- Remove the already logo and platform image from the folders mentioned in previous step. Add your logo and platform images in these folders. Ensure that your image name remains the same as the previous images. For example, if you want to change ``tutor-logo.png``, you can add your logo and rename it to ``tutor-logo.png``.
- Similar to above steps, you can update all images including favicon.ico
Expand All @@ -83,11 +102,10 @@ To use your own logo and images, following steps need to be done:
Font Modifications
------------------

There are two ways to update font family of LMS. One is to use your own font files and second is to use google fonts url. Follow the below steps to update font of LMS:
There are two ways to update the font family of LMS. One is to use your font files and the second is to use google fonts url. Follow the below steps to update font of LMS:

- Clone the Tutor Indigo by running the command ``git clone https://github.com/overhangio/tutor-indigo.git``
- Download your font files and move them to ``tutorindigo/templates/indigo/lms/static/fonts`` folder. For example, you want to change LMS font family to "Crimson". Download your files and move to the ``tutorindigo/templates/indigo/lms/static/fonts`` folder
- Now, setup their path in ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_fonts.scss`` file. If the file is not present, then create it and add the font files path to it. In case of Crimson font, you need to add this:
- Download your font files and move them to ``tutorindigo/templates/indigo/lms/static/fonts`` folder. For example, to change the LMS default font family to `Crimson <https://fonts.google.com/specimen/Crimson+Text>`__, download the ``CrimsonText*.ttf`` files and move them to the ``tutorindigo/templates/indigo/lms/static/fonts`` folder
- Now, setup the font file paths in ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_fonts.scss`` file. If the file is not present, then create it and add the font files path to it. In case of Crimson font, you need to add this:

.. code-block:: sass
Expand Down Expand Up @@ -135,21 +153,17 @@ There are two ways to update font family of LMS. One is to use your own font fil
Here, you have to ensure that ``font-weight`` and ``font-style`` should match with the respective files. Like, ``fonts/CrimsonText-Bold.ttf`` has font-weight 700 and font-style normal.

- If you don't want to add font files and use Google font URL. Then, add the below url in the ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_fonts.scss`` file (for `Crimson font family <https://fonts.google.com/specimen/Crimson+Text>`_)::

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

- After that, In ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss`` file, add the below line for loading the fonts in LMS platform::

@import "fonts";

- Lastly, Set font family in ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss`` file as below::
- Lastly, set font family in ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss`` file as below::

$font-family-title: 'Crimson', sans-serif;;
$serif: Crimson;
$f-sans-serif: Crimson, 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;

The above steps need to be followed for CMS. But CMS requires one more step in addition to above steps for changing font family.
The above steps need to be followed for CMS. But CMS requires one more step in addition to the above steps for changing the font family.

- Include the below line in ``tutor-indigo/tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables-v1.scss`` file after ``$static-path`` definition::

Expand All @@ -159,9 +173,13 @@ The above steps need to be followed for CMS. But CMS requires one more step in a

@import "fonts"; /* add this line */

......
...

After doing so, Run ``tutor config save`` & ``tutor local stop``. Run ``tutor images build openedx`` to build the Open edX image with the updated images. Finally, start the platform using ``tutor local start -d``. You can successfully view the updated font family using browser inspection tool as in the below image.
After making the above changes, run::
tutor config save # update tutor environment
tutor images build openedx # rebuild Docker image
tutor local start -d # apply changes

.. list-table:: Font Updations Example
:widths: 50 50
Expand All @@ -178,10 +196,7 @@ After doing so, Run ``tutor config save`` & ``tutor local stop``. Run ``tutor i
Sass Styles Adjustments
-----------------------

Customize styles in ``tutorindigo/templates/indigo/lms/static/sass`` for LMS and ``tutorindigo/templates/indigo/cms/static/sass`` for CMS. Note that ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss`` file is used for adding and overriding styles. For Example, To change the background-color of body, follow the below steps:

- Clone the Tutor Indigo by running the command ``git clone https://github.com/overhangio/tutor-indigo.git``
- Add your styles in the ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss``
Customize styles in ``tutorindigo/templates/indigo/lms/static/sass`` for LMS and ``tutorindigo/templates/indigo/cms/static/sass`` for CMS. Note that ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss`` file is used for adding and overriding styles. For Example, to change the background-color of body, add your styles in the ``tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss`` as below.

.. code-block:: sass
Expand All @@ -190,7 +205,6 @@ Customize styles in ``tutorindigo/templates/indigo/lms/static/sass`` for LMS and
background-color: #fff;
}
- Install the updated Tutor Indigo Plugin
Updating HTML templates
Expand All @@ -200,9 +214,7 @@ Add HTML files in ``tutorindigo/templates/indigo/lms/templates``, ensuring folde

For example, You want to add detail of Open edX in footer. You have to follow the below points:

- Clone the Tutor Indigo by running the command ``git clone https://github.com/overhangio/tutor-indigo.git``
- Search the template in `edx-platform/lms/templates <https://github.com/openedx/edx-platform/tree/master/lms/templates>`_ which is used for footer rendering.
- The footer template exists at ``edx-platform/lms/templates/footer.html`` in edx-platform.
- Search the template in `edx-platform/lms/templates <https://github.com/openedx/edx-platform/tree/master/lms/templates>`_ which is used for footer rendering. You will find that the footer template exists at ``edx-platform/lms/templates/footer.html`` in edx-platform.
- You have to copy the file and paste in Tutor Indigo Plugin at ``tutor-indigo/tutorindigo/templates/indigo/lms/templates/footer.html``
- Make your changes and install the updated plugin for reflecting the changes.

Expand All @@ -224,22 +236,17 @@ Activating Dark theme

You can now give users a more familiar experience by enabling the dark theme. Dark themes are increasingly popular for their aesthetic appeal and reduced eye strain, especially in low-light environments. By offering a dark theme, you cater to user preferences and enhance their overall experience on your platform.

To enable the dark theme using Tutor Indigo, set the configuration variable by running the command ``tutor config save --set INDIGO_ENABLE_DARK_THEME=True``. Then follow the "How to deploy Customizations to Production" section at the last of this guide. This simple customization can make a significant difference in user satisfaction and engagement.
To enable the dark theme using Tutor Indigo, set the configuration variable by running the command ``tutor config save --set INDIGO_ENABLE_DARK_THEME=True``. This simple customization can make a significant difference in user satisfaction and engagement.

How to deploy Customizations to Production
==========================================

To deploy the above customizations to production, rebuild the "openedx" Docker image and restart containers::
.. image:: /academy/static/images/tutorindigo/lms_dark_theme.png
:width: 800
:alt: Open edX LMS Dark theme Example

## assuming updated tutor-indigo is installed
tutor config save
tutor images build openedx
tutor images build mfe
tutor local start -d

.. image:: /academy/static/images/tutorindigo/learner_dashboard_mfe_dark_theme.png
:width: 800
:alt: Open edX Learner Dashboard MFE Dark theme Example

Tutor Indigo offers a comprehensive toolkit for enhancing and personalizing the Open edX platform. By following the above steps, you can tailor the platform's appearance to better suit your organization's needs and branding requirements.

Tutor Indigo offers a comprehensive toolkit for enhancing and personalizing the Open edX platform. By doing the above customizations, you can tailor the platform's appearance to better suit your organization's needs and branding requirements.
Binary file modified layout/static/images/tutorindigo/lms_dark_theme.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit aa0b231

Please sign in to comment.