Olive Theme Guide for Larapen

Theme Overview

A warm, organic theme that brings the beauty of natural earth tones to your website.

Olive is a premium Larapen CMS theme designed around muted earth-tone aesthetics. It features a carefully curated palette of sage green, terracotta, and clay accents set against a warm cream background, creating an organic, inviting atmosphere for your website.

The theme uses premium typography with Outfit for headings (modern, rounded) and Satoshi for body text (clean, geometric), loaded via Fontshare API. Every visual element, from rounded corners to warm-toned shadows, contributes to the theme's distinctive organic feel.

With 42 sections, 20 page templates, and full dark mode support with warm tones, Olive adapts beautifully to any type of website while maintaining its earthy character.

At a Glance

Key Features

Getting Started

Install and activate Olive in a few simple steps.

1. Upload the Theme

   Place the olive folder inside your Larapen installation at extensions/themes/olive/. Ensure all files are present, including the theme.json manifest.

2. Publish Assets

   Run the following command in your terminal to publish the theme's assets (CSS, JS, images) to the public directory:

   php artisan theme:publish olive

3. Build Assets

   Rebuild the Vite manifest so the new SCSS and JS files are compiled and available:

   npx vite build

4. Activate in Admin

   Go to Admin Panel → Appearance → Themes, find "Olive" in the list, and click Activate. Your site will immediately use the Olive theme.

Purchase Code (License Key)

The Olive theme is licensed separately from the main application and from every other theme or add-on, so it has its own purchase code (license key). You are asked for it the first time you activate the theme in Admin panel → Themes.

Our products are sold on three platforms, and the way you receive a purchase code depends on where you bought the product.

1. bedigit.com Store (in-site purchase)

As soon as your order is marked Paid, a license key is generated automatically for every licensed item in the order (one key per purchased unit) and emailed to the address used on the order, either in a dedicated license email or inside the order confirmation email. The key also stays available under My Account → My Licenses, where you can reveal it, copy it, see the domains it is activated on, and deactivate a domain to free an activation slot. The matching invoice is under My Account → My Orders.

2. Gumroad

A Gumroad purchase produces two separate emails: the Gumroad receipt (sent by Gumroad, giving access to the files) and a license key email (sent by bedigit.com) that contains your purchase code. The second one is generated as soon as Gumroad notifies us of the sale, so it normally arrives within seconds of the payment. When the product uses Gumroad’s own license-key feature, the same key is also shown in the Gumroad receipt and under Library → your purchase on gumroad.com. Use the same email address on bedigit.com as on Gumroad and your keys are linked to your account automatically, under My Account → My Licenses; you can also add a Gumroad key manually from My Account → My Gumroad Licenses.

3. Envato Market (CodeCanyon)

Envato issues and delivers the purchase code itself: we never email it, so there is nothing to look for in your spam folder. Log in to your Envato / CodeCanyon account, open Downloads, find the item, and choose License certificate & purchase code from the Download dropdown; the code is written in that certificate. It looks like 12345678-90ab-cdef-1234-567890abcdef and never changes, even when you renew item support. See the official article: Where Is My Purchase Code?

Customization

Adjust Olive to match your brand while keeping the organic aesthetic.

Admin Theme Settings

Navigate to Admin Panel → Appearance → Theme Settings to customize these options:

