Welcome to ShalomTemple

ShalomTemple is a premium HTML template designed specifically for synagogues, Jewish communities, and religious organizations. Built with modern web technologies including Tailwind CSS, this template offers three distinct homepage layouts, comprehensive inner pages, and full RTL (Right-to-Left) language support.

Key Features

• 3 Homepage Layouts: Choose from Traditional, Modern, or Classic designs
• Fully Responsive: Perfect display on all devices from mobile to desktop
• RTL Support: Built-in support for Hebrew and other RTL languages
• Tailwind CSS: Utility-first CSS framework for easy customization
• SEO Optimized: Clean code structure with proper meta tags
• Modern JavaScript: Vanilla JS with no jQuery dependency
• Complete Pages: About, Events, Sermons, Contact, and 404 pages included

What's Included

Quick Start Guide

Follow these simple steps to get your ShalomTemple website up and running quickly.

Step 1: Extract Files

Extract the downloaded ZIP file to your desired location. You'll see the complete folder structure with all template files organized and ready to use.

Step 2: Choose Your Homepage

The template includes three homepage options:

• index.html - Traditional welcome layout (default)
• home-v2.html - Modern events-focused layout
• home-v3.html - Classic heritage-focused layout

Rename your preferred layout to index.html to make it your default homepage.

Step 3: Customize Content

Open your chosen HTML files in a text editor and replace the placeholder content with your synagogue's information:

• Update synagogue name and contact information
• Replace placeholder images with your own photos
• Modify service times and event information
• Update Rabbi and staff information

Step 4: Test Locally

Open the HTML files in your web browser to preview your changes. For best results, use a local web server (like Live Server in VS Code) to test all functionality.

Template Organization

Understanding the folder structure will help you navigate and customize the template efficiently.

ShalomTemple/
├── assets/
│   ├── css/
│   │   └── custom.css          # Custom styles and utilities
│   ├── js/
│   │   └── main.js            # Main JavaScript functionality
│   └── images/
│       ├── synagogue_interior_1.jpg
│       ├── synagogue_interior_2.jpg
│       ├── synagogue_interior_3.jpg
│       ├── synagogue_interior_4.jpg
│       └── jewish_community_1.jpg
├── pages/
│   ├── about.html             # About Us page
│   ├── events.html            # Events page with RSVP
│   ├── sermons.html           # Sermons library
│   └── contact.html           # Contact page with map
├── index.html                 # Home v1 (default)
├── home-v2.html              # Home v2 (modern)
├── home-v3.html              # Home v3 (classic)
├── demos.html                # Demo selector page
├── documentation.html        # This documentation
├── 404.html                  # Custom error page
└── README.md                 # Basic information

Key Files Explained

Personalizing Your Template

Learn how to customize colors, fonts, content, and images to match your synagogue's brand and identity.

Changing Colors

The template uses a custom color palette defined in the Tailwind configuration. To change colors, update the color values in the tailwind.config section found in each HTML file:

tailwind.config = {
    theme: {
        extend: {
            colors: {
                'temple-blue': {
                    50: '#eff6ff',   // Lightest blue
                    100: '#dbeafe',
                    // ... more shades
                    900: '#1e3a8a',  // Darkest blue
                },
                'temple-gold': {
                    50: '#fffbeb',   // Lightest gold
                    100: '#fef3c7',
                    // ... more shades
                    900: '#78350f',  // Darkest gold
                }
            }
        }
    }
}

Updating Fonts

The template uses Google Fonts (Playfair Display and Merriweather). To change fonts:

1. Choose your fonts from Google Fonts (included locally)
2. Update the Google Fonts link in the HTML head section
3. Modify the font family configuration in Tailwind config

<!-- In HTML head -->
<link href="../assets/css/fonts.css" rel="stylesheet">

<!-- In Tailwind config -->
fontFamily: {
    'serif': ['Your Serif Font', 'serif'],
    'body': ['Your Body Font', 'sans-serif'],
}

Replacing Images

To replace template images with your own:

1. Prepare your images in appropriate sizes (recommended: 1920x1080 for hero images, 800x600 for content images)
2. Save them in the assets/images/ folder
3. Update the image paths in HTML files
4. Ensure images are optimized for web (use WebP format when possible)

Modifying Content

Key areas to customize include:

• Synagogue Name: Update all instances of "ShalomTemple"
• Contact Information: Phone numbers, email addresses, physical address
• Service Times: Update Shabbat and daily service schedules
• Staff Information: Replace Rabbi and staff details with your team
• Events: Update with your actual upcoming events

Right-to-Left Language Implementation

ShalomTemple includes comprehensive RTL (Right-to-Left) support for Hebrew and other RTL languages. The template automatically adjusts layout, spacing, and text direction.

Enabling RTL Mode

