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 `