> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://docs.staylive.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # CMS Styling - Text och Knappar Många komponenter i vår plattformsbyggare har textelement i sig. I den här guiden beskrivs hur du kan redigera utformningen av dessa textelement. ### Grundläggande styling av text | I det här avsnittet om grundläggande styling får du den information du behöver för att få dina textelement att stämma överens med plattformens övergripande design. I avsnittet om avancerad styling längre ner får du ytterligare tips om du vill skapa en mer avancerad design för din plattform när du hanterar text och knappar. || Om du vill ha mer information om CMS-styling kan du söka i Tailwind CSS-guiderna som finns tillgängliga på [https://tailwindcss.com/docs](https://tailwindcss.com/docs). ###### Storlek på texten Följande stilar, från den minsta till den största, bestämmer storleken på texten: `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text3xl`, `text4xl`, `text5xl`, `text6xl`, `text-7xl`, `text-8xl`, `text-9xl`. ###### Färg på texten Det finns många olika färger att välja mellan i Tailwind CSS-guiderna. För en ljus textfärg på en mörk bakgrund rekommenderar vi att du använder `text-zinc-100` (en något off-white färg) och för en mörk textfärg på en ljus bakgrund rekommenderar vi att du använder `text-grey-900` (en något off-black färg). I de **allmänna inställningarna** _(plattform - hantera plattform)_ kan du lägga till specifika färger som du kan tillämpa genom att använda `text-primary`, `text-accent`, `text-customColor1`, ..., `text-customColor5`. Vissa textelement på din plattform kommer som standard att ha `text-primary` styling tillämpad. Att ställa in dessa anpassade färger är ett bra sätt att säkerställa en konsekvent användning av dina varumärkesfärger på plattformen. Du hittar en fullständig lista över färger som är tillgängliga i Tailwind på [https://tailwindcss.com/docs/customizing-colors](https://tailwindcss.com/docs/customizing-colors). ###### Typsnittsvikt och kursiv stil Det finns en mängd olika typsnittsvikter för att avgöra hur fet texten visas. Vi föreslår att du använder `font-normal`, `font-medium`, `font-bold` och `font-black`. Du kan använda stilen `italics` för att få texten att visas i kursiv stil. Observera att beroende på vilket typsnitt som används på din plattform _(väljs i allmänna inställningar) _kanske vissa typsnittsvikter inte är tillgängliga. ### Avancerad styling av text och knappar | I vissa situationer kanske du vill använda mer avancerad styling på dina texter, t.ex. en bakgrundsfärg och en ram eller, för klickbara länkar, en visuell förändring när du håller muspekaren över texten. Nedan följer några tips som visar avancerade stylingsmetoder som vi använder mest frekvent på våra plattformar. | Observera att vissa knappelement på din plattform redan har en del av denna styling, så i så fall bör du redigera den befintliga stylingen om du vill ändra färg, storlek eller något annat av stylingelementen. ###### Bakgrundsfärg För att få din text att sticka ut på sidan, eller för att visuellt indikera att texten är klickbar, kanske du vill lägga till en bakgrundsfärg bakom texten. För att göra detta lägger vi till stylingen `bg-####` (där #### representerar färgstylingen, t.ex. `bg-orange-600` eller `bg-customColor1`). Detta skapar en bakgrund som ligger tätt intill texten, men vanligtvis vill vi att rutan ska vara något större än texten, så vi lägger till lite utfyllnad för att göra detta. Om vi vill lägga till lika mycket utfyllnad på alla sidor kan vi lägga till `p-4` för att lägga till 4 enheter utfyllnad. Om vi vill lägga till mer horisontell utfyllnad och mindre vertikal utfyllnad kan vi istället lägga till `px-6` och `py-2` (”x” representerar den horisontella axeln och ”y” representerar den vertikala axeln). ![Text som har fått denna styling tillagd: bg-orange-600 & px-6 & py-2](https://storage.crisp.chat/users/helpdesk/website/acbaf8a9e186c000/screenshot-2024-10-29-at-11125_1hdmaq1.png) ##### Rundade hörn och ram Du kanske inte gillar de fyrkantiga hörnen och vill skapa något med en mjukare rundad look. För att göra detta lägger vi till stylingen `rounded-##` (där ## representerar storleken på de rundade kanterna, som varierar från `rounded-sm` upp till `rounded-3xl`, och sedan `rounded-full` för en helt rundad stil). Om du också vill lägga till en ram på den här rutan måste du definiera tre element: **Ramens bredd, ramens stil och ramens färg**. Vi föreslår antingen `border` (storlek 1 enhet) eller `border-2` för bredden och `border-solid` för stilen. Valet av färg är upp till dig att bestämma, och detta använder stylingformatet `border-####` (t.ex. `border-white` eller `border-customColor2`). ![Efter att också ha lagt till: rounded-lg & border-2 & border-solid & border-white](https://storage.crisp.chat/users/helpdesk/website/acbaf8a9e186c000/screenshot-2024-10-29-at-11224_1u52p3r.png) ###### Visuella förändringar när du håller muspekaren För klickbara länkar/knappar kanske du vill att texten ska ändras visuellt när du håller muspekaren över den, för att visa att användarna kan klicka på texten. För alla hover-animationer använder vi klassen `hover:` med stylingformatet `hover:####` (t.ex. `hover:bg-customColor1` eller `hover:text-red-300`). I exemplet nedan är bakgrunden gjord mörkare när du håller muspekaren över rutan. För att göra detta lägger vi till `hover:bg-orange-800`, eftersom `orange-800` är en mörkare nyans av orange jämfört med `orange-600`, som vi har som standardbakgrundsfärg. ![Efter att också ha lagt till: hover:bg-orange-800](https://storage.crisp.chat/users/helpdesk/website/acbaf8a9e186c000/hover-animation_x2089y.gif) ### Spara och publicera När du har gjort ändringar i plattformsredigeraren ska du alltid komma ihåg att trycka på **”Spara”** längst ned till vänster för att spara dina ändringar och få en förhandsgranskning till höger. Om du är nöjd med dina ändringar trycker du på **”Publicera”** för att göra dem tillgängliga på plattformen. Du kan också trycka på ”Släng utkast” för att radera alla dina ändringar efter den senaste publiceringen.