A field guide to feeling good.
Everything you need to make the theme your own.
Start with the right page
Install Happy, create a page and choose a Happy template. The four homepage designs are starting points. Every content section can be moved, removed or reused. Replace the sample studio, people and project details before publishing.
Set the global design
Open theme settings to edit the page and text colors, four accent surfaces, heading and body fonts, heading sizes, section spacing and content width. Buttons have separate default and hover text and background colors. Forms have dedicated label, field, error and submit controls. Check contrast after changing colors.
Edit the header and footer
The header and footer are global content. Edit the brand name, optional uploaded logo, links and call to action in their global editor. An uploaded logo replaces the text brand automatically. Set each link destination for your own site. Navigation can contain as many or as few items as you need. Landing pages have their own simpler global header.
Build an editable composition
Hero Composition and Creative Canvas share the same layer system. Open Composition layers, choose a layer and change its type to Flower, Circle, Star, Arch, Panel, Ticket or Image. Edit its text, fill, text color, face, percentage position and dimensions, rotation, stack order and motion. Reorder or remove layers in the repeater. Layer names help identify them in the editor. Custom colors and an uploaded image are supported. The canvas scales as a unit on mobile so the composition keeps its proportions. Use a concise accessible composition description, or leave it empty for decorative artwork.
Use photographs naturally
Upload an image to the Hero Composition image field to replace the layered artwork. Clear it to restore the composition. Other modules render optional images only when a source exists. Project Story offers optional images within each chapter, so its image radius applies to those images. Avoid placing essential text only inside an image.
Edit project cover designs
Project Grid and Project Explorer offer three cover types: Graphic, Carton and Device. Change the cover headline, eyebrow, footer, sticker, background, accent, text color and rotation. These are HTML elements controlled by module fields, not flattened screenshots. A cover image replaces the generated artwork when supplied. Project title, summary, category and link are separate editable fields.
Compose pages and sections
Open Add > Sections to use a reusable section, or add individual modules to a drag and drop column. Modules have surface, content width, spacing, optional border and reveal controls. Width and layout adapt to their column. A hero heading defaults to H1; use H2 or H3 for additional hero-style modules lower on a page. Keep one H1 per page.
Connect forms and the blog
Select your own native HubSpot form in Form Panel. The distributable theme contains no portal form IDs. Configure form response settings and notifications in HubSpot. Journal Posts can use a selected blog or editable starter articles. Assign Happy Blog Listing and Happy Blog Post in the blog settings. Blog publishing, membership and platform features depend on the account subscription.
Use the interactive modules
Project Explorer, Team Directory and Resource Library filter their own editable items. Feature Tabs support arrow keys, Home and End. Quote Carousel is manual. Image Gallery opens a dialog that closes with Escape and returns focus. Brief Builder creates a local note; it does not submit data. Pair it with Form Panel when you want an enquiry flow.
Keep motion comfortable
Theme settings can disable decorative motion globally and change the overall duration multiplier. The header pause control stops decorative loops. Each composition layer has its own animation and duration, and Marquee Strip has a separate speed and direction. The theme respects the visitor’s reduced-motion preference. Scroll reveals are optional and are off by default.
Review and launch
Set page titles and descriptions, check navigation and footer links, replace fictional content, verify image alt text, and test forms with your real account settings. Review at desktop and mobile widths and with a keyboard. Assign system templates only when you are ready to change the corresponding account setting. Contact stephen@hoplyy.com for theme installation support or optional professional website setup.