Record CSS IDs and selectors

settings/custom-scripts.mdx

@@ -1,18 +1,18 @@
 ---
 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 JavScript 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.
 
 ```css
 #navbar {
@@ -25,27 +25,100 @@
 }
 ```
 
-### 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.
 
 <Tip>
-  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.
 </Tip>
 
+<AccordionGroup>
+  <Accordion title="Identifiers">
+  - Banner: `banner`
+  - ChangelogFilters: `changelog-filters`
+  - ChangelogFiltersContent: `changelog-filters-content`
+  - 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`
+  - 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 title="Selectors">
+  - Accordion: `accordion`
+  - AccordionGroup: `accordion-group`
+  - 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`
+  - CodeBlock: `code-block`
+  - CodeGroup: `code-group`
+  - Content: `mdx-content`
+  - Expandable: `expandable`
+  - Eyebrow: `eyebrow`
+  - FeedbackToolbar: `feedback-toolbar`
+  - Field: `field`
+  - Frame: `frame`
+  - Icon: `icon`
+  - Link: `link`
+  - Logo: `nav-logo`
+  - Mermaid: `mermaid`
+  - MethodNavPill: `method-nav-pill`
+  - MethodPill: `method-pill`
+  - NavBarLink: `navbar-link`
+  - OptionDropdown: `option-dropdown`
+  - PaginationNext: `pagination-next`
+  - PaginationPrev: `pagination-prev`
+  - PaginationTitle: `pagination-title`
+  - Panel: `panel`
+  - SidebarGroup: `sidebar-group`
+  - 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`
+  - TryitButton: `tryit-button`
+  - Update: `update`
+  </Accordion>
+</AccordionGroup>
+
 <Warning>
-  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.
 </Warning>
 
-## Custom JS
+## Custom JavaScript
 
 Custom JS allows you to add custom executable code globally. It is the equivalent of adding a `<script>` tag with JS code into every page.
 
-### Adding Custom JavaScript
+### Adding custom JavaScript
 
 Any `.js` file inside the content directory of your docs will be included in every documentation page. For example, you can add the following `ga.js` file to enable [Google Analytics](https://marketingplatform.google.com/about/analytics) across the entire documentation.