Appearance

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:

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:

vue
<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:

vue
<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:

vue
<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:

bash
npm run dev

Production:

bash
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

Last Updated: [Date will be updated during final review]

Released under the MIT License.

Copyright © 2024 OmniSuite CMS