The site theme controls the colors, fonts, text sizes, shapes, logo, icon, and layout across your site. Choose the logo and icon from Media Library, or upload them while you choose.
Under Website, open Theme. Each choice shows a small sample in your own colors and fonts. When you select a choice, the Preview changes at once. Your site does not change until you select Save Theme.
The preview shows your site's layout without the "powered by LapBrain" line. Select View Site to see the full footer.
Set the colors
In the Colors section, set Primary for buttons, Secondary for the footer, and Accent for links. Under Background style, select Light, Tinted, or Dark. Tinted adds a light tint of your primary color to the page. Trackside sets the text colors to match the background.
Choose the fonts
Under Fonts, Headings and Body text each show the current font name in that font. Select Change to see every font with a sample heading and paragraph. Select a font to see it in the Preview. Select Use this font to keep it. Select Cancel to go back to the font you had before.
Barlow Condensed has narrow letters that give large headings and capital letters more room. Poppins, Rajdhani, and Barlow Condensed load from Trackside, so they look the same on every device. The other fonts use the fonts on each visitor's device, so they look a little different on each device.
Some fonts have wider letters than others. Trackside shows the text of a wide body font, such as Poppins, a little smaller. Then your text is easy to read at the same size in every font. Your headings, forms, and buttons change size with the body font, so they keep their sizes relative to the text.
Set the text
Under Text, set Letter case to All capitals to show headings, the menu, and buttons in capital letters. Select As typed to keep text as you entered it.
Heading size makes every heading Compact, Standard, or Large. All headings change together, so they keep their sizes relative to each other. Heading weight sets headings to Bold or Heavy. A font without an extra-bold style, such as Rajdhani, looks the same at both weights. Body text size makes paragraphs and lists Standard or Large. Menus, buttons, and forms keep their size.
Set the shapes
Under Shapes, Button shape sets the corners of every button to Square, Rounded, or Pill. This includes Cart and Menu in the site header. Corners sets the corners of cards, images, panels, and text boxes to Square, Soft, or Round. Buttons keep their Button shape.
Set the layout
Under Layout, select Change beside Header or Footer to see each layout. The header layouts are Classic, Centered, and Bold. Bold puts the header in a band of your primary color. The footer layouts are Simple and Detailed. Select Use this layout to keep a layout, or Cancel to go back.
Section spacing sets the space between blocks and inside each block to Compact, Standard, or Spacious. To add space above one block only, use Space above on that block. Content width sets the width of your content on large screens to Standard or Wide. Paragraphs keep a readable line length on Wide.
Add the logo and icon
Under Logo and icon, select Choose Image for the Logo. The window shows each image on your site header. A wide logo with a transparent background looks best. Select Use Image to keep it.
Do the same for the Favicon, the icon in browser tabs and bookmarks. The window shows the image in a browser tab. A square image of 512 px or more works best. Select Save Theme to use the logo and icon on your site.
Save the theme
Check the Preview and Contrast sections. Trackside blocks Save Theme if a color pair is hard to read. Adjust the colors until every contrast check passes. Then select Save Theme and View Site to check the public result.
Theme changes apply across the site when saved. Page drafts remain separate.