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

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

Custom Auth Buttons

.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

.pp-top-bar-title {
  font-size: 18px !important;
  color: #ff6b6b !important;
  font-weight: bold !important;
}

Logo Customization

.profile-top-bar-logo-box {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

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

Search Box Styling

.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

Updated on: 17/09/2025