diff --git a/settings/custom-scripts.mdx b/settings/custom-scripts.mdx
index cddbadac9..13142563f 100644
--- a/settings/custom-scripts.mdx
+++ b/settings/custom-scripts.mdx
@@ -1,16 +1,16 @@
---
title: 'Custom Scripts'
-description: 'Fully customize your documentation with custom CSS & JS'
+description: 'Fully customize your documentation with custom CSS and JS'
icon: "code"
---
-Add custom CSS & JS to your documentation to fully customize the look and feel.
+Add custom CSS and JavaScript to your documentation to fully customize the look and feel.
## Custom CSS
-Add any number of CSS files to your repository and the defined class names will be applied and available across all of your MDX files.
+Add CSS files to your repository and their defined class names will be applied and available in all of your `MDX` files.
-### Adding style.css
+### Adding `style.css`
For example, you can add the following `style.css` file to customize the styling of the navbar and footer.
@@ -25,27 +25,127 @@ footer {
}
```
-### Using Identifiers
+### Using identifiers and selectors
-Mintlify has a set of common identifiers to help you tag important elements of the UI. Some, but not all are listed in the following:
-
-`#topbar-cta-button` `#navbar` `#sidebar` `#content-area` `#table-of-contents`
+Mintlify has a set of common identifiers and selectors to help you tag important elements of the UI.
- Use inspect element to find references to elements you're looking to
- customize.
+ Use inspect element to find references to elements you're looking to customize.
+
+
+ - APIPlaygroundInput: `api-playground-input`
+ - AssistantEntry: `assistant-entry`
+ - AssistantEntryMobile: `assistant-entry-mobile`
+ - Banner: `banner`
+ - ChangelogFilters: `changelog-filters`
+ - ChangelogFiltersContent: `changelog-filters-content`
+ - ChatAssistantSheet: `chat-assistant-sheet`
+ - ChatAssistantTextArea: `chat-assistant-textarea`
+ - ContentArea: `content-area`
+ - ContentContainer: `content-container`
+ - ContentSideLayout: `content-side-layout`
+ - Footer: `footer`
+ - Header: `header`
+ - NavBarTransition: `navbar-transition`
+ - NavigationItems: `navigation-items`
+ - Navbar: `navbar`
+ - PageContextMenu: `page-context-menu`
+ - PageContextMenuButton: `page-context-menu-button`
+ - PageTitle: `page-title`
+ - Pagination: `pagination`
+ - Panel: `panel`
+ - RequestExample: `request-example`
+ - ResponseExample: `response-example`
+ - SearchBarEntry: `search-bar-entry`
+ - SearchBarEntryMobile: `search-bar-entry-mobile`
+ - SearchInput: `search-input`
+ - Sidebar: `sidebar`
+ - SidebarContent: `sidebar-content`
+ - TableOfContents: `table-of-contents`
+ - TableOfContentsContent: `table-of-contents-content`
+ - TableOfContentsLayout: `table-of-contents-layout`
+ - TopbarCtaButton: `topbar-cta-button`
+
+
+ - Accordion: `accordion`
+ - AccordionGroup: `accordion-group`
+ - AlmondLayout: `almond-layout`
+ - AlmondNavBottomSection: `almond-nav-bottom-section`
+ - AlmondNavBottomSectionDivider: `almond-nav-bottom-section-divider`
+ - Anchor: `nav-anchor`
+ - Anchors: `nav-anchors`
+ - APISection: `api-section`
+ - APISectionHeading: `api-section-heading`
+ - APISectionHeadingSubtitle: `api-section-heading-subtitle`
+ - APISectionHeadingTitle: `api-section-heading-title`
+ - Callout: `callout`
+ - Card: `card`
+ - CardGroup: `card-group`
+ - ChatAssistantSheet: `chat-assistant-sheet`
+ - ChatAssistantSheetHeader: `chat-assistant-sheet-header`
+ - ChatAssistantSheetContent: `chat-assistant-sheet-content`
+ - ChatAssistantInput: `chat-assistant-input`
+ - ChatAssistantSendButton: `chat-assistant-send-button`
+ - CodeBlock: `code-block`
+ - CodeGroup: `code-group`
+ - Content: `mdx-content`
+ - DropdownTrigger: `nav-dropdown-trigger`
+ - DropdownContent: `nav-dropdown-content`
+ - DropdownItem: `nav-dropdown-item`
+ - DropdownItemTextContainer: `nav-dropdown-item-text-container`
+ - DropdownItemTitle: `nav-dropdown-item-title`
+ - DropdownItemDescription: `nav-dropdown-item-description`
+ - DropdownItemIcon: `nav-dropdown-item-icon`
+ - Expandable: `expandable`
+ - Eyebrow: `eyebrow`
+ - FeedbackToolbar: `feedback-toolbar`
+ - Field: `field`
+ - Frame: `frame`
+ - Icon: `icon`
+ - Link: `link`
+ - LoginLink: `login-link`
+ - Logo: `nav-logo`
+ - Mermaid: `mermaid`
+ - MethodNavPill: `method-nav-pill`
+ - MethodPill: `method-pill`
+ - NavBarLink: `navbar-link`
+ - NavTagPill: `nav-tag-pill`
+ - NavTagPillText: `nav-tag-pill-text`
+ - OptionDropdown: `option-dropdown`
+ - PaginationNext: `pagination-next`
+ - PaginationPrev: `pagination-prev`
+ - PaginationTitle: `pagination-title`
+ - Panel: `panel`
+ - SidebarGroup: `sidebar-group`
+ - SidebarGroupIcon: `sidebar-group-icon`
+ - SidebarGroupHeader: `sidebar-group-header`
+ - SidebarTitle: `sidebar-title`
+ - Step: `step`
+ - Steps: `steps`
+ - Tab: `tab`
+ - Tabs: `tabs`
+ - TabsBar: `nav-tabs`
+ - TabsBarItem: `nav-tabs-item`
+ - TableOfContents: `toc`
+ - TableOfContentsItem: `toc-item`
+ - Tooltip: `tooltip`
+ - TopbarRightContainer: `topbar-right-container`
+ - TryitButton: `tryit-button`
+ - Update: `update`
+
+
+
- References and the styling of common elements are subject to change as the
- platform evolves. Please use custom styling with caution.
+ References and the styling of common elements are subject to change as the platform evolves. Please use custom styling with caution.
-## Custom JS
+## Custom JavaScript
Custom JS allows you to add custom executable code globally. It is the equivalent of adding a `