{"id":1284,"date":"2026-09-18T22:03:16","date_gmt":"2026-09-18T15:03:16","guid":{"rendered":"http:\/\/www.solidres.com\/blog\/?p=1284"},"modified":"2026-09-18T22:03:16","modified_gmt":"2026-09-18T15:03:16","slug":"introducing-lumina-a-joomla-template-built-for-solidres-not-adapted-to-it","status":"publish","type":"post","link":"https:\/\/www.solidres.com\/blog\/2026\/09\/18\/introducing-lumina-a-joomla-template-built-for-solidres-not-adapted-to-it\/","title":{"rendered":"Introducing Lumina \u2014 a Joomla template built for Solidres, not adapted to it"},"content":{"rendered":"\n<p>Every Solidres template we have shipped &mdash; Emerald, Greenery, Infinity, and the older Adora, Bluebee, Luxuria, Orient, Revive and the rest &mdash; is built on Helix Ultimate. That was a reasonable decision at the time, and it came with a bill you have been paying ever since: a template that cannot render without its companion system plugin, a page grid stored as a drag-and-drop JSON blob, SCSS compiled on every request, and a header, nav and footer whose markup does not live in the template at all &mdash; it lives inside the plugin, where you cannot read it, let alone override it.<\/p>\n\n<p>Today that changes. <strong>Lumina<\/strong> is a new Joomla 6 template for Solidres, written from nothing, with no framework underneath it. It is aimed squarely at boutique and independent properties &mdash; one beautiful hotel, or a small collection &mdash; and it is built around the one journey that matters on a hospitality site: <em>search, choose a room, book<\/em>.<\/p>\n\n<img src=\"\/media\/static\/img\/blog\/lumina\/01-hotel-home-hero.jpg\" title=\"The Lumina home page for a boutique hotel\" alt=\"A boutique hotel home page in Lumina: a full-bleed evening photograph of a poolside bar, a transparent header over it, and a check-in, check-out and guests search bar resting on the bottom of the hero\" \/>\n\n<h4>A template you can actually read<\/h4>\n\n<p>Lumina has no companion plugin. The page shell is one <em>index.php<\/em> you can open and understand: semantic HTML5 landmarks, module positions where you would expect them, and CSS custom properties injected from the template parameters. There is no SCSS to compile, because there is no SCSS &mdash; the styles are plain CSS with custom properties, and the whole template runs on <strong>a single JavaScript file under 5&nbsp;KB minified<\/strong>.<\/p>\n\n<p>It also does not re-bundle what Joomla already gives you. Lumina ships no jQuery, no Bootstrap build and no Font Awesome font set of its own; it uses the copies already in <em>media\/vendor<\/em>, shared with every other extension on your site. And it ships <strong>no font files at all<\/strong>: the type stack asks for Cormorant Garamond and Inter if the visitor already has them, and falls back to Georgia and the system sans if not. Nothing to download, nothing to shift while it loads. If you want a specific webfont served from your own domain, self-hosting it is a documented step rather than a fight with a framework.<\/p>\n\n<h4>Built around the booking funnel, not over it<\/h4>\n\n<p>This is the part we thought hardest about. Solidres&#8217; booking flow binds all of its behaviour to delegated event handlers on the <em>#solidres<\/em> wrapper, which means a template that forks those views is one refactor away from breaking silently.<\/p>\n\n<p>So Lumina almost never forks them. The room-type page is the single Solidres view with an override, and it is there to add <em>HotelRoom<\/em> structured data. Everything else &mdash; the property page, availability search, room selection, the checkout steps, the confirmation screen, the guest account &mdash; is restyled entirely through CSS scoped to <em>#solidres<\/em>. Your booking flow keeps working exactly as it does today, and a future Solidres release cannot pull the rug out from under a layout fork that does not exist.<\/p>\n\n<img src=\"\/media\/static\/img\/blog\/lumina\/07-hotel-rooms-extras-offers.jpg\" title=\"Rooms, add-ons and offers on a Lumina home page\" alt=\"Three bands on a Lumina hotel home page: room type cards with nightly prices, an add-ons row for airport transfer, breakfast and a beach cabana, and a special offers band\" \/>\n\n<p>The same discipline applies to your modules. Lumina exposes <strong>33 module positions<\/strong>, and deliberately keeps the names the Helix-based Solidres templates used &mdash; <em>booking<\/em>, <em>slideshow<\/em>, <em>map<\/em>, <em>sidebar-a<\/em>, <em>sidebar-b<\/em>, <em>top-a<\/em> to <em>top-d<\/em>, <em>bottom-a<\/em> to <em>bottom-d<\/em>, <em>footer<\/em>, <em>toolbar-a<\/em> to <em>toolbar-c<\/em>. Your existing module assignments come across instead of needing to be rebuilt.<\/p>\n\n<img src=\"\/media\/static\/img\/blog\/lumina\/11-hotel-property-rates.png\" title=\"Booking steps and room type rate cards in Lumina\" alt=\"A Lumina property page showing the numbered booking steps across the top and room type cards below with photography, occupancy, rate plan and a nightly price\" \/>\n\n<h4>Five presets, one template<\/h4>\n\n<p>A hotel in Santorini and a townhouse hotel in Edinburgh should not look like the same website. Lumina ships five presets &mdash; each a complete colour, contrast and mood change, not a hue slider:<\/p>\n\n<ul>\n\t<li><strong>Coastal<\/strong> &mdash; light, airy, sand and sea.<\/li>\n\t<li><strong>Heritage<\/strong> &mdash; rich and classic, with brass accents.<\/li>\n\t<li><strong>Urban<\/strong> &mdash; moody contemporary, for the city boutique.<\/li>\n\t<li><strong>Retreat<\/strong> &mdash; earthy and natural, for wellness and the countryside.<\/li>\n\t<li><strong>Minimal<\/strong> &mdash; monochrome and type-led.<\/li>\n<\/ul>\n\n<img src=\"\/media\/static\/img\/blog\/lumina\/19-presets.png\" title=\"The five Lumina presets on the same page\" alt=\"The same booking portal home page rendered five times, once per Lumina preset: Coastal in teal, Heritage in deep red, Urban in near-black, Retreat in green and Minimal in black and white\" \/>\n\n<h4>Dark mode is a mode, not an afterthought<\/h4>\n\n<p>Every colour in Lumina is a token, redefined for dark rather than filtered, and you choose how it behaves: follow the visitor&#8217;s system setting, force light, force dark, or give the visitor a toggle in the header. We audited roughly 37 pages across both light and dark, on desktop and phone, and fixed the contrast failures we found rather than shipping them.<\/p>\n\n<img src=\"\/media\/static\/img\/blog\/lumina\/15-dark-portal-home.jpg\" title=\"A Lumina booking portal in dark mode\" alt=\"A multi-property booking portal home page in Lumina dark mode: pale text on a deep charcoal background, with destination tiles and property cards\" \/>\n\n<h4>Everything you would want to change, without touching CSS<\/h4>\n\n<p>Sixteen parameters across three tabs. <strong>Brand<\/strong> carries your logo, a separate dark-mode logo, the site title and the tagline. <strong>Style<\/strong> holds the preset, custom primary and accent colours, a heading and body font choice, three header styles (transparent over the hero, solid, or centred), three container widths and three hero heights. <strong>Features<\/strong> covers the dark-mode behaviour, the sticky booking bar and the back-to-top button.<\/p>\n\n<img src=\"\/media\/static\/img\/blog\/lumina\/24-admin-style-and-layout.png\" title=\"The Lumina template parameters in the Joomla administrator\" alt=\"The Joomla template style editor showing Lumina's Style tab with the preset selector, colour pickers, font choices, header style, container width and hero height\" \/>\n\n<h4>Two quickstarts: a finished site, not an empty one<\/h4>\n\n<p>A template on its own is a blank page with good manners. So Lumina ships with two quickstart packages &mdash; complete Joomla installs, with real photography, real content and the whole menu structure already built.<\/p>\n\n<p><strong>The boutique hotel<\/strong><\/p>\n\n<p>One property, set up the way a small hotel actually wants it: Joomla&#8217;s home page <em>is<\/em> the property page, so a visitor lands on the hero, the booking bar and the room types with no click in between. Rooms &amp; Suites with a page per room type, add-ons, offers, five categories of tours with a booking tracker, a three-post journal, about and contact pages, the guest area and the footer policies. Coastal preset, transparent header, tall hero.<\/p>\n\n<p><strong>The booking portal<\/strong><\/p>\n\n<p>Twenty independent properties across sixteen cities, four partner accounts, subscription levels with commission rates, and ten tours &mdash; an OTA-style landing page with a search box over the hero, then bands for trending destinations, property types, featured stays, deals, themes, things to do, guest reviews and a <em>list your property<\/em> pitch. Search results are two columns with the filter stack on the left. Urban preset, solid header.<\/p>\n\n<img src=\"\/media\/static\/img\/blog\/lumina\/02-portal-home-hero.jpg\" title=\"The Lumina booking portal home page\" alt=\"A multi-property booking portal home page in Lumina: a sunset photograph of a Greek island town with a location, check-in, check-out and guests search box resting over it\" \/>\n\n<img src=\"\/media\/static\/img\/blog\/lumina\/09-portal-search-results.png\" title=\"Search results in the Lumina booking portal\" alt=\"Lumina search results for Lisbon: a filter sidebar on the left with price, property type and facilities, and property cards on the right with photography, rating and nightly price\" \/>\n\n<p>Both quickstarts are built from the same package directory as the extension itself, so they cannot drift from the release, and both are installed and crawled end to end before they ship &mdash; 80 pages for the portal, 56 for the hotel, every one of them returning 200, with exactly one <em>h1<\/em> and a meta description on each.<\/p>\n\n<h4>On a phone, which is where your guests are<\/h4>\n\n<p>The layout is designed narrow-first: the search bar stacks rather than scrolling sideways, the booking summary opens as a full-screen overlay that follows your theme, and the navigation becomes a drawer that traps focus properly &mdash; verified by keyboard at 390&nbsp;px and again at 400% zoom.<\/p>\n\n<img src=\"\/media\/static\/img\/blog\/lumina\/20-mobile.jpg\" title=\"Lumina on a phone\" alt=\"Four phone screens side by side showing Lumina: a hotel home page, a booking portal home page, search results, and the navigation drawer open\" \/>\n\n<h4>Accessibility and search, stated honestly<\/h4>\n\n<p>Lumina is built with a skip link, real landmark elements, <em>aria-expanded<\/em> and <em>aria-controls<\/em> on the navigation, a labelled theme toggle, visible focus states and a heading outline that does not skip levels. The room-type page emits <em>HotelRoom<\/em> structured data, and every page in both quickstarts carries a single <em>h1<\/em>, a meta description and no broken images &mdash; we crawl for it.<\/p>\n\n<div class=\"alert alert-info\">\n\t<p><span class=\"uk-badge\">NOTE<\/span> What we are <em>not<\/em> going to tell you is a Lighthouse score or a WCAG conformance claim. Those need auditing on a live host with real traffic, and we would rather say nothing than quote a number we produced on a laptop. If you run Lumina and audit it, we want to hear what you find.<\/p>\n<\/div>\n\n<h4>Where it is going next<\/h4>\n\n<p>Worth knowing before you install it, because you will meet these:<\/p>\n\n<ul>\n\t<li><strong>The custom primary and accent colours are only half wired.<\/strong> They apply cleanly on the Coastal preset; on the other four they are currently ignored, and link colour does not yet follow the preset at all. Pick a preset you like and the result is exactly what you see above &mdash; reach for the colour pickers on a non-Coastal preset and you will be disappointed. This is the first thing we are fixing.<\/li>\n\t<li><strong>Structured data is partial<\/strong> &mdash; room types only. <em>Hotel<\/em> and <em>LodgingBusiness<\/em> markup with ratings, and breadcrumb markup, are next.<\/li>\n\t<li><strong>Right-to-left layouts and print styles are not done yet.<\/strong> Lumina&#8217;s interface strings ship in 25 languages, but the RTL stylesheet is still to come, so Arabic, Hebrew and Farsi sites should wait.<\/li>\n\t<li><strong>Two of the alternative property layouts<\/strong> (style 2 and style 3) still carry the old heading structure and have not had the Lumina pass.<\/li>\n<\/ul>\n\n<h4>What you need<\/h4>\n\n<ul>\n\t<li>A Joomla 6 site on PHP 8.4, running <strong>Solidres 4.3.0 or newer<\/strong>.<\/li>\n\t<li>Nothing else. No framework plugin, no page builder, no separate theme engine.<\/li>\n\t<li>Good photography. Lumina is a photography-led design and it will show you, unkindly, if you do not have any.<\/li>\n<\/ul>\n\n<h4>How to get it<\/h4>\n\n<p>Lumina is a <strong>separate download<\/strong> &mdash; it is not part of the Solidres core package, so updating Solidres will not put it on your site. You download it from your solidres.com account, on the same subscription levels that carry the other Solidres templates: <strong>Joomla Bundle, Joomla Hub and Joomla Developer<\/strong>. Install it like any Joomla template, pick a preset, point it at your logo, and assign your modules to the positions they already had. It updates itself through Joomla&#8217;s own updater from then on.<\/p>\n\n<p>Starting a new site instead? Take the quickstart. It is a full Joomla install with Solidres, Lumina, the sample property or portal, the photography and the menus already in place &mdash; you change the name, swap the photos and the content, and you have a working booking site rather than a blank one.<\/p>\n\n<p><a href=\"https:\/\/www.solidres.com\/subscribe\/lumina-template\">See the subscription levels &rarr;<\/a><\/p>\n\n<h4>Try it<\/h4>\n\n<p>Lumina needs <a href=\"https:\/\/www.solidres.com\/blog\/2026\/09\/18\/solidres-4-3-0-is-here-cleaner-urls-better-seo-and-a-smoother-booking-flow\/\">Solidres 4.3.0<\/a>, so update first, then install the template or start from a quickstart. It is version 1.0.0 and we are going to keep pushing on it &mdash; the colour parameters, the structured data, RTL, and whatever you tell us gets in your way.<\/p>\n\n<p>We have wanted to build this for a long time: a Solidres template that is ours, that you can read, and that does not make you install a framework to change a header. Put it on a site and tell us how it goes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every Solidres template we have shipped &mdash; Emerald, Greenery, Infinity, and the older Adora, Bluebee, Luxuria, Orient, Revive and the rest &mdash; is built on Helix Ultimate. That was a reasonable decision at the time, and it came with a bill you have been paying ever since: a template that cannot render without its companion [&#8230;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/posts\/1284"}],"collection":[{"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/comments?post=1284"}],"version-history":[{"count":2,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/posts\/1284\/revisions"}],"predecessor-version":[{"id":1286,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/posts\/1284\/revisions\/1286"}],"wp:attachment":[{"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/media?parent=1284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/categories?post=1284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.solidres.com\/blog\/wp-json\/wp\/v2\/tags?post=1284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}