How to format and style text elements on widgets

1. General instructions on the CSS editor

❗Make sure to read the following instructions carefully if you are not familiar with CSS code. Please note that the recommendations below apply to all the text styling methods in this guide.

1. Add the code snippets you will find in this guide to the CSS editor of your widget. To get started, open the widget in editing mode and find the CSS editor on the Design tab:

2. You can add the code snippets provided in the upcoming sections anywhere in the CSS editor, but make sure not to interrupt any existing lines of code there. To be safe, we recommend adding the new CSS code at the very end.

3. If you see a red X on the side, the CSS button is also red, and the platform doesn’t let you save the changes, something is wrong with the code you’ve added. Make sure you have not left out any part of it or added any characters by mistake.

4. Similarly, when you copy and paste the code from this guide or from anywhere else, make sure that no extra dots are automatically added to the code in the process. This can happen sometimes, and it will prevent the code from working. You can spot the unnecessary dots because they will appear in red and be marked with a red X on the side:

Now that you know the basics, let’s dive right in!

2. Change the font size

To change the font size for a text element on your widget, use the corresponding code snippet from the list below.

Use this snippet to adjust the size of the title:

.title {
  font-size: 42px;
}

Adjust the size of the description:

.description {
  font-size: 28px;
}

Adjust the size of the note:

.note {
  font-size: 22px;
}

Adjust the size of field labels and field options (the latter applies to radio buttons and checkboxes only):

.field {
  font-size: 22px;
}

Adjust the size of the button text:

.button {
  font-size: 22px;
}

Adjust the size of the placeholder text and input text:

.input-text::placeholder {
  font-size: 22px;
}

Feel free to change the numerical values in the code snippets to apply the desired font size.

3. Import a custom/3^rd-party font

In the Theme section, you can change the font applied to the text elements of your widget. A list of Google Fonts is available for you to choose from in the dropdown menu:

If none of the built-in fonts work for you, you can import a different font using the CSS editor.

Import a font from Google

To import any font from Google Fonts, choose the desired font by clicking on its card in the gallery.

Then, select a font family and copy the code as shown below:

Next, go to the CSS editor and add the code you’ve copied from Google Fonts before the root element in the following form:

@import (css) url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');

❗Make sure to add (css) to the Google Fonts code for it to work in the CSS editor.

Find and copy the font family name from Google Fonts:

Add the code with the necessary font-family name after the root element.

.container {
  font-family: 'Roboto Slab', serif;
}

This method will apply the font to all text elements in the widget because of the .container class selector.

If you wish to apply the font only to specific elements in the widget (e.g. the title), swap .container with the necessary class selector, like this:

.title {
  font-family: 'Roboto Slab', serif;
}

And that’s it! The font you picked from Google is now applied to your widget.

Import a custom font from your website

If you want to use on the widget the same font you’re using on your website, specify it in the CSS editor in the following format:

.container {
  font-family: 'Emigre';
}

Swap ‘Emigre’ with your website’s font.

As mentioned before, this method will apply the font to all text elements in the widget because of the .container class selector.

If you wish to apply the font only to specific elements in the widget (e.g. the title), swap .container with the necessary class selector:

.title {
  font-family: 'Emigre';
}

❗Please note that when you apply the font from your website to a widget, you won’t be able to see the changes in the Getsitecontrol preview. The changes will only be visible when you view the widget on your website.

4. Change the color of the placeholder text

If the placeholder text gets lost in your widget’s color theme, you can make it more visible by changing its color to a contrasting one.

Add the following code snippet to the CSS editor of your widget. Change the color to the desired one:

.input-text::placeholder {
  color: black;
}

As an alternative to writing the name of the color, you can use the following formats to express the color property for the placeholder text:

• Hex color codes: #00FFFF or #0FF
• RGB and RGBa color values: rgb(0, 255, 255), rgba(0, 255, 255, .5), or rgba(0, 255, 255, 50%)
• HSL and HSLa color values: hsl(180, 100%, 50%) or hsla(180, 100%, 50%, .5).

Here’s the final result:

5. Align the widget content

To align the content of the widget to one side or center it, set the text-align property for the .content, .input-text, and .buttons elements accordingly. Here are the code snippets you should add to the CSS editor.

To align the content of the widget to the right:

.content, .input-text {
  text-align: right;
}

.buttons .button {
  text-align: right;
}

To align the content of the widget to the left:

.content, .input-text {
  text-align: left;
}
.buttons .button {
  text-align: left;
}

To center the content of the widget:

.content, .input-text {
  text-align: center;
}
.buttons .button {
  text-align: center;
}

Here are the changes applied to the widget:

❗The code snippet above will only change the alignment of the text within the button(s). If you wish to align the button as well, add one of the snippets below.

To align the button to the right:

.buttons {
  align-items: flex-end;
}

To align the button to the left:

.buttons {
  align-items: flex-start;
}

To center the button:

.buttons {
  align-items: center;
}

For more button styling tips, check out our complete guide on button editing.

Right-to-left languages

If the text of your widget is written in a right-to-left language, add the following code snippet to the CSS editor to display the text and other widget elements correctly:

.title,
.title div,
.description,
.description div,
.field-title div,
.input-text,
.input-text::placeholder,
.input-textarea,
.input-textarea::placeholder,
.input-select select,
.input-select option,
.input-check span,
.input-check span div,
.button,
.button span,
.note div {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.close {
  left: 0;
  right: auto;
  transform: scaleX(-1);
}

.back {
  right: auto;
  left: 41px;
  padding-right: 10px;
  transform: scaleX(-1);
}

.input-select select {
  padding: 0 11px 0 24px;
}

.input-select:after {
  right: auto;
}

.input-check label {
  text-align: right;

  span {
    padding: 0 38px 0 0;

    &:before {
      right: 0;
    }

    &:after{
      right: 4px;
    }
  }
}

// panel specific
.header {
  flex-direction: row-reverse;

  .title {
    margin: 0 28px 0 12px;
  }

  .back + .caret {
    padding-left: 16px;
    padding-right: 4px;
  }
}

Using this method, you’ll apply the following changes to your widget:

1. Change the text direction for all elements
2. Move the close and back buttons to the left side of the widget
3. Align the down arrow of the dropdown list, radio buttons and checkboxes options to the right.

Here’s the final result on a widget with text in Arabic:

And that concludes our list of text editing solutions.

In this guide, we have covered the most frequently asked text-related questions and queries. If you didn’t find the solution you were looking for, feel free to reach out to our Support Team at any time.