Customizing Your Website Theme & Design

Your author website should reflect your personal brand. BookAuth's design customization tools let you control the visual identity of your site — from color palettes to typography to advanced CSS overrides.

What You'll Learn

• How to access and use the theme customizer
• Available themes and when to use each
• Color, font, and layout customization
• Custom CSS for advanced styling (Pro/Business)

Accessing the Design Settings

Navigate to Website > Design from the sidebar. The design customizer loads with a live preview on the right side.

Available Themes

BookAuth offers several pre-designed themes:

Theme	Style	Best For
Astro Default	Clean, modern, light background	Most authors — versatile and professional
Astro Dark	Dark background, light text	Thriller, horror, sci-fi authors
Minimalist	Ultra-clean, lots of white space	Literary fiction, non-fiction, poetry

Each theme provides the foundational layout — you then customize colors, fonts, and details on top of the base theme.

Color Customization

Primary Color

Your primary color is used for:

• Navigation links and hover states
• Button backgrounds
• Headings (optional)
• Accent elements throughout the site

Choose a color that matches your author brand. Genre guidelines:

• Romance: Warm colors (rose, coral, burgundy)
• Fantasy: Rich colors (deep purple, emerald, gold)
• Thriller: Dark colors (charcoal, navy, crimson)
• Non-Fiction: Professional colors (blue, teal, slate)
• Children's/YA: Bright colors (teal, orange, lime)

Background Color

• Light themes: white or off-white
• Dark themes: charcoal, navy, or near-black

How to Set Colors

1. In the Design settings, find "Primary Color"
2. Click the color swatch to open the color picker
3. Select your desired color or enter a hex code (e.g., #7C3AED for purple)
4. Preview the change on the right-side preview
5. Click "Save Changes"

Font Customization

Available Font Families

BookAuth offers a curated selection of web fonts:

Font	Style	Best For
Inter	Clean sans-serif	Modern, tech-forward authors
Roboto	Readable sans-serif	General purpose, high readability
Merriweather	Elegant serif	Literary fiction, historical fiction
Playfair Display	Dramatic serif	Romance, luxury branding
Open Sans	Neutral sans-serif	Non-fiction, business
Lora	Balanced serif	Versatile, works for most genres

Setting Your Font

1. In Design settings, find "Font Family"
2. Select from the dropdown
3. Preview changes in the live preview
4. Click "Save Changes"

Header Style

Choose between two header layouts:

• Full Width — header spans the entire page width with navigation links
• Centered — header content and navigation are centered in a container

Custom CSS (Pro/Business)

For advanced styling control, Pro and Business plan authors can add custom CSS:

1. In Design settings, scroll to "Custom CSS"
2. Enter your CSS in the code editor
3. Preview changes live
4. Click "Save Changes"

Common Custom CSS Examples

Change heading colors:

h1, h2, h3 {
  color: #2D1B69;
}

Add a gradient to your hero section:

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Custom link hover effects:

a:hover {
  color: #e74c3c;
  text-decoration: underline;
}

Round your book cover images:

.book-cover img {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Pro Tip: Use your browser's DevTools (right-click → Inspect) to find the CSS class names of elements you want to style. Then add your overrides in the Custom CSS editor.

Resetting to Defaults

If your customizations don't look right:

1. Click "Reset to Defaults" at the bottom of the Design settings
2. Confirm the reset
3. All theme customizations are reverted to the original theme defaults

Your content (pages, blog posts) is never affected by design resets.

Frequently Asked Questions

Q: Can I use a custom theme not in the list?
A: Currently, you must choose from the available themes. Custom theme uploads are planned for a future update.

Q: Does my custom CSS persist across theme switches?
A: Yes. Your custom CSS is saved separately from the theme. When you switch themes, your CSS overrides remain active.

Q: My colors look different on my phone. Why?
A: Screen color rendering varies between devices. Test your color choices on multiple devices (phone, tablet, laptop) before finalizing.

Q: Can I use custom fonts not in the list?
A: Custom font uploads are not currently supported. The available fonts cover the most popular choices for author websites. You can load additional Google Fonts via custom CSS on Pro/Business plans.

Related Articles

• Your Author Website — Overview
• Website Navigation — Headers & Footers
• Writing Blog Posts
• SEO Settings for Your Author Website