You can style almost any element on your website by adding custom CSS codes to the <head></head> part of your website's code.
CSS (Cascading Style Sheets) is a style sheet language used for describing how your website elements look and behave. It defines the location, size, color, opacity, font, and other stylistic features of various components within a website.
You can edit the CSS of your website by editing already existing CSS styles. Firstly, inspect the code of your website by opening your website in a new tab, clicking the right mouse button, and selecting Inspect. It will open the web development tools menu:
Make sure you're in the Elements tab (1) and click on the selector icon (2) – it allows you to select any element on the page and inspect it. After clicking on the selector, click on the element the appearance of which you'd like to modify (3). In this example, we'll change the color of the submit button in a contact form. Let's make it red instead of green:
Once you click on the element, you will see its CSS code under the Styles tab. You can expand and zoom into that section to see it better:
You can edit the attributes on the spot for testing. For example, the property that's responsible for button color is background-color (click the link to learn about many other properties). It looks something like background-color: red; in the code.
To make changes to the button color, simply delete the existing color value and insert whatever color you like instead. You can similarly change other properties: the button size, text size, even the cursor animation, and so on:
In order to apply this change on your website, follow the steps below:
1. After selecting the element with the selector tool, find the Styles tab (1) and click on the plus + button (2) – it will generate a fragment of code that you'll need to use while making changes. In our example, it's .button.grid-button.grid-button--primary.form__button:
2. Specify the particular attribute (background-color, font-family, font-size, etc.) and add specify the preferred value (red, Helvetica, 16 px, etc.). In our example, it's background-color: red;:
3. Write a simple line of <style></style> code that combines everything together (element + the adjustment we want to apply to the element).
<style>.the element {attribute: value !important;} </style>
In our example, the code would be:
<style>.button.grid-button.grid-button--primary.form__button {background-color: red !important;} </style>
4. Once you have the code, open your website's integrations settings and paste the code in the Custom code field. Save the code and update your website for the changes to reflect online.
NOTES: The custom changes won't be visible in the editor, they will only reflect online