Page History
Besides using the already available default and gray themes, with the release v5.5.8 (March 26, 2020) we added an option for our customers to create a custom theme for WProofreader. You will be able to overwrite the default styles and adjust the look and feel of WProofreader to the style of your product.
1. Add theme option to the config and specify custom as a value.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script>
window.WEBSPELLCHECKER_CONFIG = {
...
theme: 'custom',
...
}
</script> |
2. Create you custom CSS styles to overwrite the default theme of WProofreader.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<style>
.wsc-theme-custom .wsc-badge__label-button {
background-color: blue !important;
}
</style> |
Examples of current styles for main UI elements
Below are examples of current CSS styles for UI elements that you might want to overwrite with your custom styles.
Spinner inside badge
| Code Block | ||||
|---|---|---|---|---|
| ||||
.wsc-badge--checking .wsc-badge__label-button {
...
background-image: url(svg/spinner.svg) !important;
...
} |
Underlines for spelling and grammar type suggestions
| Code Block | ||||
|---|---|---|---|---|
| ||||
.wsc-spelling-problem {
...
border-bottom: 2px solid rgba(234,28,35,.65)!important;
...
}
.wsc-grammar-problem {
...
border-bottom: 2px solid rgba(0,98,231,.65)!important;
...
} |
Hovered state of spelling and grammar type suggestions
| Code Block | ||||
|---|---|---|---|---|
| ||||
.wsc-spelling-problem.wsc-problem-text--active {
background-color: rgba(234,28,35,.15);
}
.wsc-grammar-problem.wsc-problem-text--active {
background-color: rgba(0,98,231,.15);
} |
Badge pulsation animation
| Code Block | ||||
|---|---|---|---|---|
| ||||
.wsc-theme-customerThemeName.wsc-badge--pulsing:not(.wsc-badge--small):after {
-webkit-box-shadow: inset 0px 0px 8px 0 green;
-moz-box-shadow: inset 0px 0px 8px 0 green;
box-shadow: inset 0px 0px 8px 0 green;
} |
