Make it feel like yours.
Everything you need to explore, customize and connect the Veloura community template.
42 public pages12 admin pages14 shortcode demos01. A warm welcome.
Extract the ZIP, open a terminal inside the Veloura folder, and start the included local preview server. The template itself is plain HTML, CSS and JavaScript; there is no build step and no npm dependency installation.
npm run dev Public website: http://localhost:8080/ Admin workspace: http://localhost:8080/admin/index.html Documentation: http://localhost:8080/documentation/index.html
The included server needs Node.js 18 or later. Alternatively, run python -m http.server 8080 from the Veloura folder. Press Ctrl+C in the terminal to stop the server.
02. One coordinated experience.
All 42 supplied HTML pages remain, including four homepages, community pages, member dashboard screens, shop layouts and the original shortcode library.
Twelve new pages use the original pink/coral palette, typography and buttons, with a responsive sidebar and browser-local interactions.
New logo, favicon, app-preview artwork, page titles, metadata and visible branding. Original promotional author links are removed from the public UI.
Source CSS/SCSS, image credits, a preview server, optional image-localization helper, a page directory and preserved third-party provenance.
03. Familiar style. A new identity.
The design retains the template's original Poppins headings and interface text, Lato supporting text, pink-to-coral gradient, generous rounded controls and decorative style. The added admin layer adapts spacing and layout without introducing a second UI framework.
| Area | Edit this file |
|---|---|
| Logo and favicon | images/veloura-logo.svg, images/veloura-mark.svg |
| Public brand overrides | css/veloura-brand.css |
| Original styling and responsive rules | css/style.css, css/responsive.css, scss/ |
| Web typography | css/fonts.css |
| Admin presentation | admin/assets/admin.css |
| Admin copy, records and interactions | admin/assets/admin.js |
Web fonts load from Google Fonts. No font binaries are shipped. Offline, system fallbacks are used. Public Font Awesome icons are locally rendered SVG outlines; the new admin uses local inline SVG interface icons.
04. A workspace that responds.
Open Admin Panel in the public navigation. Use the sidebar to move between the pages below. The search button or Ctrl/Cmd + K opens a page finder. On small screens, the menu button opens the responsive sidebar.
| Page | What works locally |
|---|---|
| Overview | Roster totals, membership mix, illustrative growth, activity, exports |
| Members | Create, edit, remove, search, filter, paginate and export sample members |
| Moderation | Open item details; approve or dismiss fictional reviews |
| Memberships | Edit plan names, prices, descriptions and feature lists |
| Payments | Sample transaction table, CSV export and printable invoice preview |
| Messages | Switch conversations, save local replies, resolve or reopen threads |
| Journal & content | Create/edit stories; filter draft, published and scheduled statuses |
| Media library | Pexels photo previews, source links and copyable image URLs |
| Analytics | Local sample totals, illustrative chart ranges and location breakdown |
| UI & shortcodes | Original button, alert and accordion patterns, forms and library links |
| Settings | Save local preferences, export JSON backup and reset the demo |
| Demo entry | Set a display name/role label; not an authentication screen |
Browser-local data
Edits use the localStorage key veloura:workspace:v1. Reloading a page on the same origin keeps your edits where storage is available. Different domains, ports, browsers and devices have separate data. Clearing browser storage removes your changes. When storage is blocked, the workspace falls back to temporary in-memory data.
Only fictional records are included. Membership invoices are illustrations; no card details are stored or processed. Moderation uses initials and sample text, never a real identity document or a claim about a stock-photo model. Conversation replies are saved as local previews and are not sent.
Reset and exports
The settings page provides a confirmed reset and JSON export. Member, invoice and review tables offer CSV exports. CSV cells are quoted and formula-like values are neutralized. Invoice print preview uses the browser's print dialog and is marked as a sample, not a tax invoice.
05. Shared building blocks.
The admin loads the supplied style.css, shortcode.css and Bootstrap styles. Its UI/shortcodes page reuses actual original patterns, including main-btn, button1-wrapper, btn1, accordion1-main-wrapper and Bootstrap dismissible alerts.
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/shortcode.css"> <link rel="stylesheet" href="assets/admin.css"> <button class="main-btn">Save changes</button> <div class="accordion1-main-wrapper">...</div>
These are HTML component demonstrations, not WordPress shortcode tags or a server-side page builder. The original 14 shortcode demonstration pages are preserved and linked from the admin library.
06. A considered visual world.
Sixteen Pexels photographs replace the legacy photo references across the public layouts and image demonstrations. They are currently remote references, not downloaded photo files bundled in the ZIP. An SVG fallback is shown when an inline image cannot load. External CSS background images also require internet access.
Make the photos local
python tools/localize_images.py --check python tools/localize_images.py
Run the helper on a network with access to Pexels. It downloads the 16 images into images/pexels/, then switches HTML, CSS, SCSS and admin media references to local paths. All downloads must succeed before source references are changed. It preserves original credits in documentation/image-sources.json. Google web fonts still require internet access after photo localization.
Source credits
Read the Pexels license and terms for your intended use. Stock-photo models are illustrative, not members or endorsers. The public demo includes that disclosure. This project does not verify individual model/property releases for every downstream use.
07. Demo vs. production.
The interface is a front-end template. The following services are not implemented: real authentication or authorization, server-side database storage, paid subscriptions, payment processing, email delivery, live member messaging, file uploads, identity verification, secure moderation, or a CMS that rewrites the public pages.
Admin member totals and invoice totals are computed from local fictional records. Historical chart values are explicitly illustrative. Content status and date controls are previews, not a scheduler or publishing service. Public shop, contact and member pages remain interface examples. The inherited PHP contact handler is disabled and returns HTTP 501; it cannot send email to the original author.
Before a public launch
Connect your own server/API, implement authentication and role checks on the server, validate inputs, rate-limit endpoints, add CSRF protection where applicable, secure uploads and stored data, integrate a payment provider, and provide accurate policies. Audit inherited library versions and commercial component licenses, then test the deployed site in your target browsers. This package is not a security or marketplace-approval certification.
08. Preview and publish.
For the local preview, npm run dev serves the site on port 8080. Set a different port with node tools/serve.mjs 8081. The bundled server is read-only, has no database, and deliberately does not execute PHP.
For static hosting, upload the website files and directories while preserving their relative paths. The entry page is index.html; the admin entry is admin/index.html. No compilation is required. Keep the admin clearly labeled as a demo unless you implement real server-side protection. The PHP file is a disabled example, not an operational contact endpoint.
Quality checks
See QA-REPORT.md for the exact checks performed and environment limitations. The final audit covers local resource references and syntax, with Chromium layout and interaction checks on inlined copies of the local files. Test actual hosted navigation, Pexels images, Google Fonts, forms and any production integrations before launch.
09. Keep the provenance.
The uploaded template identified itself as Fervor v3.0.0 by Webstrot. Visible promotional author credits are removed from the public UI, but original provenance and third-party legal notices are retained in THIRD_PARTY_NOTICES.md and library source headers.