Embed CSS Customization Guide
Complete guide to customizing your embed leaderboards with CSS. Learn about all available classes, animations, and how to create custom themes.
Getting Started
Learn how to customize your embed leaderboards with CSS
How CSS Customization Works
Rankora embed leaderboards use a comprehensive class naming system that allows you to customize every aspect of the appearance. All classes are prefixed with embed-to avoid conflicts with your existing styles. We also provide 8 professional CSS templates with enhanced animations and visual effects.
CSS Injection Methods
- Custom CSS Field: Use the custom CSS field in your embed settings (Indie+ plans)
- External Stylesheet: Include your CSS in your page's stylesheet
- Inline Styles: Apply styles directly to the embed container
Enhanced CSS Sanitization
Our advanced sanitization system provides comprehensive security while supporting sophisticated CSS features:
🔒 Security Features
- Dangerous content blocking (javascript:, expression())
- XSS protection and script injection prevention
- URL validation and trusted domain enforcement
- Property-value context validation
- DoS protection through complexity limits
- HTTPS enforcement (PRO plan)
✨ Supported Features
- Pseudo-elements (::before, ::after)
- Complex selectors and combinators
- Advanced animations and keyframes
- Grid patterns and gradients
- Custom CSS properties (--variables)
- Media queries (PRO plan)
Security Warnings:
CSS containing dangerous content, unsafe URLs, or exceeding plan limits will be automatically removed or modified.
Class Naming Convention
All embed classes follow a consistent naming pattern:
embed-Prefix for all embed classesembed-{section}-{element}Section and element namingembed-{section}-{element}-{variant}Variant-specific classesPlan-Specific Features & Limits
Free Plan
Basic✅ Included Features
- • Basic CSS properties (colors, fonts, spacing)
- • Simple class selectors only
- • Basic layout properties
- • Typography properties
- • Basic flexbox properties
- • Enhanced security protection
⚠️ Limitations
- • No pseudo-elements (::before, ::after)
- • No animations or keyframes
- • No external URLs or images
- • No custom CSS properties
- • No media queries
Technical Limits:
• Max 50 rules
• Max 3 selectors per rule
• Max 10 declarations per rule
• Max 50KB CSS size
• Max 3 nesting levels
Starter Plan
Enhanced✅ Included Features
- • All FREE plan features
- • Pseudo-elements and pseudo-classes
- • CSS animations and keyframes
- • Transitions and transforms
- • External URLs from trusted domains
- • Custom CSS properties (--variables)
- • Background images
⚠️ Limitations
- • No media queries or responsive design
- • Limited to trusted domains for URLs
- • No advanced CSS properties
- • Moderate complexity limits
Technical Limits:
• Max 200 rules
• Max 8 selectors per rule
• Max 20 declarations per rule
• Max 200KB CSS size
• Max 6 nesting levels
Pro Plan
Professional✅ Included Features
- • All STARTER plan features
- • Media queries for responsive design
- • All CSS selectors (including *, >, +, ~)
- • Comprehensive CSS properties
- • Advanced CSS functions and values
- • HTTPS URLs from any domain
- • Advanced animations and effects
- • Full template access
⚠️ Limitations
- • Only dangerous content blocked
- • Only HTTPS URLs allowed (no HTTP)
- • No malicious scripts or XSS
- • No dangerous property combinations
Technical Limits:
• Max 2000 rules
• Max 15 selectors per rule
• Max 30 declarations per rule
• Max 500KB CSS size
• Max 10 nesting levels
Quick Reference
Essential information for CSS customization
Common Customizations
- • Change colors:
.embed-title,.embed-entry - • Modify layout:
.embed-container,.embed-card - • Style entries:
.embed-entry,.embed-rank-badge - • Customize animations:
--embed-animation-*variables
Enhanced Features
- • Use pre-built templates for quick setup
- • Pseudo-elements:
::before,::after - • Grid patterns:
repeating-linear-gradient - • Complex selectors:
:nth-child() - • Advanced animations:
@keyframes
Best Practices
- • Use specific selectors instead of
!important - • Test on different screen sizes
- • Consider dark/light mode compatibility
- • Use CSS custom properties for consistency
- • Leverage template backgrounds for visual impact
- • Avoid
!importantunless absolutely necessary
Template Categories
Gaming
- • Pixel Warrior
- • Neon Esports
- • Battle Royale
Fantasy
- • Fantasy Realm
- • Space Command
Retro
- • Racing Circuit
- • Retro Arcade
Cyberpunk
- • Cyberpunk Hacker