Theme Documentation
Hello Boss
Your go-to resource for everything about your theme. Find setup guides, customization tips, and answers to common questions.
Theme Overview
Here you will find the basics to run your theme like the demo. We have also included additional details like the fonts, and demo colors.
Plugins
* are required for theme function
Requirements
WordPress 6.3+
PHP 8.2+
Required Plugins x2
Recommended
Image Guidelines
Upload images that match the aspect ratio of your layout for the best quality, performance, and responsive display.
Common Image Sizes
These are the image ratios you’ll see used throughout the demo.
1:1
Square
Perfect for categories, profile photos, & products
Recommended width:
Up to 1200px
16:9
Landscape
Ideal for hero sections, banners, and full-width images.
Recommended width:
Up to 1900px
3:4
Portrait
Perfect for featured images, blog posts, and post cards.
Recommended width:
Up to 1200px
Custom Code
Built-In Styling Options
These custom styles are included with your theme. Browse the tutorials below to learn how each one works.
What it does
Adds an animated underline to text links. When visitors hover over the link, the line slides in from the left or right.
Example
How to use it
Add an Advanced Heading block.
Type your wording, then open the Advanced tab in the editor.
In the Additional CSS Class(es) field, add one of the following depending on which way you want the line to go:
leftline
rightline
Click save and preview on the live page.
Styling Help
The underline color is controlled by Palette #1.
Click to copy.
What it does
Adds decorative line accents around your images to match the Hello Boss design. Several styles are included, so you can mix and match them throughout your site.
Example
How to use it
Add an Image block and upload your image.
Open the Advanced tab in the editor.
In the Additional CSS Class(es) field, add the line style you’d like to use.
Choose the square shape you’d like from the list to the right.
Save your page and preview the effect.
Quick Tip
Try each line accent to see which one best fits your layout. Since they’re applied with CSS classes, you can easily switch between styles at any time.
STYLING HELP
The decorative line accents automatically use Palette 1, while the solid square background uses Palette 2.
Simply update Palette 1 or Palette 2 in the Customizer, and every element using those styles will update throughout your site.
What it does
Adds a subtle rotating hover effect to any image, giving it a little extra movement as visitors hover over it.
Example
How to use it
Select the Image block you’d like to animate.
Select the image, then open the Advanced tab.
In the Additional CSS Class(es) field, add the class rotate
Save and preview your page.
CSS Classes
Add this class to apply the hover rotation. Simply click to copy.
What it does
Adds a smooth zoom effect when visitors hover over an image. This effect can be applied to any Image or Advanced Gallery block.
Example
How to use it
Add an Image or Advanced Gallery block and insert your image.
Select the image, then open the Advanced tab.
In the Additional CSS Class(es) field, add the class prettyhover
Save and preview your page.
CSS Classes
Add this class to apply the accent. Simply click to copy.
Quicktip
The prettyhover effect can be combined with any of the custom styles. Simply add both CSS classes to the Additional CSS Class(es) field, separated by a space.
What it does
Adds the custom image hover color used throughout the Rosette demo. The hover color is automatically linked to Palette 1, so changing that color will update the effect sitewide.
Example
How to Change the color
Go to Customizer → Colors & Fonts → Colors.
Change Palette 1 to the color you’d like to use for your image hover effect.
Scroll to Mask Settings.
Save your changes and preview your site.
Quick Tip
The hover effect is built into the theme, so there isn’t a separate setting to change the color. Simply update Palette 1, and every hover effect using this feature will update automatically.
What it does
Let’s you mix in your accent font with a header style.
Example
How to use it
Create your heading. Then select the words you would like to be script and apply the Italic styling to those words only.
To change the color, select the script text and from the menu bar above the text, select the arrow ( ⌵ ), and then highlight. There you can choose an accent color.
VIDEO TUTORIAL
Learn to Use Your Block Library
Learn how to use your Block Library with confidence. This video covers browsing your library, adding blocks to your pages, editing content, moving sections, and customizing layouts to fit your website.
QUICK START
Quick Answers & Tutorials
Find quick answers to the questions we hear most often, or browse step-by-step tutorials for more detailed guidance.
Everything you need to customize
your theme from start to finish.
Popular Tutorials
Step-by-step guides
The most common tutorials our users find helpful.
Popular Questions
Quick Answers
Browse answers to the questions users ask most often.
Still need help?
We’re happy to help! If you couldn’t find the answer you’re looking for, send us a support ticket and we’ll get back to you as soon as possible.
Changelog
Follow the evolution of your theme. Every new feature, improvement, and bug fix will be documented here, so you can quickly see what’s changed.
Found an issue or have an idea for a future release? We’d love to hear from you.