Skip to content

Customization

Jump to bottom
Alee Javed edited this page Mar 1, 2026 · 1 revision

Customization Guide

🎨 Color Customization

Access Colors

Go to Appearance → Customize → Colors

Color Options

Setting Controls Default Usage
Accent Color Links, buttons, highlights #ff6b35 (Orange) Navigation, hero name, buttons, timeline
Background Color Main site background #ffffff (White) Page backgrounds, content areas
Text Color Main text content #1a1a1a (Dark) Headings, paragraphs, hero text
Muted Text Secondary text #666666 (Gray) Subtitles, metadata, dates
Border Color Borders and dividers #e0e0e0 (Light gray) Card borders, input fields

Popular Color Schemes

Dark Theme

  • Background: #1a1a1a
  • Text: #ffffff
  • Muted: #cccccc
  • Border: #444444
  • Accent: #ff6b35

Blue Theme

  • Background: #f8f9fa
  • Text: #003366
  • Muted: #666699
  • Border: #336699
  • Accent: #0073aa

Green Theme

  • Background: #f8fff8
  • Text: #2d5016
  • Muted: #5a7a3a
  • Border: #8fb06a
  • Accent: #28a745

🦸 Hero Section Customization

Access Hero Settings

Go to Appearance → Customize → Hero

Options

Setting Description Default
Hero Greeting Opening message "Hello!"
Hero Name Your name with smart breaking "Alee Javed"
Hero Subtitle Description text "and I am a student and tech enthusiast"

Smart Name Breaking

The theme automatically breaks long names:

  • "John Smith" → "John" + "Smith"
  • "Mary Jane Watson" → "Mary" + "Jane Watson"
  • "Jean-Claude Van Damme" → "Jean-Claude" + "Van Damme"

🔗 Portfolio Links Customization

Access Links Settings

Go to Appearance → Customize → Portfolio Links

Portfolio Buttons

Add Custom Buttons

  1. Click "Portfolio buttons"
  2. Add Button to create new button
  3. Set Name: Button display text
  4. Set Link: URL or email address
  5. Remove Button: Click "Remove" to delete

Default Buttons

  • LinkedIn - Add your LinkedIn profile URL
  • GitHub - Add your GitHub profile URL

Contact Information

Setting Description Example
Email Contact email address contact@example.com
Location Your location 📍 Nottingham, UK

📧 Header Customization

Access Header Settings

Go to Appearance → Customize → Hero

Header Site Name

  • Setting: "Header site name"
  • Default: "Alee Javed"
  • Usage: Appears in header on all pages
  • Format: [Your Name] ● [Page Name]

📱 Responsive Behavior

Mobile Adaptations

  • Hero text - Responsive font sizing
  • Navigation - Mobile-friendly menu
  • Buttons - Touch-friendly sizing
  • Cards - Stacked layout on small screens

Breakpoints

  • Desktop: 980px+
  • Tablet: 768px-979px
  • Mobile: 0-767px

🎯 Advanced Customization

CSS Variables

The theme uses CSS variables for easy customization:

:root {
  --accent: #ff6b35;      /* Links, buttons, highlights */
  --bg: #ffffff;          /* Main background */
  --text: #1a1a1a;        /* Main text color */
  --muted: #666666;       /* Secondary text */
  --border: #e0e0e0;      /* Borders and dividers */
}

Custom CSS

Add custom CSS in Appearance → Customize → Additional CSS:

/* Example: Custom button styling */
.hero-btn {
  border-radius: 4px;
  text-transform: uppercase;
}

/* Example: Custom card shadow */
.timeline-card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

🔧 Troubleshooting

Colors Not Applying

  1. Clear browser cache (Ctrl+F5)
  2. Clear WordPress cache (if using caching plugins)
  3. Check CSS conflicts with other plugins
  4. Verify file permissions

Customizer Not Saving

  1. Check WordPress memory limits
  2. Verify file permissions on theme folder
  3. Disable plugins temporarily
  4. Check for JavaScript errors

Layout Issues

  1. Check responsive breakpoints
  2. Verify image sizes
  3. Test in different browsers
  4. Check for plugin conflicts

📚 Related Documentation

Clone this wiki locally