How to Install Themes

4 min read Last updated Mar 24, 2026 3 views

Overview

Larapen's theme system allows you to completely change the look and feel of your website by installing different themes. Each theme provides its own layouts, styles, and design philosophy while using the same content and data.

Available themes

Larapen offers multiple themes, each with a distinct visual identity:

Theme	Description	Availability
Default	Clean, modern, professional with wide layout and balanced whitespace.	Included with the core app
Creative	Bold, creative, asymmetric layouts for freelancers and agencies.	Sold separately
Elegant	Elegant, editorial-style with refined typography and magazine-inspired grid.	Sold separately
Minimalist	Clean, minimal design with generous whitespace, focused on content and simplicity.	Sold separately
Olive	Nature-inspired, warm-toned theme with organic shapes and earthy colors.	Sold separately
Technology	Dark-mode-first, tech-focused for developers and startups.	Sold separately

Note: Only the Default theme is included with the core Larapen application. All other themes are sold separately as additional purchases from the Larapen Marketplace.

Installation methods

Method 1: Via the admin panel (recommended)

Log into your admin panel at https://yoursite.com/admin.
Go to Appearance → Themes.
Click "Upload Theme".
Select the theme ZIP file and click Upload.
The system will extract the theme to extensions/themes/{theme-name}/ and register it.
The new theme will appear in the themes list.

Method 2: Via FTP/File Manager (manual)

Download the theme package (ZIP file).
Extract the ZIP file on your local computer.
Upload the extracted theme folder to extensions/themes/ on your server. For example:
- extensions/themes/creative/
- extensions/themes/elegant/
- extensions/themes/minimalist/
- extensions/themes/olive/
- extensions/themes/technology/
Log into the admin panel.
Go to Appearance → Themes.
Click "Sync" to detect the newly uploaded theme.

Method 3: Via SSH (command line)

# Extract the theme to the extensions directory
unzip creative-theme.zip -d extensions/themes/creative/

# Publish theme assets (symlinks to public/themes/)
php artisan theme:publish creative

# Build theme assets (compile SCSS/JS)
npx vite build

Theme directory structure

Each theme follows a standardized structure inside extensions/themes/{theme-name}/:

extensions/themes/creative/
├── theme.json              ← Manifest (name, version, colors, settings)
├── assets/
│   ├── css/                ← Compiled CSS
│   ├── js/                 ← JavaScript files
│   ├── scss/               ← SCSS source files
│   └── images/             ← Theme images and icons
├── views/
│   ├── layouts/
│   │   └── master.blade.php    ← Main layout template
│   ├── pages/              ← Page templates
│   ├── partials/           ← Reusable components (header, footer, nav)
│   └── components/         ← Blade components
└── config.php              ← Theme-specific settings defaults

Activating a theme

Go to Appearance → Themes in the admin panel.
You'll see all installed themes with preview thumbnails.
Click "Activate" on the theme you want to use.
The theme change takes effect immediately; visit your website to see it.

Note: Only one theme can be active at a time. Activating a new theme automatically deactivates the previous one. Your content, settings, and data are not affected; only the visual presentation changes.

After installation

Build theme assets

After installing a new theme, you may need to build its compiled CSS/JS assets:

Go to Appearance → Themes.
Click "Build" next to the new theme.
Wait for compilation to complete.

Or via SSH:

npx vite build

Configure theme settings

Go to Appearance → Theme Settings.
Customize colors, fonts, layout options, and other theme-specific settings.
Click Save. Changes take effect immediately.

Theme + add-on compatibility

Themes can provide custom views for installed add-ons. For example, the Creative theme might style blog posts differently than the Default theme. If a theme does not provide views for a specific add-on, the add-on's built-in default views are used automatically.

Managing themes

Previewing a theme

Before activating a theme, you can preview it:

Go to Appearance → Themes.
Click "Preview" on any installed theme.
A live preview opens in a new tab, showing your actual content with the new theme's design.

Removing a theme

Make sure the theme you want to remove is not the active theme. Switch to a different theme first.
Go to Appearance → Themes.
Click "Delete" next to the inactive theme.
Confirm the deletion. This removes the theme files from extensions/themes/.

Note: You cannot delete the currently active theme or the Default theme (which serves as the system fallback).

Troubleshooting

Theme not appearing after upload

Verify the folder structure: extensions/themes/{name}/theme.json must exist.
Click "Sync" on the Themes page to re-scan.
Check that the theme.json file is valid JSON.

Missing styles or broken layout

Build the theme assets: Appearance → Themes → Build.
Clear the browser cache with a hard refresh (Ctrl+Shift+R / Cmd+Shift+R).
Clear the application cache: Settings → Cache → Clear All.

Theme images not loading

Run the theme asset publish command to create the correct symlinks: via SSH: php artisan theme:publish {theme-name}
Check that the public/themes/{theme-name}/ symlink exists and points to the correct directory.