• Primary Color: Defaults to Sage Green (#7c8c6e). Used for buttons, links, and accents.
• Secondary Color: Defaults to Terracotta (#c67a5c). Used for highlights and call-to-action elements.
• Accent Color: Defaults to Clay (#a0845c). Used for decorative elements and badges.
• Background Color: Defaults to warm cream (#faf8f5). Can be adjusted to any warm tone.
• Layout Style: Wide (1250px container) by default.
• Header Transparency: Enable or disable the transparent header overlay.
• Dark Mode: Toggle warm-toned dark mode support.

CSS Custom Properties

Olive uses CSS custom properties prefixed with --ol- for easy customization. Override these in your custom CSS to adjust the theme without modifying core files:

CSS

:root {
    --ol-primary: #7c8c6e;
    --ol-secondary: #c67a5c;
    --ol-accent: #a0845c;
    --ol-bg: #faf8f5;
    --ol-bg-dark: #f0ece6;
    --ol-text: #3d3a36;
    --ol-radius: 0.625rem;
    --ol-shadow: 0 2px 16px ...;
    --ol-font-heading: 'Outfit';
    --ol-font-body: 'Satoshi';
    --ol-font-size: 16px;
}

Page Templates

20 purpose-built page templates for the core platform and add-ons.

Core Templates

Add-on Templates

42 Sections

A rich library of reusable sections you can combine to build any page layout.

Sections are the building blocks of your pages. In the admin panel, use the Sectioned page template to drag and arrange sections in any order. Each section is designed with Olive's earth-tone aesthetic, featuring rounded corners, warm shadows, and organic spacing.

Section Categories

All Available Sections

• Hero Banner
• Hero Slider
• Hero Video
• Hero Split
• About
• About Extended
• Features Grid
• Features Icons
• Features List
• Services
• Services Detailed
• Portfolio Grid
• Portfolio Masonry
• Portfolio Carousel
• Team Grid
• Team Carousel
• Testimonials
• Testimonials Carousel
• Pricing Tables
• Pricing Toggle
• FAQ Accordion
• FAQ Two-Column
• Partners Logo
• Partners Carousel
• Contact Form
• Contact Split
• Call To Action
• CTA Banner
• Newsletter
• Stats Counter
• Stats Highlight
• Timeline
• Process Steps
• Gallery Grid
• Gallery Lightbox
• Blog Latest
• Blog Featured
• Map
• Content Block
• Divider
• Spacer
• Custom HTML

Transparent Header

A distinctive header style that elegantly overlays your page content.

The Olive theme features a transparent header that sits on top of your page content rather than pushing it down. This creates a sophisticated, full-screen feel where hero sections extend to the very top of the viewport.

How It Works

• The header starts fully transparent with white text on dark backgrounds.
• As the user scrolls, the header gains a warm cream background with a subtle shadow.
• Navigation links transition from white to the theme's text color.
• The logo can have separate light/dark variants for each state.
• The transition is smooth and uses CSS transitions for a polished feel.

Best Practices

• Use hero sections: Start pages with a hero section that has a background image or dark color so the white header text is visible.
• Test on all pages: Ensure your inner pages also work well with the transparent header. Light-colored pages may need additional top padding.
• Logo variants: Upload both a light (white) and dark version of your logo in Theme Settings for optimal visibility in both states.
• Disable if needed: You can disable the transparent header in Theme Settings and use a standard solid header instead.

Footer

A 4-column footer with warm styling and flexible content areas.

The footer uses a warm-toned dark background (not pure black) that complements the earth-tone palette. Below the 4 columns, a bottom bar displays copyright text, language switcher, and bottom navigation links.

Dark Mode

Warm dark tones that maintain the organic feel.

Unlike themes that use pure black (#000) for dark mode, Olive uses warm dark tones that feel natural and cohesive with the earth-tone palette. The dark mode background is a warm charcoal, and surfaces use slightly lighter warm grays.

Dark Mode Palette

Behavior

• Respects the user's system preference via prefers-color-scheme.
• A manual toggle is available in the header navigation.
• Preference is saved to local storage and persists across visits.
• All 42 sections have dedicated dark mode styles.
• Images can optionally have reduced brightness in dark mode for eye comfort.
• The sage green, terracotta, and clay accent colors are slightly brightened in dark mode for adequate contrast.

Earth-Tone Palette

The complete color system that gives Olive its organic, natural character.

Primary Colors

Extended Palette

Text & UI Colors

Add-on Support

Olive includes styled templates for all major Larapen add-ons.

Core Modules

• Pages: Standard content pages and section-based landing pages with full WYSIWYG support.
• Portfolio: Grid and masonry layouts with lightbox, filtering, and project detail pages.
• Team: Team member cards with photos, roles, bios, and social links.
• FAQ: Accordion and two-column FAQ layouts with smooth animations.
• Partners: Logo showcases with carousel and grid options.
• Pricing: Pricing tables with toggle (monthly/yearly) and feature comparison.

Extended Add-ons

• Blog: Blog listing, detail, categories, and tags.
• Shop: Product catalog, cart, checkout, and order pages.
• Booking: Appointment scheduling interface.
• Careers: Job listings and application forms.
• Events: Event calendar and detail pages.
• Forum: Discussion boards and threads.
• HelpDesk: Knowledge base with search.
• Glossary: Alphabetical term definitions.

When an add-on is activated in the Larapen admin panel, Olive's styled templates are automatically used. Each add-on template follows the earth-tone aesthetic with consistent typography, rounded corners, and warm shadows.

Updating

How to update this theme to a newer version.

Admin Panel Upload (Recommended)

1. Download the latest .zip file of this theme.
2. Go to Admin panel → Themes and click the Upload button.
3. Select or drag the .zip file into the upload area.
4. A confirmation prompt will show the current and new version numbers. Click Replace to proceed.
5. Go to Admin panel → System Update (/admin/update) to apply any pending database migrations.

Uninstallation

How to stop using this theme without losing anything.

Themes are not switched on and off one by one: exactly one theme is active at a time, so you stop using Olive by activating another one. Go to Admin panel → Themes and click Activate on the theme you want instead.

• Olive stays installed: its files remain under extensions/themes/olive/ and its card stays in the list.
• Its settings (colors, fonts, layout, header and footer options, custom CSS) stay stored in the database, and so does the per-section styling you gave it on the home page.
• The purchase code recorded at activation is kept, so activating the theme again does not ask for it.

Activate it again whenever you like: the front-end comes back exactly as you left it.

Removing

How to delete this theme permanently, and what goes with it.

Removing deletes the theme for good. The active theme cannot be removed, so removal is always two steps:

1. Activate a different theme (see Uninstallation).
2. Click Remove on the Olive card and confirm the prompt.

That deletes:

• the theme directory extensions/themes/olive/;
• its published assets under public/themes/olive/;
• its uploaded files under storage/app/public/themes/olive/;
• its Vite build artifacts: the hashed files under public/build/ and their manifest entries;
• its row in the themes table, which is where its settings live, so the colors, fonts, layout options and custom CSS you configured for it are lost.

Per-section home page styling is stored under the theme's name rather than against the theme row, so it survives the removal: install Olive again and your section styling is still there, while the theme's own settings start from their defaults.

The removal is refused, before anything is deleted, when the theme is still active or when the web server (PHP) user cannot delete extensions/themes/olive/. In that last case, give that user write permission on the directory and on its parent, then try again.

Deleting the folder over FTP or SSH is not equivalent: the published assets, the build artifacts and the themes row are all left behind. Use Remove in the admin panel instead.

Frequently Asked Questions

Common questions about the Olive theme.

Can I change the earth-tone colors?

Yes. All colors are defined as CSS custom properties (prefixed with --ol-). You can override them in Theme Settings or in a custom CSS file. However, for the best results, stick with muted, desaturated tones that complement the organic aesthetic.

Does the Satoshi font require an API key?

No. Satoshi is loaded via the Fontshare API, which provides it for free. No API key or registration is required. The font is loaded directly from api.fontshare.com.

Can I disable the transparent header?

Yes. Go to Admin → Appearance → Theme Settings and disable the "Transparent Header" option. The header will then display as a standard solid navigation bar with the warm cream background.

How does dark mode work?

Dark mode uses warm dark tones (not pure black) to maintain the organic feel. It respects the user's system preference and includes a manual toggle in the header. All 42 sections have dedicated dark mode styles.

Is the theme responsive?

Yes. Olive is fully responsive and mobile-first. All 42 sections, page templates, and the transparent header adapt gracefully from mobile to desktop viewports.

Can I use Olive with add-ons not listed in the supported list?

The theme includes styled templates for 20 add-on page types. For unlisted add-ons, the system falls back to the add-on's default views, which will still work but may not match the earth-tone aesthetic exactly.

How do I update the theme?

Replace the extensions/themes/olive/ folder with the new version, then run php artisan theme:publish olive and npx vite build. Your custom settings in the admin panel will be preserved.

Can I create custom sections?

Yes. Create a new Blade partial in extensions/themes/olive/views/sections/ and register it in the theme configuration. Follow the existing section structure for consistency with the earth-tone design system.