# Customizing your FeatureOS homepage with CSS _By Sathi · Mar 23, 2026_ If you want to go beyond the built-in customization options and have full control over the look and feel of your homepage header, FeatureOS lets you write custom CSS directly from your organization settings. This is ideal for teams who want pixel-perfect branding with custom colors, fonts, spacing, backgrounds, and more. To get started, go to **Dashboard →** **Organization Settings → Appearance → CSS Customization**. ### Using theme presets If you're not sure where to start, FeatureOS comes with six built-in theme presets you can load as a starting point. Click the **Themes** button at the top of the editor to see the available options. ![](https://vault.featureos.app/uploads/attachment/upload/24be65eb14ebf55074ea63cbb4c60b18.png) Selecting a preset loads its CSS into the editor. You can use it as-is or modify it to suit your brand. This is a great way to get a feel for how the CSS is structured before writing your own. ### Resetting your CSS If you want to start fresh, click **Reset** to clear the editor and remove any custom styles currently applied. Note that this cannot be undone, so make sure to copy your CSS somewhere safe before resetting if you might want to reuse it later. ### Class name reference Below is a full list of all the CSS classes available for customization, grouped by the part of the header they control. #### 1\. Background & layout These classes control the overall page background and the main content containers across different page types. Class What it controls `.fos-background-container` The fixed full-page background layer, sits behind all content `.fos-post-page-container` The content container on individual post pages `.fos-roadmap-page-container` The content container on the Roadmap page `.fos-changelog-page-container` The content container on the Changelog page #### 2\. Header structure These are the core building blocks of the header itself. Use these to control layout, background, spacing, and overall appearance of the header and its sections. Class What it controls `.fos-user-side-header` The main wrapper for the entire header component `.fos-header-container` The primary navigation area container `.fos-header-links-container` The container holding the Boards, Roadmap, and Changelog nav buttons `.fos-header-link` Individual navigation links (14px font size by default) `.fos-header-logo-container` The container holding your logo and user action buttons `.fos-header-logo-link` The clickable wrapper around your logo `.fos-header-logo-image` The logo image element itself `.fos-header-logo-text` The fallback text shown when no logo image is uploaded `.fos-header-actions-container` The container for login/auth buttons and the mobile menu #### 3\. Banner These classes control the full-width banner section that appears beneath the header navigation. Class What it controls `.fos-header-banner` The main banner container `.fos-header-banner-content` The content wrapper inside the banner `.fos-header-banner-title` The main banner heading (white, 4rem, bold, Oswald font by default) `.fos-header-banner-subtitle` The subtitle text beneath the banner title `.banner-title` Large title text used in banner sections `.banner-subtitle` Subtitle text used in banner sections #### 4\. Navigation dropdown for Boards These classes control the Boards dropdown that appears in your header navigation. Class What it controls `.fos-header-boards-dropdown` The outer container for the Boards dropdown `.fos-header-boards-trigger` The button that opens the Boards dropdown `.fos-header-boards-link` The navigation link for Boards `.fos-header-boards-icon` The icon inside the Boards dropdown trigger `.fos-header-boards-dropdown-content` The dropdown menu itself `.fos-header-boards-dropdown-item` Individual board items listed in the dropdown `.fos-header-boards-dropdown-label` Section labels within the dropdown #### 5\. Navigation dropdown for Custom links These classes control the dropdown that appears for any custom navigation links you've added. Class What it controls `.fos-header-custom-links-dropdown` The outer container for the custom links dropdown `.fos-header-custom-links-trigger` The button that opens the custom links dropdown `.fos-header-link-icon` The icon inside the custom links dropdown trigger `.fos-header-custom-links-dropdown-content` The dropdown menu itself `.fos-header-custom-links-dropdown-item` Individual link items listed in the dropdown #### 6\. Mobile menu These classes control the mobile navigation experience — the hamburger button, sliding menu, and overlay. Class What it controls `.fos-mobile-menu-button-container` The container for the hamburger menu button `.fos-mobile-menu-toggle-button` The hamburger toggle button itself `.fos-mobile-menu-toggle-icon` The icon inside the hamburger button `.fos-mobile-menu-overlay` The background overlay behind the open mobile menu `.fos-mobile-menu` The sliding mobile menu panel `.fos-mobile-menu-content` The content area inside the mobile menu `.fos-mobile-menu-close-button` The close (X) button inside the mobile menu `.fos-mobile-menu-close-icon` The X icon inside the close button #### 7\. Styling for dark mode FeatureOS supports dark mode, and you can write separate styles for it using `.dark` as a parent selector. This ensures your customizations look great in both light and dark contexts. > **Any rule prefixed with** `.dark` **will only apply when a visitor has dark mode active.** ### Pricing **Note : This feature is exclusively available for Business plan.** ### **Need more help?** Reach out to our support at [support@featureos.app](mailto:support@featureos.app) or submit a request [on our support board](https://feedback.featureos.app/b/Support)! 😃 [View this article on the web](https://help.featureos.app/en/articles/customize-your-homepage-header-with-css)