A clean, card-based job board theme for JobClass with a bold hero search, refined typography, and full dark-mode & RTL support.
Theme Overview
A second look for your JobClass job board: modern, roomy, and card-based, without touching your data or add-ons.
Feature Highlights
- 11 homepage sections
- Full job board page set
- Bold hero search dock
- Dark mode support
- RTL language support
- Fully responsive
- Multi-language ready
- Two-state scroll header
- Custom CSS & JS injection
- Google Fonts
Color Palette
| Color | Value |
|---|---|
| Primary | #4f46e5 |
| Secondary | #64748b |
| Accent | #f59e0b |
| Text | #0f172a |
| Canvas | #f6f7fb |
The primary color is deliberately indigo rather than the default blue, so Modern reads as its own brand next to the stock JobClass look. The amber accent highlights premium and featured listings, and salary amounts get their own semantic green so candidates can scan for pay at a glance.
Typography
- Manrope: Headings: Weight 700–800, tight tracking
- Inter: Body text: 15px base
Who is this theme for? Modern is for JobClass sites that want a bolder, product-grade look: a dark hero with a rounded search dock, white cards on a quiet off-white canvas, and strong typographic hierarchy. It ships templates for every front-end page of JobClass: job search, job details, companies, candidates, the posting wizard, and the full account area.
Getting Started
Activate the Modern theme and start customizing in minutes.
-
Log in to your Admin Panel
Navigate to your site's admin area (typically
/admin) and sign in with your administrator credentials. -
Go to Themes
In the admin sidebar, click Themes (
/admin/themes). You will see a card for every theme installed underextensions/themes/. -
Activate “Modern”
Find the Modern theme card and click Activate. Activation publishes the theme's static assets to
public/themes/modern/and clears the generated CSS caches automatically: the front office switches immediately. -
Customize the theme
Open the theme's Settings (
/admin/themes/modern/settings) to change colors, fonts, layout, header, footer, and appearance-mode options. Changes apply instantly. -
Arrange your homepage
Go to Page Sections (
/admin/page-sections) to enable, disable, reorder, and style the homepage sections: hero search form, categories, premium jobs, companies, and more.
Purchase Code (License Key)
The Modern 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.
| Platform / Marketplace | How you get the purchase code | Where to find it again |
|---|---|---|
| bedigit.com Store In-site purchase (Shop) |
Generated automatically when the order is paid, then sent by email, either in its own license email, or inside the order confirmation email. | My Account → My Licenses on bedigit.com |
| Gumroad | Created as soon as Gumroad notifies us of the sale, then sent in a separate email, in addition to the Gumroad receipt. | The license email, your Gumroad Library, and My Account → My Licenses on bedigit.com |
| Envato Market CodeCanyon |
Issued by Envato, not by us, and never sent by email: you download it yourself from your Envato account. | Envato account → Downloads → License certificate & purchase code |
Check your spam folder. For bedigit.com Store and Gumroad purchases the purchase code is delivered by email, and automated license emails are very often filtered. If the message is not in your inbox, look in your spam / junk folder before contacting support, and add our sender address to your contacts or allow list.
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?
Lost your purchase code? Search your mailbox (spam folder included) for “license” or “purchase code”, then check My Account → My Licenses on bedigit.com for Store and Gumroad purchases, or Downloads → License certificate on Envato. If it is still missing, open a ticket on our Help Center with your order number (Store), Gumroad sale ID or buyer email (Gumroad), or Envato username and item name (Envato).
Customization
Tailor the theme from the admin panel: no coding required.
Colors
Pick the primary, secondary, accent, and text colors with color pickers, or switch on a pre-defined skin that overrides the primary color end-to-end.
Fonts
Choose the heading and body fonts from the bundled Google Fonts list and adjust the base font size (15px by default).
Layout
Wide layout with a 1275px container by default, tuned for the card grid. Container width is adjustable from the settings form.
Header
Two independent header setups, one for sectioned pages (homepage) and one for every other page, each with separate default and after-scroll states.
Footer
Dark footer by default, with options for background image/color, title, text and link colors, borders, spacing overrides, and the back-to-top button.
Advanced
Inject custom CSS and JavaScript from the settings form, and change the background image of the authentication pages.
Tip: All options live in Themes → Modern → Settings (/admin/themes/modern/settings). Your values are stored in the database on top of the theme's defaults and take effect immediately, no rebuild or deployment needed. A Reset action is available to return every option to the theme's shipped defaults.
Page Templates
Modern ships its own template for every front-end page of JobClass.
| Page | Purpose | Area |
|---|---|---|
| Homepage | Sectioned landing page built from the homepage sections registry (see next chapter) | Public |
| Job Search | Search results with list cards and a filter sidebar: categories, cities, date, salary range, listing type, and custom fields | Public |
| Job Details | Single job posting with summary, description, custom field values, actions (apply, favorite, report), security tips, and a company sidebar | Public |
| Companies | Company directory with search, plus a company profile page listing its open jobs | Public |
| Candidates | Resume search for employers, with a subscription-required screen when a plan is needed | Public |
| User Profile | Public profile page for a user account | Public |
| Posting Wizard | Multi-step job posting flow: listing details → company → plans → finish, with matching edit screens | Users |
| Account Area | Overview with stats, profile, security (password & two-factor), preferences, my jobs, applications, resumes, companies, job alerts, messenger, notifications, transactions, subscription, linked accounts, and account closing | Users |
| Pricing | Promotion plans and subscription plans presented as pricing tables | Public |
| Payment | Plan selection and payment method screens used by the checkout flow and payment add-ons | Users |
| CMS Pages & Contact | Static pages managed from the admin panel, and the contact form page | Public |
| Auth Layout | Layout for login, register, password reset and two-factor screens, with its own stylesheet and background image option | Auth |
| Utility Pages | Countries list, HTML sitemap, and error pages | Public |
Note: Any view the theme does not override falls back to the JobClass core templates automatically, so add-ons and future core pages keep working even if Modern ships no dedicated design for them.
Homepage Sections
The homepage is assembled from 11 configurable sections that you can enable, reorder, and style individually.
Search & Listings
- Hero Search Form
- Premium Listings
- Latest Listings
Browsing
- Categories
- Locations
- Companies
Engagement & Content
- Stats
- Newsletter
- Text Area
Advertising
- Top Ad
- Bottom Ad
What each section does
| Section | Description |
|---|---|
| Hero Search Form | Full-width hero (560px tall in Modern) on a dark ink canvas with a softly rounded search dock, optional background image with a legibility scrim, and white headline text |
| Categories | Job categories in one of four layouts: big icon list, normal list, picture list, or list with sub-categories |
| Premium Listings | Featured / premium job postings, as a grid or a carousel |
| Latest Listings | Most recent job postings, as a grid or a carousel |
| Companies | Featured companies grid: a JobClass-specific section |
| Locations | Top cities with an optional interactive SVG country map |
| Stats | Animated counters for listings, users, and locations |
| Newsletter | Email subscription card on a tinted band |
| Text Area | Free HTML content block for SEO text or announcements |
| Top Ad / Bottom Ad | Advertising slots wired to the Advertising settings |
How to manage sections: Go to Page Sections (/admin/page-sections) in the admin panel. Sections are a fixed set: you can edit each one's content and styling (for example /admin/page-sections/search_form), toggle it on or off, and drag to reorder, but not create or delete section types. Modern applies its own calmer defaults (an even 40px vertical rhythm between bands); anything you save in the section's Styling tab always wins over the theme defaults.
Header & Footer
A two-state navbar and a fully configurable footer.
Two independent header configurations
Modern configures the header separately for sectioned pages (the homepage, where the navbar can overlay the hero) and non-sectioned pages (every other page, where the navbar sits above the content). The two settings groups never bleed into each other, so you can run a transparent navbar over the hero while keeping a solid one everywhere else.
Header options (per configuration)
| Option | Description |
|---|---|
| Style | Default (solid) or Transparent (sectioned pages only, overlaid on the hero) |
| Logo | Max width (216px default) and height, with an aspect-ratio lock |
| Default state | Height (75px), dark variant toggle, background class or hex, bottom border, link/text colors, optional text shadow, and an entrance animation (slide-down, fade-in, or slide-up) |
| Fixed state | Applied after scrolling past a configurable offset (100px): its own height, colors, shadow, and a crossfade transition. Any field left empty falls back to the default-state value |
| Background image | Optional image behind the navbar |
The fixed state makes the classic “transparent over the hero, opaque after scroll” pattern a two-field job: set only the fixed-state background and text colors and leave the rest empty.
Footer options
| Option | Description |
|---|---|
| Dark variant | Enabled by default: the footer renders on a dark surface |
| Background | Solid color or image |
| Colors | Title, text, link, and link-hover colors, plus inner divider color |
| Borders | Top border width and color |
| Spacing | High-spacing toggle plus per-side margin and padding overrides (any CSS length) |
| Width | Full-width toggle |
| Back to top | Show or hide the back-to-top button |
Note: Content-related footer flags (hiding link columns, payment logos, the powered-by line, and the mobile app URLs) are general JobClass settings under Settings → Footer, not theme settings: they survive a theme switch. The theme settings above only control the footer's look.
Dark Mode
Give your visitors a comfortable viewing experience: day or night.
System Detection
The theme can follow the visitor's operating-system preference, switching automatically between light and dark.
Manual Toggle
A mode toggle in the header lets visitors switch between light and dark. Their choice is remembered for 30 days via a cookie.
Account Preference
Logged-in users can pin their preference to Light, Dark, or System from their account, and it follows them across devices.
Configuration options (Theme Settings):
- Default mode: whether the site starts in light or dark mode for first-time visitors
- Allow mode toggle: show or hide the light/dark switch in the header
Updating
How to update this theme to a newer version.
Admin Panel Upload (Recommended)
- Download the latest
.zipfile of this theme. - Go to Admin panel → Themes and click the Upload button.
- Select or drag the
.zipfile into the upload area. - A confirmation prompt shows the current and new version numbers. Confirm to replace the theme files.
- Go to Admin panel → System Update (
/admin/update) to apply any pending database migrations.
Tip: Your theme settings (colors, fonts, custom CSS) are stored in the database and will not be lost when you replace the theme files.
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 Modern by activating another one. Go to Admin panel → Themes and click Activate on the theme you want instead.
- Modern stays installed: its files remain under
extensions/themes/modern/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:
- Activate a different theme (see Uninstallation).
- Click Remove on the Modern card and confirm the prompt.
That deletes:
- the theme directory
extensions/themes/modern/; - its published assets under
public/themes/modern/; - its generated CSS cache under
public/cache/css/modern/; - its Vite build artifacts: the hashed files under
public/build/and their manifest entries; - its row in the
themestable, which is where its settings live, so the colors, fonts, layout options and custom CSS you configured for it are lost.
This cannot be undone. Export or note down any custom CSS you want to keep before removing the theme: installing it again later starts from the theme's default settings.
Per-section home page styling is stored under the theme's name rather than against the theme row, so it survives the removal: install Modern 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/modern/. 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
Answers to common questions about the Modern theme.
Is the Modern theme free?
Modern is a paid theme for JobClass by BeDigit. Once installed under extensions/themes/modern/, it appears on the Themes page of the admin panel, ready to activate.
Can I change the colors and fonts without coding?
Yes. All colors, fonts, and layout options are configurable from Themes → Modern → Settings. The color pickers drive the whole page through CSS variables, no code editing is necessary.
Does the theme work on mobile devices?
Yes. Modern is fully responsive and looks great on phones, tablets, laptops, and desktops of any size.
Does it support right-to-left languages?
Yes. The stylesheet ships with generated RTL overrides, so Arabic, Hebrew, and other RTL languages lay out correctly out of the box, including the search and filter widgets.
How do I change what appears on the homepage?
Go to Page Sections (/admin/page-sections). Toggle sections on or off, drag to reorder them, and open any section to edit its content and styling.
Will my jobs, companies, and settings survive a theme switch?
Yes. Themes only change the presentation. Your listings, companies, resumes, users, and general settings are untouched. Theme settings are stored per theme, so the Default theme's customizations are still there if you switch back.
Can I inject custom CSS or JavaScript?
Yes. The theme settings form has Custom CSS and Custom JS fields. Code entered there is injected on every page, which is perfect for small tweaks or third-party tracking scripts.
Does the theme support multiple languages?
Yes. All theme text uses the JobClass translation system and adapts to the active language. Manage languages under Languages in the admin panel.
Can I switch to a different theme later?
Yes. You can switch themes at any time from Themes in the admin panel. Only the visual presentation changes.