CMS Styling - Text and Buttons
Many components within our platform builder have text elements within them. This guide explains how you can edit the design of these text elements.
This basic styling section will provide you with the essential information you need to make your text elements consistent with the overall design of your platform. The advanced styling section further below will provide you with additional tips if you want to create a more advanced design for your platform when dealing with text and buttons.
For more info about any CMS styling, you can search the Tailwind CSS guides that are available at https://tailwindcss.com/docs.
Ranging from smallest to largest, the following styles determine the size of the text: text-sm, text-base, text-lg, text-xl, text-2xl, text3xl, text4xl, text5xl, text6xl, text-7xl, text-8xl, text-9xl.
There are many different colours available to choose from in the Tailwind CSS guides. For simple light text on a dark background we recommend using text-zinc-100 (a slightly off-white colour), and for simple dark text on a light background we recommend using text-grey-900 (a slightly off-black colour).
In the general settings of the platform editor, you can define custom colours, which you can apply by using text-primary, text-accent, text-customColor1, ..., text-customColor5. Some text elements on your platform will by default have the text-primary styling applied. Setting up these custom colours is a great way to ensure consistent implementation of your brand colours on your platform.
You can find the full list of colours which are natively available in Tailwind at https://tailwindcss.com/docs/customizing-colors.
There are a variety of font weights to determine how bold the text appears. We suggest using only font-normal, font-medium, font-bold and font-black. You can use the style italics to make the text appear in italics. Please note that depending on the font used on your platform (chosen in general settings), some font weights may not be available.
In some situations you may want to apply more advanced styling to your texts, such as a background colour and a border or, for clickable links, a visual change when hovering over the text with your mouse cursor. Below are some tips showing advanced stylings methods that we use most frequently on our platforms.
Note that some button elements on your platform will already have some of this styling applied, so in this case you should edit the existing styling if you want to change the colour, size or any other of the styling elements.
To make your text stand out on page, or to visually indicate that the text is clickable, you may want to add a background colour behind the text. To do this, we add the styling bg-#### (where #### represents the colour styling, e.g. bg-orange-600 or bg-customColor1).
This creates a background that is tight to the text, but usually we want the box to be slightly large than the text, so we will add some padding to do this. If we wanted to add equal padding on all sides, we could add p-4 to add 4 units of padding. If we want to add more horizontal padding, and less vertical padding, we can rather add px-6 and py-2 ("x" representing the horizontal axis and "y" representing the vertical axis).
Perhaps you don't like the square edges and want to create something with a softer rounded look. To do this, we add the styling rounded-## (where ## represents the size of the rounded edges, varying from rounded-sm up to rounded-3xl, and then rounded-full for a circular style).
If you also want to add a border to this box, you will need to definite 3 elements: Border width, border style and border colour. We suggest either border (size of 1 unit) or border-2 for the border width, and border-solid for the border style. The choice of colour is for you to decide, and this uses the styling format border-#### (e.g. border-white or border-customColor2).
For clickable links/buttons, you may want the text to change visually when hovering over it with your mouse curser, to indicate that users can click on this text.
For any hover animation, we use the modifier hover: with the styling format hover:#### (e.g. hover:bg-customColor1 or hover:text-red-300).
In the example that we've been creating, it will look nice if we darken the background when hovering over the box. To do this, we add hover:bg-orange-800, because orange-800 is a darker shade of orange compared to orange-600, which we have as the standard background colour.
After making in changes in the platform editor, always remember to press "Save section" at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes press "Publish" to make them live on the platform. You could also press "Discard" to delete all your changes after last time you published.
Basic styling of text
This basic styling section will provide you with the essential information you need to make your text elements consistent with the overall design of your platform. The advanced styling section further below will provide you with additional tips if you want to create a more advanced design for your platform when dealing with text and buttons.
For more info about any CMS styling, you can search the Tailwind CSS guides that are available at https://tailwindcss.com/docs.
Size of text
Ranging from smallest to largest, the following styles determine the size of the text: text-sm, text-base, text-lg, text-xl, text-2xl, text3xl, text4xl, text5xl, text6xl, text-7xl, text-8xl, text-9xl.
Colour of text
There are many different colours available to choose from in the Tailwind CSS guides. For simple light text on a dark background we recommend using text-zinc-100 (a slightly off-white colour), and for simple dark text on a light background we recommend using text-grey-900 (a slightly off-black colour).
In the general settings of the platform editor, you can define custom colours, which you can apply by using text-primary, text-accent, text-customColor1, ..., text-customColor5. Some text elements on your platform will by default have the text-primary styling applied. Setting up these custom colours is a great way to ensure consistent implementation of your brand colours on your platform.
You can find the full list of colours which are natively available in Tailwind at https://tailwindcss.com/docs/customizing-colors.
Font weight and italics
There are a variety of font weights to determine how bold the text appears. We suggest using only font-normal, font-medium, font-bold and font-black. You can use the style italics to make the text appear in italics. Please note that depending on the font used on your platform (chosen in general settings), some font weights may not be available.
Advanced styling of text and buttons
In some situations you may want to apply more advanced styling to your texts, such as a background colour and a border or, for clickable links, a visual change when hovering over the text with your mouse cursor. Below are some tips showing advanced stylings methods that we use most frequently on our platforms.
Note that some button elements on your platform will already have some of this styling applied, so in this case you should edit the existing styling if you want to change the colour, size or any other of the styling elements.
Background colour
To make your text stand out on page, or to visually indicate that the text is clickable, you may want to add a background colour behind the text. To do this, we add the styling bg-#### (where #### represents the colour styling, e.g. bg-orange-600 or bg-customColor1).
This creates a background that is tight to the text, but usually we want the box to be slightly large than the text, so we will add some padding to do this. If we wanted to add equal padding on all sides, we could add p-4 to add 4 units of padding. If we want to add more horizontal padding, and less vertical padding, we can rather add px-6 and py-2 ("x" representing the horizontal axis and "y" representing the vertical axis).
Rounded edges and borders
Perhaps you don't like the square edges and want to create something with a softer rounded look. To do this, we add the styling rounded-## (where ## represents the size of the rounded edges, varying from rounded-sm up to rounded-3xl, and then rounded-full for a circular style).
If you also want to add a border to this box, you will need to definite 3 elements: Border width, border style and border colour. We suggest either border (size of 1 unit) or border-2 for the border width, and border-solid for the border style. The choice of colour is for you to decide, and this uses the styling format border-#### (e.g. border-white or border-customColor2).
Visual changes when hovering
For clickable links/buttons, you may want the text to change visually when hovering over it with your mouse curser, to indicate that users can click on this text.
For any hover animation, we use the modifier hover: with the styling format hover:#### (e.g. hover:bg-customColor1 or hover:text-red-300).
In the example that we've been creating, it will look nice if we darken the background when hovering over the box. To do this, we add hover:bg-orange-800, because orange-800 is a darker shade of orange compared to orange-600, which we have as the standard background colour.
Save and publish
After making in changes in the platform editor, always remember to press "Save section" at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes press "Publish" to make them live on the platform. You could also press "Discard" to delete all your changes after last time you published.
Updated on: 31/10/2024
Thank you!