Customization

Make your Capricorn template truly yours. This guide covers everything you need to customize your template.

What You Can Customize

Visual Design

• Colors & Branding - Match your brand identity
• Typography - Fonts and text styles
• Layout & Spacing - Adjust margins and padding
• Images & Media - Replace with your own assets

Content

• Text Content - Update copy and messaging
• Navigation - Modify menus and links
• Pages - Add, remove, or modify pages
• Forms - Customize form fields and validation

Functionality

• Components - Modify UI components
• Features - Enable/disable features
• Integrations - Connect external services
• Environment Variables - Configure settings

Quick Start

1. Basic Customization (5 minutes)

Start with these quick wins:

# 1. Update colors in globals.css
app/globals.css
 
# 2. Replace images in public folder
public/images/
 
# 3. Update site metadata
app/layout.tsx

2. Content Updates (15 minutes)

Update your site content:

• Update text and images →
• Modify pages and structure

3. Styling (30 minutes)

Customize your brand:

• Change colors and fonts →
• Modify layouts and spacing

4. Advanced (1+ hour)

Deep customization:

• Customize components →
• Configure environment variables →
• Follow best practices →

Customization Guides

For Beginners

Never customized a template before? Start here:

1. Updating Content - Change text and images
2. Basic Styling - Colors and fonts
3. Environment Variables - Basic configuration

For Developers

Have coding experience? Dive deeper:

1. Styling & Theming - Advanced CSS/Tailwind
2. Components & UI - Modify React components
3. Best Practices - Professional development

Common Customization Tasks

Change Brand Colors

/* app/globals.css */
:root {
  --background: #ffffff;
  --foreground: #171717;
  --primary: #your-color;
  --secondary: #your-color;
}

Full Styling Guide →

Update Site Name & Logo

// app/layout.tsx
export const metadata = {
  title: "Your Site Name",
  description: "Your description",
}

Replace Images

# Add your images to
public/images/
 
# Then update references
<Image src="/images/your-image.jpg" alt="Description" />

Add New Pages

// Create: app/new-page/page.tsx
export default function NewPage() {
  return <div>Your content</div>
}
 
// Accessible at: /new-page

Learn More About Structure →

Before You Start

Backup Your Template

Always create a backup before making changes:

# Copy your entire template folder
cp -r your-template your-template-backup

Or use Git:

git init
git add .
git commit -m "Initial backup before customization"

Test Your Changes

After customizing:

1. Test locally - Make sure npm run dev works
2. Test build - Run npm run build successfully
3. Test all pages - Click through every page
4. Test mobile - Check responsive design

Customization Checklist

Use this checklist to track your customization progress:

Essential

• Update site name and description
• Change brand colors
• Replace logo and favicon
• Update homepage content
• Replace placeholder images
• Update contact information

Important

• Customize navigation menu
• Update all page content
• Configure environment variables
• Set up forms and validation
• Add your own images
• Customize footer

Optional

• Modify component styles
• Add new pages
• Customize animations
• Add analytics tracking
• Configure SEO metadata
• Set up email integrations

Tips for Success

Start Small

Don’t try to customize everything at once:

1. Make one change
2. Save and test
3. Verify it works
4. Move to next change

Use Browser DevTools

Test styles in real-time:

1. Right-click element → “Inspect”
2. Modify styles in DevTools
3. Copy working styles to your files

Keep Original Files

Before deleting or heavily modifying:

# Rename instead of delete
mv original-file.tsx original-file.backup.tsx

Document Your Changes

Keep notes on what you’ve customized:

# CUSTOMIZATION_LOG.md
 
## 2024-01-15
- Changed primary color to #1a73e8
- Updated homepage hero text
- Replaced all images in /about

Common Questions

Q: Will updates overwrite my customizations? A: Updates should preserve your changes, but always backup first.

Q: Can I revert my changes? A: Yes, if you use Git or keep backups.

Q: What if I break something? A: Restore from backup or check Troubleshooting.

Q: Do I need coding knowledge? A: Basic customization (colors, text, images) requires minimal coding. Advanced customization needs React/TypeScript knowledge.

Get Help

Stuck on customization?

• Email: support@capricorn.engineering
• Documentation: Browse specific guides below
• Troubleshooting: Common Issues

Next Steps

Choose where to start:

1. Complete Beginner? → Update Content First
2. Want to Change Colors? → Styling Guide
3. Need to Configure Settings? → Environment Variables
4. Ready for Advanced? → Components Guide

Remember: Customization is iterative. Start simple and build up! 🎨