To enable RTL mode, simply change the dir attribute in the HTML tag:

<!-- For LTR (default) -->
<html lang="en" dir="ltr">

<!-- For RTL -->
<html lang="he" dir="rtl">

RTL Toggle Functionality

The template includes a built-in RTL toggle button. Users can switch between LTR and RTL modes dynamically using the language toggle in the header.

// RTL Toggle Implementation
const rtlToggle = document.getElementById('rtl-toggle');
rtlToggle.addEventListener('click', function() {
    const isRTL = document.documentElement.dir === 'rtl';
    document.documentElement.dir = isRTL ? 'ltr' : 'rtl';
    document.documentElement.lang = isRTL ? 'en' : 'he';
});

RTL-Specific Styling

Tailwind CSS provides RTL-specific utilities that are automatically applied:

• rtl:text-right - Right-align text in RTL mode
• rtl:space-x-reverse - Reverse horizontal spacing
• rtl:mr-3 - Apply margin-right in RTL mode
• ltr:ml-3 - Apply margin-left in LTR mode

Hebrew Content Integration

To add Hebrew content:

1. Use proper Hebrew fonts (the template includes web-safe Hebrew fonts)
2. Ensure proper text encoding (UTF-8)
3. Test with actual Hebrew text for proper display
4. Consider mixed content (Hebrew + English) layouts

Reusable Components

ShalomTemple includes several reusable components that you can use throughout your website.

Button Styles

The template includes several pre-defined button styles:

Card Components

Use the card component for consistent content containers:

<div class="card p-6">
    <h3 class="font-serif font-semibold text-xl text-temple-blue-900 mb-4">
        Card Title
    </h3>
    <p class="text-gray-600">
        Card content goes here...
    </p>
</div>

Modal Components

The template includes modal functionality for RSVP forms and other interactions:

<div id="modal-id" class="fixed inset-0 bg-black bg-opacity-50 modal-overlay z-50 hidden">
    <div class="modal-content bg-white rounded-2xl max-w-md w-full p-8">
        <!-- Modal content -->
    </div>
</div>

Form Components

Consistent form styling across all pages:

<div>
    <label class="block text-sm font-medium text-gray-700 mb-2">Label</label>
    <input type="text" 
           class="w-full px-4 py-3 border border-gray-300 rounded-lg 
                  focus:ring-2 focus:ring-temple-blue-500 focus:border-transparent">
</div>

Animation Classes

Built-in animation classes for smooth interactions:

• .fade-up - Fade in from bottom
• .fade-left - Fade in from right
• .fade-right - Fade in from left
• .slide-down - Slide down animation

Publishing Your Website

Once you've customized your template, follow these steps to deploy your synagogue website.

Pre-Deployment Checklist

• ✅ Test all pages in multiple browsers (Chrome, Firefox, Safari, Edge)
• ✅ Verify responsive design on mobile devices
• ✅ Check all links and navigation
• ✅ Test contact forms and RSVP functionality
• ✅ Optimize images for web (compress large files)
• ✅ Update all placeholder content
• ✅ Test RTL mode if using Hebrew content

Hosting Options

1. Shared Web Hosting

Most affordable option for small to medium synagogues. Recommended providers:

• Bluehost: WordPress-friendly with good support
• SiteGround: Excellent performance and security
• HostGator: Budget-friendly with unlimited bandwidth

2. Cloud Hosting

For better performance and scalability:

• Netlify: Free tier available, great for static sites
• Vercel: Excellent performance with global CDN
• GitHub Pages: Free hosting for open-source projects

Upload Process

1. FTP Upload: Use an FTP client like FileZilla to upload files to your hosting provider
2. File Manager: Use your hosting provider's file manager in cPanel
3. Git Deployment: Push to a Git repository and deploy automatically

Domain Configuration

After uploading your files:

1. Point your domain to your hosting provider's nameservers
2. Set up SSL certificate for HTTPS (most hosts provide free SSL)
3. Configure email accounts for your domain
4. Set up redirects if needed (www to non-www or vice versa)

Performance Optimization

• Image Optimization: Use WebP format and compress images
• Caching: Enable browser caching through .htaccess
• CDN: Use a Content Delivery Network for faster loading
• Minification: Minify CSS and JavaScript files

Common Issues and Solutions

Here are solutions to common problems you might encounter while using the template.

Layout Issues

RTL Issues

Form Issues

Browser Compatibility

The template is tested and compatible with:

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+
• ⚠️ Internet Explorer not supported

Getting Help

We're here to help you succeed with your ShalomTemple website. Here are the available support resources.

Useful Resources

• Tailwind CSS Documentation (included locally)
• Google Fonts (included locally)
• Font Awesome Icons (included locally)
• Unsplash (Free Images) - for reference only
• W3C HTML Validator - for reference only

Template Information