Is there a way of having a unique theme for certain courses?

Charlotte.Maling14
Charlotte.Maling14 Posts: 5 ✭
in Development
I would like to have some courses with black background and white text on all pages without changing our default theme (light background with dark text), to make them more accessible for certain users. Is this possible ? I've only managed to do it for the navbar / headings so far.
Tagged:
· Share on FacebookShare on Twitter

Answers

  • Samantha.Baran78
    Samantha.Baran78 Posts: 6 ASC Beta Tester
    edited November 2022

    Hi @Charlotte Maling​.

     

    Currently, there is no way to use the HTML editor in Brightspace LE to put white text on a black background. However, you can suggest this idea as part of D2L's PIE so that it could be implemented in the future. You can access the PIE through the Learning Center link provided in the linked article.

     

    For now, my recommendation is to create or use an HTML template for your course content that has a black background with light text.

     

    Have a great day!

    · Share on FacebookShare on Twitter
  • Charlotte.Maling14
    Charlotte.Maling14 Posts: 5 ✭
    edited November 2022

    Thanks @Samantha Baran​  - I'll suggest this.

     

    You mentioned using a HTML template with light text on black. This sounds good, but please could you help me with how to do that without changing the template for all our other courses?

    · Share on FacebookShare on Twitter
  • Jennifer.Wagner24
    Jennifer.Wagner24 Posts: 49 ✭
    edited November 2022

    @Charlotte Maling​ 

    Paste the following code in a text editor (use Notepad, not Word), and save it as darkmode.css. Then upload it to Manage Files.

     

     body { background-color: black; color: white; }

     a:link { color: #17A1D3; }

     a:visited { color: #D668F8; }

     a:active { color: #FF6171; }

     

    Paste this code between the opening <head> and closing </head> tags in the source code editor </> of every HTML page that you want to have a black background.

     

    <link rel="stylesheet" href="darkmode.css">

     

    If you want to change the colors, you will only need to update the code in the CSS file and not on every HTML page.

     

    The colors I chose for the different states of links pass contrast ratio requirements (see WebAIM for more info).

    · Share on FacebookShare on Twitter
  • Charlotte.Maling14
    Charlotte.Maling14 Posts: 5 ✭
    edited November 2022

    Thanks @Jennifer Wagner​ - that's exactly what I needed! Is there a way to do this for the quizzes as well?

    · Share on FacebookShare on Twitter

Categories