Appearance

Design Settings ​

The Design Settings allow you to customize the visual appearance of your website, including custom CSS, theme colors, typography, and other design elements.

Table of Contents ​

  1. Overview
  2. Accessing Design Settings
  3. Custom CSS
  4. Theme Customization
  5. Color Schemes
  6. Typography Settings
  7. Layout Settings
  8. Best Practices

Overview ​

Features ​

  • ✅ Custom CSS editor
  • ✅ Theme color customization
  • ✅ Typography settings
  • ✅ Layout options
  • ✅ Logo and branding
  • ✅ Custom styles
  • ✅ Responsive design settings

Admin Routes ​

  • Design Settings: /admin/settings/design

Accessing Design Settings ​

From Admin Panel ​

  1. Log in to admin panel
  2. Navigate to Settings → Design
  3. Or go directly to: /admin/settings/design

Permissions Required ​

  • Manage Settings: manage-settings permission

Custom CSS ​

CSS Editor ​

Accessing CSS Editor ​

  1. Go to Design Settings:

    • Navigate to Design Settings page
    • Find Custom CSS section

  2. Open Editor:

    • Click Edit CSS button
    • CSS editor opens
    • Code editor interface

Writing Custom CSS ​

Editor Features:

  • Syntax Highlighting: Color-coded CSS
  • Line Numbers: Easy navigation
  • Auto-Complete: CSS property suggestions
  • Error Detection: Syntax error highlighting

CSS Structure:

css
/* Custom Styles */
.header {
    background-color: #ffffff;
}

.footer {
    padding: 20px 0;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .header {
        padding: 10px;
    }
}

Best Practices ​

  1. Use Specific Selectors:

    • Target specific elements
    • Avoid global overrides
    • Use classes/IDs

  2. Organize Code:

    • Group related styles
    • Add comments
    • Use consistent formatting

  3. Test Responsively:

    • Test on mobile
    • Test on tablet
    • Test on desktop

CSS Validation ​

Before Saving ​

  1. Check Syntax:

    • Verify valid CSS
    • Check for errors
    • Fix any issues

  2. Preview Changes:

    • Use preview mode
    • Check appearance
    • Verify layout

  3. Save:

    • Click Save CSS
    • Changes applied
    • CSS loaded on site

CSS Examples ​

Common Customizations ​

Header Customization:

css
.site-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Button Styling:

css
.btn-primary {
    background-color: #635BFF;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #4F46E5;
    transform: translateY(-2px);
}

Typography:

css
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333333;
}

h1, h2, h3 {
    font-weight: 700;
    color: #1a1a1a;
}

Theme Customization ​

Theme Options ​

Available Themes ​

Default Theme:

  • Clean, modern design
  • Responsive layout
  • Customizable colors

Custom Theme:

  • Fully customizable
  • Custom CSS support
  • Brand-specific design

Theme Settings ​

Primary Color ​

Configuration:

  • Color Picker: Select primary color
  • Hex Code: Enter hex code
  • RGB Values: Enter RGB values
  • Preview: See color preview

Usage:

  • Buttons
  • Links
  • Accent elements
  • Brand colors

Secondary Color ​

Configuration:

  • Color Picker: Select secondary color
  • Hex Code: Enter hex code
  • Complementary: Choose complementary color

Usage:

  • Secondary buttons
  • Hover states
  • Accent highlights

Background Colors ​

Configuration:

  • Page Background: Main background color
  • Content Background: Content area color
  • Header Background: Header color
  • Footer Background: Footer color

Color Schemes ​

Predefined Schemes ​

Available Schemes:

  • Light: Light background, dark text
  • Dark: Dark background, light text
  • Auto: Follows system preference
  • Custom: Custom color scheme

Custom Color Scheme ​

Creating Custom Scheme:

  1. Select Base Colors:

    • Choose primary color
    • Choose secondary color
    • Choose background colors

  2. Configure Text Colors:

    • Heading colors
    • Body text color
    • Link colors

  3. Save Scheme:

    • Click Save
    • Scheme applied
    • Preview changes

