Articles on: Artists

Using Custom CSS (Advanced)

Advanced customization for artists who want complete control over their page styling.

Overview

For artists with CSS knowledge, Apprentice provides a Custom CSS editor that allows you to add your own styles to your public artist page. This advanced feature gives you complete control over layouts, animations, spacing, and any other visual elements beyond the standard color and font options. Custom CSS is applied on top of your theme and branding settings.

Step-by-Step Guide

Step 1: Access the Custom CSS Editor

Navigate to Artist Settings → Branding
Scroll down to the Custom CSS section
Click Enable Custom CSS (if not already enabled)
The CSS editor will appear

Step 2: Write Your Custom CSS

Enter your CSS code in the editor
Use standard CSS syntax
Target elements using class names or element selectors
Your CSS will be applied to your public artist page

Example CSS:

/* Custom header styling */
.artist-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 4rem 2rem;
  border-radius: 1rem;
}

/* Custom portfolio grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* Hover effects on portfolio items */
.portfolio-item:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Custom button styling */
.book-button {
  background: var(--brand-color);
  border: 2px solid var(--brand-color);
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.book-button:hover {
  background: transparent;
  color: var(--brand-color);
}

Step 3: Use CSS Variables

Apprentice provides CSS variables you can reference in your custom CSS:

var(--brand-color) - Your selected highlight color
var(--brand-bg-color) - Light background version of your color
var(--brand-border-color) - Border version of your color

Example:

.custom-badge {
  background-color: var(--brand-bg-color);
  border: 1px solid var(--brand-border-color);
  color: var(--brand-color);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}

Step 4: Preview Your Changes

As you type, the Live Preview panel updates
Check how your custom CSS affects different sections
Test on both light and dark themes if you use both
Make sure your styles work on mobile views

Step 5: Validate and Save

Click Validate CSS to check for syntax errors
Review any warnings or errors
Fix any issues highlighted by the validator
Click Save Branding to apply your custom CSS
Visit your public page to see the final result

Tips

Start Small: Begin with simple changes like padding or colors before tackling complex layouts
Use Variables: Leverage CSS variables for colors so your styles adapt if you change your branding
Test Responsiveness: Always test your custom CSS on mobile devices - add media queries as needed
Backup Your CSS: Copy your CSS to a text file before making major changes
Browser DevTools: Use browser inspector tools to find the correct class names and test CSS before adding it
Specificity: If your styles aren't applying, you may need more specific selectors (e.g., .artist-page .portfolio-item instead of just .portfolio-item)
Dark Mode: Remember to add dark: variants or use conditional styles for dark theme compatibility

Common CSS Selectors

Here are some common class names you can target:

/* Page sections */
.artist-header { }         /* Header area with your name/bio */
.artist-bio { }            /* Biography text */
.portfolio-section { }     /* Portfolio gallery container */
.flash-designs-section { } /* Flash designs area */
.booking-section { }       /* Booking CTA section */

/* Components */
.portfolio-item { }        /* Individual portfolio pieces */
.flash-card { }            /* Flash design cards */
.book-button { }           /* Primary booking buttons */
.contact-link { }          /* Contact/message links */

/* Layout */
.artist-page { }           /* Main page wrapper */
.content-wrapper { }       /* Content container */

Common Issues

Issue: My CSS isn't applying → Solution: Check CSS specificity. You may need to use more specific selectors or add !important (use sparingly).
Issue: Styles break on mobile → Solution: Add responsive media queries like @media (max-width: 768px) { } to adjust styles for smaller screens.
Issue: Dark mode looks broken → Solution: Test your custom CSS on both light and dark themes. Use theme-aware variables or add conditional styles.
Issue: Syntax error prevents saving → Solution: Use the validator to find errors. Common issues include missing semicolons, unclosed brackets, or invalid property values.
Issue: Changes don't show immediately → Solution: Clear your browser cache and hard refresh (Ctrl+Shift+R or Cmd+Shift+R).

Best Practices

Comment Your Code: Add comments to explain what each section does
Mobile-First: Write styles for mobile first, then add desktop enhancements
Use rem/em: Prefer relative units (rem, em, %) over fixed pixels for better scaling
Limit Animations: Excessive animations can distract from your work - use them sparingly
Maintain Accessibility: Ensure sufficient color contrast and don't hide important content
Test Thoroughly: Check your page on different browsers and devices before promoting it

Advanced Techniques

Custom Animations

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.portfolio-item {
  animation: fadeInUp 0.6s ease-out;
}

Responsive Grid Layouts

.custom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .custom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .custom-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Custom Typography

.artist-bio p {
  font-size: 1.125rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

.section-heading {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Security & Limitations

Allowed Properties: Most standard CSS properties are allowed
Restricted Properties: Certain properties that could break the page layout or affect other users are restricted
No External Resources: You cannot load external stylesheets or fonts via @import (use the Google Fonts selector instead)
No JavaScript: CSS only - JavaScript is not supported for security reasons
Scoped Styles: Your CSS only affects your artist page, not other pages on the platform

Updated on: 16/01/2026

Was this article helpful?

Thank you!