Current Lesson
Course Content
Course Content

Custom Colors in the WYSIWYG Editor

We will probably let you define your own colors at some point, but in the meantime, here is how to customize the colors we offer right now.

  1. Go to Settings from your Simplero Dashboard
  2. Select the Colors and Graphics tab
  3. Scroll down to Custom (S)CSS for the WYSIWYG editor section

  4. In this area, you can define the CSS that will be applied to text that comes from the WYSIWYG editor.

Specifically, our default stylesheet defines the below classes, which you can modify as you see fit:

.wysiwyg-font-size-smaller  { font-size: smaller;                }
.wysiwyg-font-size-larger   { font-size: larger;                 }
.wysiwyg-font-size-xx-large { font-size: xx-large;               }
.wysiwyg-font-size-x-large  { font-size: x-large;                }
.wysiwyg-font-size-large    { font-size: large;                  }
.wysiwyg-font-size-medium   { font-size: medium;                 }
.wysiwyg-font-size-small    { font-size: small;                  }
.wysiwyg-font-size-x-small  { font-size: x-small;                }
.wysiwyg-font-size-xx-small { font-size: xx-small;               }

.wysiwyg-color-default      { color: #333;                       }
.wysiwyg-color-black        { color: black;                      }
.wysiwyg-color-silver       { color: silver;                     }
.wysiwyg-color-gray         { color: gray;                       }
.wysiwyg-color-white        { color: white;                      }
.wysiwyg-color-maroon       { color: maroon;                     }
.wysiwyg-color-red          { color: red;                        }
.wysiwyg-color-purple       { color: purple;                     }
.wysiwyg-color-fuchsia      { color: fuchsia;                    }
.wysiwyg-color-green        { color: green;                      }
.wysiwyg-color-lime         { color: lime;                       }
.wysiwyg-color-olive        { color: olive;                      }
.wysiwyg-color-orange       { color: orange;                     }
.wysiwyg-color-yellow       { color: yellow;                     }
.wysiwyg-color-navy         { color: navy;                       }
.wysiwyg-color-blue         { color: blue;                       }
.wysiwyg-color-teal         { color: teal;                       }
.wysiwyg-color-aqua         { color: aqua;                       }
So that way, you can change the color "navy" to be some other color, whatever you prefer, it does not even have to be remotely navy or blue. That is up to you. Just change where it says "color: navy" to the color you want.
You now have to remember that "navy" means a different color now, but at least you get to use your preferred color.
As stated, we will add the ability for you to add your own custom brand colors in there, but for now, this will let you work around it.
Last updated 3 Dec 2018.