{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"CSS Styling","description":"Developer documentation for the WHMCS API — the","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"css-styling","__idx":0},"children":["CSS Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"custom-css","__idx":1},"children":["Custom CSS"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you want to make changes to any of the CSS that is applied by default, we recommend creating a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["css/custom.css"]}," file and making those customisations within it. This file is included after ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.css"]},", allowing you to override any of the CSS defined within it. It will not be affected by future updates to the WHMCS software."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Tip"},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["We strongly recommend creating a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["css/custom.css"]}," file to contain your additional custom CSS rules and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["not"]}," editing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["css/styles.css"]}," directly because it will make updating easier."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You may also wish to consider creating a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/themes/child-themes/"},"children":["child theme"]},"."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"using-font-awesome","__idx":2},"children":["Using Font Awesome"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use Font Awesome icons, you may include the latest Font Awesome release shipped with WHMCS by including the line below within the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," section of your template:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Themes that do not include the above line will have it injected automatically. If you wish to prevent this behaviour, include the following line:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}]}]},"headings":[{"value":"CSS Styling","id":"css-styling","depth":1},{"value":"Custom CSS","id":"custom-css","depth":2},{"value":"Using Font Awesome","id":"using-font-awesome","depth":2}],"frontmatter":{"title":"CSS Styling","seo":{"title":"CSS Styling"}},"lastModified":"2026-08-03T17:00:42.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/themes/css-styling","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}