--- title: "custom CSS code for advanced design functionality" description: "Learn all about custom code and access our step-by-step instructions, FAQs, and everything you need to know!" url: https://help.ivorey.io/en/articles/10493592-custom-css-code-for-advanced-design-functionality collection: "custom code" updated: 2026-11-03 language: en --- # custom CSS code for advanced design functionality Learn all about custom code and access our step-by-step instructions, FAQs, and everything you need to know! ## before you dive in Many features inside ivorey allow you to add custom code for advanced customisation, in order to adjust and use your own colours, fonts, etc. This article provides custom code snippets for various elements in ivorey and instructions for applying them, to allow advanced design functionality. This guide is perfect if you want to: - Add custom CSS code to assets inside of ivorey for advanced customisation * * * ## using custom fonts in ivorey Inside ivorey, you can upload and use bespoke, custom fonts for your websites, funnels, pages, stores, blogs, and more. Please refer to our [**Design & Customise Your Site Pages**](https://cqcighsbi.gleap.help/en/articles/13431638-design-and-customise-your-site-pages) guide for the detailed steps for how to upload a custom font. Once uploaded, you can select your custom font from the usual customisation settings. However, for some features you may need custom CSS in order to display a custom font. * * * ## websites & funnels custom Google fonts for blog elements in websites If you want to customise the blog element to match your website fonts please follow the steps below. **Note:** This is for web fonts, and public-access fonts. Please refer to our [**Design & Customise Your Site Pages**](https://cqcighsbi.gleap.help/en/articles/13431638-design-and-customise-your-site-pages) guide for the detailed steps for how to upload a custom font. **Where to add your Custom Code** Add this CSS code to the website page that the blog element is on by clicking on the paint brush icon on the edit menu bar. 1. **Copy/paste the Custom Code below** You will need to copy the code below and paste it into your Custom CSS box. @import url**('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300..700&display=swap')**; .blog-item-texts h1, .blog-item-texts h2, .blog-item-texts h2 a, .blog-item-texts h3, .blog-item-texts h4, .blog-item-texts h5, .blog-item-texts h6 { font-family: '**Playfair Display**', serif !important; font-weight: 700; } .blog-item-texts p, .blog-item-texts span, .blog-item-texts a { font-family: '**Montserrat**', sans-serif !important; font-weight: 400; } .blog-item-category { font-family: **'Montserrat', sans-serif** !important; } .hl-category-nav-menu-text { font-family: **'Montserrat', sans-serif** !important; } 2. **Replace Import URL with the Google font import URL** 1. Go to [https://fonts.google.com/](https://fonts.google.com/) > type in your Google font in the search bar > click **\[Get Font\]** > click **\[Get embed code\]** > click **\[Import\]** 2. Copy the import URL and paste it in the code box, in place of the import URL used above in **bold**. 3. **Replace the font name and variable style** 1. Where the font names are in **bold** in the code above (e.g. **Playfair Display),** you will need to replace these with the font names you want to use instead. 2. You can also change the font weight as required, by changing the number used under the font name in the code. 4. Click **\[Save\]** \> **\[Publish\]** **How to add your custom code and copy the Google import URL.** remove the 'published date' displayed on blog post elements in websites To remove the 'published date' displayed on the blog element of your website please follow the steps below. **Where to add your Custom Code** Add this CSS code to the page that the blog element is on by clicking on the paint brush icon on the edit menu bar. 1. **Copy/paste the Custom Code below** You will need to copy the code below and paste it into your Custom CSS box. .blog-item-date { display: none !important; } 2. Click **\[Save\]** \> **\[Publish\]** custom colours for social icons in websites and funnels To customise the colour of the **Social Icons** in your website footer, please follow the steps below. **Find the CSS ID** Select the **Social Icons** element in your website footer > then open the **Styles** tab to locate its **CSS ID** > click the **\[⧉\] copy icon** to the right of the **CSS Selector** code > save this in a note or somewhere easy to access in upcoming steps **Where to Add Your Custom Code** Add the CSS code to your website page by clicking on the **paint brush icon** in the top left menu bar. **1\. Copy/Paste the Custom Code below** You will need to copy the code below and paste it into your Custom CSS box. **#CSS-ID** { filter: invert(43%) sepia(67%) saturate(50%) hue-rotate(-20deg) brightness(900%) contrast(95%); } 2\. **Edit the code with the CSS ID** Before you save the custom code, replace the **#CSS-ID** with the CSS ID you copied from your **Social Icons** element. For example, if your CSS ID is **#social-icons-PUgYTfDH5V**, your code would look like this: #social-icons-PUgYTfDH5V { filter: invert(43%) sepia(67%) saturate(50%) hue-rotate(-20deg) brightness(900%) contrast(95%); } 3\. **Adjust the filter values** CSS filters work by manipulating the original icon colour, rather than setting a new colour, so you can tweak the percentages in the code until you get a colour you like. 4\. Click **\[Save\]** to see the adjusted colour > and keep adjusting until you’re happy 5\. When you’re happy with the colour, click **\[Save\]** in the top right corner of the screen > and click **\[Publish\]** * * * ## blogs custom colour for the 'category' text on a blog post page To add custom code to the blog category's colour on your blog post page, follow the steps below. **Finding the Category text** The blog category's standard setting is blue text with a blue underline. Currently, there's no way to change this using the builder's standard settings. **Where to add your Custom Code** Add this CSS code to the blog page that the blog element is on by clicking on the paint brush icon on the edit menu bar. 1. **Copy/paste the Custom Code below** You will need to copy the code below and paste it into the Custom CSS box. .blog-category, .blog-html-container-single a { color: **#000** !important; } 2. **Replace the font name and hex codes** Where the HEX code is in bold above, (e.g. #000), you will need to replace this with your brand hex code instead 3. Click **\[Save\]** \> **\[Publish\]** * * * ## courses custom colours for the 'proceed to checkout' button in course offer checkouts To customise the 'Proceed to Checkout' button inside your Offer Checkouts, follow the steps below. **Where to add your Custom Code** Add this CSS code on your offer checkout’s Advanced Custom CSS section by going to **Portals** > **Courses** > **Offers** > click **\[Advanced\]** under the offer description. 1. **Copy/paste the Custom Code below** You will need to copy the code below and paste it into your Custom CSS box. .n-button--primary-type { \--n-color: **#9a6a71** !important; \--n-color-hover: **#6a2921** !important; \--n-color-pressed: **#6a2921** !important; \--n-border: 1px solid **#6a2921** !important; \--n-border-hover: 1px solid **#9a6a71** !important; background-color: **#9a6a71** !important; } 2. **Add your Colour to the Custom Code** Replace the **#codes in bold** above (e.g. **#9a6a71)** with the colour code you wish to use for the button. 3. Click **\[Save\]** **Note:** - **Class:** .n-button--primary-type **_Do not change this unless you are targeting a different button._** - This code won’t automatically apply its changes to all your offer checkouts, you still need to manually add them on each offer checkout. **Understanding the Colour Codes** 1. **\--n-color: #9a6a71** This is the main colour users see when the button is in its normal state. 2. **\--n-color-hover: #6a2921** This is the hover colour. 3. **\--n-color-pressed: #6a2921** Changes the button colour when pressed. 4. **\--n-border: 1px solid #6a2921** Border color. 5. **\--n-border-hover: 1px solid #9a6a71** When hovered, the border changes to this lighter shade. 6. **background-colour: #9a6a71** Sets the background colour to match the default button colour. This will ensure consistent button colour, even in case of fallback or override issues. remove the course title, description, and "start course" button from the hero section Have a clean, custom-designed image for your course cover/hero banner, without the default text overlay and the **Start Course** button covering your design. **Where to add your Custom Code** Navigate to your course’s **Settings** > open the **\[Advanced\]** drop-down > and click on the **\[Custom CSS\] tab** 1. **Copy/paste the Custom Code below** You will need to copy the code below and paste it into your Custom CSS box. /\* Hide course title, description, and start button in the hero banner \*/ h1#banner-title, #banner-description, .banner-description, #banner p, #banner .description, div#load-next-post, div#load-next-post button { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } 2. Click **\[Save\]** \> and preview your course to confirm the code is working correctly * * * ## communities custom colour for the search bar inside your community group To customise the colour of the search bar inside of your community, please follow the steps below. **Where to Add your Custom Code** Add this CSS code to the branding settings of your client portal by going to **Portals** > **Communities** > **Groups** \> **Login** into your Community > click **Settings** \> **Branding** \> **Advanced** \> **Custom CSS** box. 1. **Copy/paste the Custom Code below** You will need to copy the code below and paste it into the Custom CSS box. .placeholder\\:text-communities-font-secondary::placeholder { color: #fefefe; } .bg-communities-search-background { background-color: **#8c3614**; } 2. **Add your brand colour hex codes** Replace **#8c3614** in the code with the hex code of the colour you want to change it to. 3. Click **\[Save\]** * * * ## client portals remove the portal name and portal description from the client portal login page To remove the Portal Name and Portal Description from the Client Portal Login page please follow the steps below. **Where to Add your Custom Code** Add this CSS code to the branding settings of your client portal by going to **Portals** > **Client Portal** > **Client Portal Settings** \> **Branding** \> **Advanced** \> **Custom CSS** box. 1. **Copy/paste the Custom Code below** You will need to copy the code below and paste it into your Custom CSS box. .text-5xl { display: none; } .my-4 { display: none; } 2. Click **\[Save\]** * * * ## calendars custom Google fonts for calendar booking widgets By default, calendar widgets use standard system fonts. If you want to customise your booking widget to match your brand/website fonts please follow the steps below. **Get the Custom Code** 1. Go to [https://fonts.google.com/](https://fonts.google.com/) > type in your Google font in the search bar > click **\[Get Font\]** > click **\[Get embed code\]** > select **\[@import\]** 2. You can also change the font weight and style to your preference, in the left-hand table 3. Copy the embed code **Where to add your Custom Code** Navigate to your calendar’s settings > click on the **Widget Appearance** tab > and scroll down to the custom code box 1. **Paste in the Custom Code** You will need to paste it into your Custom CSS box. 2. Click **\[Save Changes\]** \> and preview your widget, to make sure the code is working properly * * * ## need help? Hit the support chat widget inside ivorey - we can: - Walk you through any of the steps - Troubleshoot anything that’s not working We’re here and ready to help via the chat widget in the bottom right of your ivorey account. Or if you are looking for done-for-you support, you can browse our current services [here](https://ivorey.io/services) 🤍