CSS Customization

When translating your website, the layout of the text can affect your overall design. You can modify how your text looks for each translated language from your WOVN dashboard by using the CSS customization feature.

💡 Make your font bigger or smaller, or change the color of your text to take localization a step further.

With Text Editor

  1. Select your project to go to its Page list.
  2. Click on “CSS” at the top of the translation boxes.
  3. Add the CSS code in the text area. Choose “THIS PAGE” to apply CSS customization to that page only and “ALL PAGES” to apply it to all.
  4. If you are translating into several languages, note that CSS customization will apply to one language individually.

With Visual Editor

  1. Select your project to go to its Page list.
  2. Select Visual Editor.
  3. Click on “CSS” at the top of the translations boxes.
  4. Add the CSS code in the text area. Choose “THIS PAGE” to apply CSS customization to that page only and “ALL PAGES” to apply it to all.

Code Samples

To change the color

.red {
color: red;
}

.blue {
color: blue;
}

.hex-color {
color: # 33ccc;
}

.rgb-color {
color: rgb (45, 65, 45);
}

To change the font size

.big-words {
font – size: 100px;
}

.small-words {
font-size: 5px;
}

To change the background color

.red-background {
background-color: red;
}

To change the header

.header {
background-color: #ffffff;
border: solid 1px gray;
vertical-align: middle;
display: inline-block;
margin: 0 16 px 0 0;
border-radius: 3px;
text-align: center;
cursor: pointer;
font-size: 0;
height: 40px;
width: 40px;
}