Typography Settings ​

Font Configuration ​

Font Family ​

Options:

  • System Fonts: Arial, Helvetica, etc.
  • Web Fonts: Google Fonts, custom fonts
  • Custom Fonts: Upload font

Google Fonts Integration ​

Using Google Fonts:

  1. Select Font:

    • Choose from Google Fonts
    • Preview font
    • Select weights

  2. Configure:

    • Font name
    • Font weights
    • Character sets

  3. Apply:

    • Font loaded automatically
    • Applied to site
    • Cached for performance

Custom Fonts ​

Uploading Custom Fonts:

  1. Upload Font Files:

    • Upload .woff, .woff2, .ttf files
    • Multiple formats supported
    • Font files stored

  2. Configure:

    • Font family name
    • Font weights
    • Font styles

  3. Apply:

    • Font available in editor
    • Applied to site
    • Loaded from server

Typography Settings ​

Heading Fonts ​

Configuration:

  • H1 Font: Heading 1 font
  • H2 Font: Heading 2 font
  • H3 Font: Heading 3 font
  • Font Sizes: Heading sizes
  • Font Weights: Heading weights

Body Font ​

Configuration:

  • Font Family: Body text font
  • Font Size: Base font size
  • Line Height: Line spacing
  • Font Weight: Text weight

Configuration:

  • Link Color: Default link color
  • Hover Color: Hover state color
  • Underline: Show/hide underline
  • Font Weight: Link weight

Layout Settings ​

Layout Options ​

Container Width ​

Options:

  • Full Width: 100% width
  • Boxed: Fixed max width
  • Custom: Custom width

Configuration:

  • Max Width: Maximum container width
  • Padding: Container padding
  • Responsive: Mobile adjustments

Header Layout ​

Options:

  • Standard: Traditional header
  • Centered: Centered logo/menu
  • Minimal: Simplified header
  • Sticky: Sticky header on scroll

Options:

  • Standard: Multi-column footer
  • Minimal: Simple footer
  • Full Width: Full-width footer
  • Centered: Centered content

Spacing Settings ​

Global Spacing ​

Configuration:

  • Section Padding: Space between sections
  • Content Padding: Content area padding
  • Element Margin: Element spacing

Responsive Spacing ​

Mobile Adjustments:

  • Reduced Padding: Smaller padding on mobile
  • Stacked Layout: Vertical stacking
  • Touch-Friendly: Larger touch targets

Best Practices ​

CSS Organization ​

  1. Use Comments:

    • Document sections
    • Explain complex styles
    • Mark important changes

  2. Group Related Styles:

    • Header styles together
    • Footer styles together
    • Component styles grouped

  3. Maintain Consistency:

    • Use consistent naming
    • Follow conventions
    • Keep structure organized

Performance ​

  1. Minimize CSS:

    • Remove unused styles
    • Combine similar rules
    • Optimize selectors

  2. Use Efficient Selectors:

    • Avoid deep nesting
    • Use specific selectors
    • Avoid !important when possible

  3. Test Performance:

    • Check load times
    • Test on slow connections
    • Optimize as needed

Responsive Design ​

  1. Mobile-First:

    • Design for mobile first
    • Add desktop styles
    • Test all breakpoints

  2. Test Devices:

    • Test on real devices
    • Use browser dev tools
    • Check various screen sizes

  3. Touch-Friendly:

    • Adequate touch targets
    • Readable text sizes
    • Easy navigation

Troubleshooting ​

CSS Not Applying ​

Solutions:

  1. Check CSS syntax
  2. Verify selector specificity
  3. Clear browser cache
  4. Check for conflicting styles
  5. Use browser dev tools

Colors Not Updating ​

Solutions:

  1. Verify color codes
  2. Clear cache
  3. Check theme settings
  4. Verify CSS is saved
  5. Refresh page

Fonts Not Loading ​

Solutions:

  1. Verify font files uploaded
  2. Check font paths
  3. Verify font formats
  4. Check browser console
  5. Test font loading

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

Released under the MIT License.

Copyright © 2024 OmniSuite CMS