1. Adventist Web Engine
  2. Solution home
  3. Tips
  4. General Website

Add support for custom themes and custom colours to the design

This may not be available under all designs at this time. Also, if the website is following designs such as ALPS, this is not providing the way to work around the accepted color themes of the APLS design. This is how it is possible to add additional colors to a website that is not using a standard design and its color themes.


How to use:


  1. Look under Website > Appearance > Colors
  2. Click on Add color button
  3. Click on Edit button
  4. Click on the link to Grayscale.design
  5. On the Grayscale design website, go to step 1
    1. Click on the menu ("...")
    2. Select "Tailwind" (as that is the CSS library we use)
  6. Go to step 2 Set your colors
    1. Add your hex code for the new color
  7. Go to step 3 Export your colors
    1. On the right side, click on "HEX"
    2. There should be a section of color codes for the new color, you need to copy these
  8. Return to the Web Engine backend
  9. Click on "Raw edit" button
  10. Between the curly brackets ("{}") you need to paste the new color codes
  11. Click on Check button
  12. Your new colors should appear in the list
  13. Give this color a name, so you can find it in the list
  14. Click on Ok button
  15. Scroll down and click on the update button


The color should now be available in the backend of the website to use.



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article