Design and theming - Appsembler

Help & How-to

Your comprehensive knowledge base for Open edX, Tahoe LMS, and Virtual Labs. Dive into in-depth documentation, tutorials, troubleshooting guides, and best practices to help with your integration of Appsembler's products.

Design and theming

Logo

Preferably the customer provides a design style guide that outlines the preferred logo, fonts and styles to be used on the website.

  • Logo: dimensions 200px X 50px
  • Favion (served up by nginx)
  • Banner image that goes on the home page, and the course listing page

Theme

Set the following variables in server-vars.yml:

edxapp_use_custom_theme: true 
edxapp_theme_name
edxapp_theme_source_repo
edxapp_theme_version

Caveats:

  • edxapp_theme_version is the name of the git branch containing the modifications
  • edxapp_theme_name must be the same as the .scss file in the static static/sass/ folder, prefixed with an underscore 
    • e.g. edxapp_theme_name: appsembler
    • then the file: /static/sass/_appsembler.scss contains all css modifications
  • the registration/password_reset_email.html template makes reference to “edX,” so it should be overridden

Header/footer

The elements at the top of the page and the bottom of the page. The header usually contains the logo, navigation bar, login/register links.

The footer usually containers links back to the main website such as copyright and terms of service, contact us, help, etc.

Social Media Icons

On the course info page, there are icons to share the course on Twitter and Facebook. We need to obtain these URLs from the customer and add them to server-vars.yml.

EDXAPP_PLATFORM_TWITTER_ACCOUNT: '@YourPlatformTwitterAccount'
EDXAPP_PLATFORM_FACEBOOK_ACCOUNT: 'http://www.facebook.com/YourPlatformFacebookAccount'
EDXAPP_PLATFORM_TWITTER_URL: "https://twitter.com/YourPlatformTwitterAccount"
EDXAPP_PLATFORM_MEETUP_URL: "http://www.meetup.com/YourMeetup"
EDXAPP_PLATFORM_LINKEDIN_URL: "http://www.linkedin.com/company/YourPlatform"
EDXAPP_PLATFORM_GOOGLE_PLUS_URL: "https://plus.google.com/YourGooglePlusAccount/"