# Docs ## Example This is an example page. ## Get started Hello world! ## Pink Ghost Theme - Gumroad Documentation ### 🌸 Theme Overview **Pink Ghost Theme** is a modern, elegant, and highly customizable Ghost theme designed for bloggers, magazines, and personal websites. With its beautiful gradient backgrounds, hero slideshow, and extensive customization options, this theme creates a stunning visual experience for your readers. #### Key Features * 🎨 **Beautiful Gradient Backgrounds** - Customizable color schemes * 📱 **Fully Responsive Design** - Perfect on all devices * 🎠 **Hero Slideshow** - Automatic featured posts carousel * ⚙️ **Extensive Customization** - Colors, layouts, typography * 🔗 **Social Media Integration** - Built-in social links * 👥 **Member Support** - Ghost membership features * 🚀 **Performance Optimized** - Fast loading times * 📐 **Flexible Image Options** - Multiple aspect ratios and sizes *** ### 📋 Requirements * **Ghost Version**: 5.0.0 or higher * **Node.js**: 16.0 or higher (for development) * **Modern Browser**: Chrome, Firefox, Safari, Edge *** ### 🚀 Installation Guide #### Step 1: Download the Theme 1. Download the `pink-ghost-theme.zip` file from Gumroad 2. Extract the ZIP file to your local computer #### Step 2: Upload to Ghost 1. Log in to your Ghost admin panel 2. Navigate to **Settings** → **Design** 3. Click **Change theme** → **Upload theme** 4. Select the extracted theme folder 5. Click **Upload** #### Step 3: Activate Theme 1. Once uploaded, click **Activate** on the Pink Ghost Theme 2. Your theme is now live! *** ### ⚙️ Customization Options #### Colors & Background * **Background Color Start**: Initial gradient color (default: #fffef9) * **Background Color End**: Final gradient color (default: #fff5dc) * **Header Color**: Header background color (default: #ffe4ec) #### Layout Options * **Blog Title Position**: * Below navigation * Inside navigation * **Show Scroll Top Button**: Enable/disable scroll-to-top button * **Show Hero Excerpt**: Display excerpt in hero section #### Hero Slideshow * **Slideshow Speed**: * 3s, 5s, 7s, 10s, or Off * Automatically rotates through featured posts #### Post Display Options * **Post Image Size**: Small, Standard, Large * **Post Image Aspect Ratio**: 1/1, 4/3, 3/2, 16/9 * **Single Post Image Width**: Standard, Wide, Full, Narrow * **Single Post Image Aspect Ratio**: Original, 16/9, 21/9, 4/3, 2/1 #### Content Features * **Show Post Authors and Tags**: Toggle author and tag display * **Show Related Posts**: Enable/disable related posts section #### Social Media Integration Configure your social media profiles: * Twitter * Facebook * Instagram * YouTube * Pinterest * TikTok * LinkedIn *** ### 📝 How to Customize #### Using Ghost Admin 1. Go to **Settings** → **Design** 2. Click **Site-wide** under "Theme design" 3. Adjust colors, fonts, and layout options 4. Click **Save** to apply changes #### Featured Posts for Hero Slider 1. Edit any post you want to feature 2. Click **Post settings** (gear icon) 3. Add the tag `#featured` to the post 4. Save the post 5. The post will now appear in the hero slideshow #### Custom CSS For advanced customization: 1. Go to **Settings** → **Code Injection** 2. Add custom CSS to the **Site Header** section 3. Save changes *** ### 🎯 Theme Structure #### Template Files * `index.hbs` - Homepage template * `post.hbs` - Single post template * `page.hbs` - Static page template * `tag.hbs` - Tag archive template * `author.hbs` - Author archive template * `default.hbs` - Main layout template #### Partial Files * `hero.hbs` - Hero section with slideshow * `card.hbs` - Post card component * `navigation.hbs` - Site navigation * `footer.hbs` - Site footer #### Assets * `assets/css/` - Stylesheets * `assets/js/` - JavaScript files * `assets/built/` - Compiled production files *** ### 🔧 Development (Optional) If you want to modify the theme code: #### Setup Development Environment ```bash # Install dependencies npm install # Start development server npm run dev # Build for production npm run build # Create theme zip file npm run zip # Test theme npm run test ``` #### File Structure ``` Starter/ ├── assets/ │ ├── css/ │ ├── js/ │ └── built/ ├── partials/ ├── members/ ├── *.hbs (template files) ├── package.json └── rollup.config.js ``` *** ### 📱 Responsive Design The theme is fully responsive and optimized for: * **Desktop**: 1200px+ * **Tablet**: 768px - 1199px * **Mobile**: 320px - 767px *** ### 🎨 Color Schemes #### Default Pink Theme * Background: Light cream to pink gradient * Accent: Soft pink tones * Text: Dark gray for readability #### Custom Colors You can easily customize all colors through the Ghost admin panel to match your brand. *** ### 📊 Performance Features * **Optimized Images**: Multiple image sizes for different devices * **Lazy Loading**: Images load as needed * **Minified Assets**: Production files are compressed * **Modern CSS**: Uses efficient CSS Grid and Flexbox *** ### 🔍 SEO Features * **Semantic HTML5**: Proper heading structure * **Meta Tags**: Automatic meta description and titles * **Open Graph**: Social media sharing optimization * **Structured Data**: Rich snippets for search engines *** ### 💡 Tips & Tricks #### 1. Creating Beautiful Hero Slides * Use high-quality featured images (minimum 1200px width) * Add the `#featured` tag to posts you want in the slider * Write compelling excerpts for hero text #### 2. Optimizing Images * Use WebP format for better compression * Keep file sizes under 500KB for featured images * Use consistent aspect ratios #### 3. Social Media Setup * Add your social media URLs in theme settings * Use Open Graph images for better sharing * Enable social sharing in Ghost settings *** ### 🆘 Support #### Common Issues **Q: Hero slideshow not working?** A: Make sure you have posts with the `#featured` tag and featured images. **Q: Colors not changing?** A: Clear your browser cache and refresh the page after making changes. **Q: Theme looks broken on mobile?** A: Ensure you're using Ghost 5.0+ and clear your mobile browser cache. #### Getting Help * Check the [Ghost Documentation](https://docs.ghost.org) * Review theme customization options in Ghost admin * Test with a fresh install if issues persist *** ### 📄 License This theme is licensed under the MIT License. You can: * ✅ Use for personal and commercial projects * ✅ Modify and customize * ✅ Distribute with your projects *** ### 🎉 Thank You! Thank you for purchasing the Pink Ghost Theme! I hope you enjoy creating a beautiful blog with it. If you have any questions or need support, please don't hesitate to reach out. **Created by:** Anna Khramenkova\ **Version:** 1.1.7\ **Compatible with:** Ghost 5.0+ *** *Last updated: February 2026*