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.
Basic styling of text
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
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!