Skip to content

Birthday Cards

Jump to bottom
Alee Javed edited this page Mar 1, 2026 · 1 revision

Birthday Cards

The birthday card system creates interactive, animated greeting cards with scrapbook-style effects and customizable content.

🎂 Birthday Card Features

Core Functionality

  • Custom Content - Personalized messages and images
  • Scrapbook Animations - Interactive card effects
  • Image Support - Background and content images
  • Color Customization - Custom background colors
  • Responsive Design - Works on all devices
  • Popup Integration - Cards can trigger popups

Card Elements

Each birthday card includes:

  • Background Color - Customizable card background
  • Content - Rich text with formatting
  • Images - Background and content images
  • Animations - Hover and click effects
  • Responsive Layout - Mobile-friendly design

⚙️ Card Creation

Access Card Management

Go to Birthday Cards in WordPress admin menu

Create New Card

  1. Birthday Cards → Add New
  2. Card Title - Give your card a title
  3. Background Color - Choose card background
  4. Content - Add your message
  5. Images - Upload background/content images
  6. Publish card

Card Content Options

  • Rich Text Editor - Full formatting options
  • Image Upload - Multiple image support
  • Color Picker - Custom background colors
  • Preview Mode - See card before publishing

🎨 Card Design

Layout Structure

<div class="aj-card">
  <div class="aj-card-content">
    <div class="aj-card-text">
      <!-- Card content here -->
    </div>
    <div class="aj-card-images">
      <!-- Card images here -->
    </div>
  </div>
</div>

CSS Classes

  • .aj-card - Main card container
  • .aj-card-content - Content wrapper
  • .aj-card-text - Text content
  • .aj-card-images - Image container

Animation Effects

.aj-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.aj-card-content {
  transition: all 0.3s ease;
}

🔧 Advanced Features

Custom CSS Variables

:root {
  --card-bg: #fffef9;
  --card-text: #1a1a1a;
  --card-border: #e0e0e0;
}

JavaScript Interactions

// Card hover effects
document.addEventListener('DOMContentLoaded', function() {
  const cards = document.querySelectorAll('.aj-card');
  
  cards.forEach(card => {
    card.addEventListener('mouseenter', function() {
      this.classList.add('aj-card-hover');
    });
    
    card.addEventListener('mouseleave', function() {
      this.classList.remove('aj-card-hover');
    });
  });
});

Custom Animations

/* Scrapbook flip effect */
.aj-card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.aj-card:hover .aj-card-content {
  transform: rotateY(5deg);
}

📱 Responsive Design

Desktop (980px+)

  • Full size cards - Original dimensions
  • Rich animations - All effects enabled
  • Side-by-side - Multiple cards visible

Tablet (768px-979px)

  • Slightly smaller - Optimized for tablets
  • Touch-friendly - Larger tap targets
  • Maintains animations - Core effects preserved

Mobile (0-767px)

  • Full width - Cards use full width
  • Simplified animations - Performance optimized
  • Touch optimized - Better mobile experience

🎯 Customization Options

Custom CSS Examples

/* Custom card background */
.aj-card {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecaca 100%);
  border-radius: 15px;
}

/* Custom text styling */
.aj-card-text {
  font-family: 'Georgia', serif;
  color: #2c3e50;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Custom image effects */
.aj-card-images img {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

Custom JavaScript

// Add confetti effect
function createConfetti(element) {
  const confetti = document.createElement('div');
  confetti.className = 'confetti';
  confetti.style.cssText = `
    position: absolute;
    width: 10px;
    height: 10px;
    background: ${getRandomColor()};
    border-radius: 50%;
    pointer-events: none;
  `;
  
  element.appendChild(confetti);
  animateConfetti(confetti);
}

🔍 Troubleshooting

Cards Not Showing

  1. Check posts - Ensure cards are published
  2. Verify template - Check single-aj_card.php
  3. Clear cache - Browser and WordPress cache
  4. Check PHP errors - Look for function conflicts

Animations Not Working

  1. Check JavaScript - Ensure card scripts are loading
  2. Verify CSS - Check animation styles
  3. Test browser - Try different browsers
  4. Check conflicts - Plugin or theme conflicts

Styling Issues

  1. Check CSS - Ensure card styles are loading
  2. Verify variables - Ensure CSS variables are set
  3. Test responsive - Check different screen sizes
  4. Check images - Verify image paths

📚 Related Documentation

Clone this wiki locally