Styling

Customize the visual appearance of your theme with CSS.

CSS Structure

Organize CSS files by purpose:

public/assets/theme/my-theme/css/
├── main.css              # Main stylesheet (loaded everywhere)
├── admin.css             # Admin panel specific
├── dashboard.css         # Dashboard specific
├── auth.css              # Login/register pages
├── components/
│   ├── buttons.css
│   ├── cards.css
│   ├── forms.css
│   └── tables.css
└── utilities.css         # Helper classes

Including Stylesheets

In your template:

{% block head_stylesheets %}
    {{ parent() }}  {# Include default styles #}

    {# Your theme styles #}
    <link rel="stylesheet" href="{{ asset('assets/theme/my-theme/css/main.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/theme/my-theme/css/components/buttons.css') }}">
{% endblock %}

Bootstrap Customization

PteroCA uses Bootstrap. Customize Bootstrap variables:

/* Override Bootstrap variables */
:root {
    --bs-primary: #007bff;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #17a2b8;

    /* Colors */
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #212529;
    --bs-link-color: #007bff;

    /* Spacing */
    --bs-spacer: 1rem;

    /* Typography */
    --bs-font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-font-size-base: 1rem;
    --bs-line-height-base: 1.5;

    /* Borders */
    --bs-border-radius: 0.375rem;
    --bs-border-width: 1px;
    --bs-border-color: #dee2e6;
}

Dark Mode

Implement dark mode support:

/* Light mode (default) */
:root {
    --background-color: #ffffff;
    --text-color: #212529;
    --border-color: #dee2e6;
}

/* Dark mode */
[data-theme="dark"] {
    --background-color: #1a1a1a;
    --text-color: #e9ecef;
    --border-color: #343a40;
}

/* Apply colors */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.card {
    background-color: var(--background-color);
    border-color: var(--border-color);
}

Toggle dark mode with JavaScript:

// Toggle dark mode
function toggleDarkMode() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
}

// Load saved theme
document.addEventListener('DOMContentLoaded', function() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', savedTheme);
});

Custom Components

Custom buttons:

.btn-custom {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    transition: transform 0.2s;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

Custom cards:

.card-custom {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}

.card-custom:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card-custom .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 1rem 1rem 0 0;
    padding: 1rem 1.5rem;
}

Responsive Design

Ensure mobile compatibility:

/* Desktop */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Tablet */
@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 576px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .btn-group {
        flex-direction: column;
    }

    .navbar-brand {
        font-size: 1.2rem;
    }
}

Bootstrap Breakpoints

PteroCA uses Bootstrap's default breakpoints:

Breakpoint	Class prefix	Dimensions
X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Common CSS Patterns

Glassmorphism effect:

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Gradient backgrounds:

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Smooth animations:

.animated-element {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animated-element:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

CSS Best Practices

1. Scope your styles - avoid affecting core elements

2. Use CSS variables - easier theme customization

3. Prefix custom classes - avoid conflicts (e.g., .mytheme-card)

4. Minimize !important - use specificity instead

5. Optimize for performance - minify for production

6. Test across browsers - ensure compatibility

7. Make responsive - test on mobile devices

Performance Tips

Minimize file size:

# Use a CSS minifier for production
npx clean-css-cli -o main.min.css main.css

Use efficient selectors:

/* ✓ Good - specific and fast */
.card-header { }
.btn-primary { }

/* ✗ Bad - overly specific, slow */
div.container > div.row > div.col > div.card > div.card-header { }

Avoid expensive properties:

/* These can cause performance issues if overused */
box-shadow: /* OK in moderation */
filter: /* Can be expensive */
transform: /* Use transform instead of position for animations */

Debugging CSS

Browser DevTools:

1. Right-click element → Inspect

2. Check Computed tab for applied styles

3. Use Styles tab to modify styles in real-time

4. Check for overridden styles (crossed out)

Common issues:

• Styles not applying → Check selector specificity

• Layout broken → Inspect box model in DevTools

• Responsive issues → Use responsive design mode

• Performance → Use Lighthouse audit

Related Guides

• Theme Structure - File organization

• Overriding Templates - Customize templates

• JavaScript - Add interactivity

• Testing - Quality assurance

External Resources

• Bootstrap Documentation

• CSS-Tricks

• MDN CSS Reference

• Can I Use - Browser compatibility