Date: Fri, 29 Mar 2024 11:42:10 +0200 (EET) Message-ID: <1135032706.666.1711705330740@ip-172-30-3-56.ec2.internal> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_665_1012749053.1711705330739" ------=_Part_665_1012749053.1711705330739 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
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 adj= ust the look and feel of WProofreader to the style of your product.
1. Add theme option to the config and specify
<script> window.WEBSPELLCHECKER_CONFIG =3D { ... theme: 'custom', ... } </script>
2. Create you custom CSS styles to overwrite the default theme of WProof= reader.
<style> .wsc-theme-custom .wsc-badge__label-button { background-color: blue !important; } </style>
Below are examples of current CSS styles for UI elements that you might = want to overwrite with your custom styles.
.wsc-badge--checki= ng .wsc-badge__label-button { ... background-image: url(svg/spinner.svg) !important; ... }
.wsc-spelling-prob= lem { ... border-bottom: 2px solid rgba(234,28,35,.65)!important; ... } .wsc-grammar-problem { ... border-bottom: 2px solid rgba(0,98,231,.65)!important; ... }
.wsc-spelling-prob= lem.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); }
.wsc-theme-custome= rThemeName.wsc-badge--pulsing:not(.wsc-badge--small):after { =09-webkit-box-shadow: inset 0px 0px 8px 0 green; =09-moz-box-shadow: inset 0px 0px 8px 0 green; =09box-shadow: inset 0px 0px 8px 0 green; }