Frontend Customization

This guide covers customizing the frontend appearance, including theme structure, page customization, component usage, and styling guidelines.

Table of Contents

1. Overview
2. Theme Structure
3. Customizing Pages
4. Adding Custom Components
5. Styling Guidelines
6. Frontend Assets

Overview

What Can Be Customized

• ✅ Page layouts
• ✅ Component styling
• ✅ Color schemes
• ✅ Typography
• ✅ Custom CSS
• ✅ Frontend templates

Prerequisites

• Basic HTML/CSS knowledge
• Understanding of Vue.js (helpful)
• Access to codebase
• Development environment

Theme Structure

Frontend Directory Structure

Location: resources/js/Pages/Frontend/

Structure:

Frontend/
├── Components/        # Reusable components
├── Layouts/          # Layout components
├── _landing/         # Landing page
├── Blog.vue          # Blog listing
├── BlogPost.vue      # Blog post detail
├── Contact.vue       # Contact page
└── ...

Layout Components

Main Layout:

• Header
• Footer
• Navigation
• Content area

Page Layouts:

• Default layout
• Full-width layout
• Sidebar layout
• Custom layouts

Customizing Pages

Page Templates

Location

Pages: resources/js/Pages/Frontend/

Examples:

• Blog.vue - Blog listing
• BlogPost.vue - Blog post detail
• Contact.vue - Contact page

Modifying Pages

What Can Be Changed:

• Layout: Page structure
• Content: Display content
• Styling: CSS classes
• Components: Component usage

Best Practices:

• Keep original as backup
• Document changes
• Test thoroughly
• Use version control

Custom CSS

Design Settings

Location: Settings → Design → Custom CSS

Add Custom CSS:

/* Custom page styling */
.page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 0;
}

.custom-section {
    padding: 40px 0;
    background-color: #f8f9fa;
}

Adding Custom Components

Component Location

Location: resources/js/Components/

Structure:

Components/
├── Common/           # Common components
├── Forms/            # Form components
├── Layout/           # Layout components
└── ...

Creating Components

Step 1: Create Component File

Example:

<template>
  <div class="custom-component">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  content: String
})
</script>

<style scoped>
.custom-component {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}
</style>

Step 2: Use Component

In Page:

<template>
  <CustomComponent 
    title="My Title" 
    content="My Content" 
  />
</template>

<script setup>
import CustomComponent from '@/Components/Custom/CustomComponent.vue'
</script>

Styling Guidelines

CSS Organization

Use Design Settings

Custom CSS:

• Add via Design Settings
• Global styles
• Override defaults

Component Styles

Scoped Styles:

<style scoped>
.component-class {
  /* Component-specific styles */
}
</style>

Color Scheme

Theme Colors

Configuration:

• Primary color
• Secondary color
• Background colors
• Text colors

Usage:

• Use CSS variables
• Consistent colors
• Accessible contrast

Typography

Font Configuration

Settings:

• Font family
• Font sizes
• Line heights
• Font weights

Best Practices:

• Use web fonts
• Optimize loading
• Fallback fonts
• Readable sizes

Frontend Assets

Asset Management

Compiling Assets

Development:

npm run dev

Production:

npm run build

Asset Optimization

Optimization:

• Minify CSS/JS
• Compress images
• Use CDN
• Cache assets

Image Optimization

Best Practices

1. Optimize Images:

   • Compress before upload
   • Use appropriate formats
   • Responsive images
   • Lazy loading

2. Image Formats:

   • JPG for photos
   • PNG for graphics
   • WebP for modern browsers
   • SVG for icons

Best Practices

Customization

1. Keep It Organized:

   • Group related changes
   • Use consistent naming
   • Document modifications

2. Test Thoroughly:

   • Test on multiple devices
   • Test browsers
   • Test responsiveness

3. Performance:

   • Optimize assets
   • Minimize CSS/JS
   • Use caching
   • Lazy load images

Related Documentation

• Design Settings
• Pages Module
• Module Customization