> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.janitorai.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom CSS: Header Customization Guide

# Header Customization Guide

This guide lists all available CSS classnames for customizing the site header components. Use these classes in your custom CSS to override default styling.

## Header Desktop Components

### Main Header Container
* `pp-top-bar-outer` - Outer header wrapper (sticky positioning)
* `pp-top-bar-inner` - Inner header flex container
* `pp-top-bar` - Main header bar (also has `profile-top-bar`)
* `profile-top-bar-flex-outer` - Legacy outer container class

### Header Layout Sections
* `pp-top-bar-left` - Left section containing logo and search
* `pp-top-bar-right` - Right section containing auth/user panel
* `profile-top-box-flex-inner` - Legacy left section class

### Logo Component
* `profile-top-bar-logo-box` - Logo container/link wrapper

### Search Component
* `profile-top-bar-search-box` - Search input container
* `pp-top-bar-search-spacer-top` - Spacer before search input
* `pp-top-bar-search-spacer-bottom` - Spacer after search input
* `profile-top-box-search-input-spacer-top` - Legacy top spacer
* `profile-top-box-search-input-spacer-bottom` - Legacy bottom spacer

### Authentication Buttons (Guest Panel)
* `pp-top-bar-auth-buttons` - Container for login/register buttons
* `pp-top-bar-auth-buttons-login` - Login button specifically
* `pp-top-bar-auth-buttons-register` - Register button specifically
* `profile-top-bar-auth-buttons` - Legacy auth buttons container
* `profile-top-bar-auth-buttons-login` - Legacy login button
* `profile-top-bar-auth-buttons-register` - Legacy register button

## Header Mobile Components

### Mobile Header Container
* `pp-top-bar` - Mobile header bar (shared with desktop)
* `profile-top-bar` - Legacy mobile header class

### Mobile Header Elements
* `pp-top-bar-title` - Page title in mobile header
* `profile-top-bar-title` - Legacy title class
* `pp-top-bar-back-button` - Back button in mobile header
* `profile-top-bar-back-button` - Legacy back button class

## Usage Examples

### Custom Header Background
```css
.pp-top-bar {
  background: linear-gradient(90deg, #1a1a1a, #2d2d2d) !important;
  backdrop-filter: blur(20px) !important;
}
```

### Custom Auth Buttons
```css
.pp-top-bar-auth-buttons-login {
  background: #007bff !important;
  border-color: #007bff !important;
  color: white !important;
}

.pp-top-bar-auth-buttons-register {
  background: #28a745 !important;
  border-color: #28a745 !important;
  color: white !important;
}
```

### Mobile Header Title Styling
```css
.pp-top-bar-title {
  font-size: 18px !important;
  color: #ff6b6b !important;
  font-weight: bold !important;
}
```

### Logo Customization
```css
.profile-top-bar-logo-box {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.profile-top-bar-logo-box:hover {
  opacity: 1;
}
```

### Search Box Styling
```css
.profile-top-bar-search-box {
  max-width: 600px !important;
}
```

## Notes

* Use `!important` when needed to override default styles
* `pp-*` classes are the new customization hooks
* `profile-*` classes are legacy but still supported
* Mobile and desktop share some classes like `pp-top-bar`
* All classes are globally scoped and available for CSS customization