Themes
The Themes tab controls everything about how the portal looks to customers — your logo, colors, fonts, layout, and the words on the landing page.
Open the Themes tab
Section titled “Open the Themes tab”In the dashboard, open Setup → TracsConnect Portal, then click the Themes tab.
Brand identity
Section titled “Brand identity”Upload a logo for the portal landing page. PNG or SVG work best. Aim for a transparent background so the logo sits cleanly over your chosen colors.
Company name
Section titled “Company name”Set the shop name customers see across the portal. This appears in the header, the page title in the browser tab, and the default welcome message.
Colors
Section titled “Colors”You can set six colors directly. The rest of the palette (card backgrounds, focus outlines, error states) is automatically derived from your six choices.
| Color | What it controls | |---|---| | Primary | Buttons, links, and the main “approve” action | | Secondary | Supporting buttons and quieter accents | | Accent | Highlights — notification badges, hover states | | Background | The page background behind every section | | Text | The main body text color | | Border | Lines around cards, inputs, and dividers |
Background wallpaper
Section titled “Background wallpaper”Below the color pickers there’s a Background Wallpaper option. You can leave it as None for a flat background, or pick the light or dark icon pattern. The wallpaper tiles behind the portal landing page and gives it a bit of texture without overriding your background color.
Typography
Section titled “Typography”Heading font
Section titled “Heading font”Choose the font for the welcome message, section titles, and the landing headline.
Body font
Section titled “Body font”Choose the font for paragraphs, estimate line items, and form fields. Pair a clean body font with a stronger heading font for a professional look.
Layout
Section titled “Layout”Pick the overall feel for the portal landing page. Each layout is the same set of components arranged differently:
| Layout | Best for | |---|---| | Modern | Bright, generous whitespace, default for most shops | | Classic | Traditional automotive shop feel | | Minimal | Stripped back, lets the brand colors do the work | | Bold | Heavy headings and high contrast | | Editorial | Magazine-style typography | | Glass | Frosted-card effect over a brand-colored background | | Industrial | Strong lines and utility feel | | Friendly | Rounded shapes and warm spacing | | Retro | Vintage-inspired styling |
App-specific content
Section titled “App-specific content”Welcome message
Section titled “Welcome message”The first line customers read when they open the portal. Keep it short — “Welcome to Smith’s Auto” is plenty. Leave blank to use the theme default.
Landing headline
Section titled “Landing headline”The big headline at the top of the landing page. Defaults to “Welcome to your shop name” if blank.
Landing subtitle
Section titled “Landing subtitle”A short tagline shown under the headline. Something like “Your service portal — view estimates and approve work” works.
Save and preview
Section titled “Save and preview”Theme edits auto-save about a second after you stop changing them, so most edits are saved before you click anywhere else. The Themes tab also gives you a manual Save Changes button alongside Reset to Saved and Delete Theme if you want to force a save or revert. The portal picks up the new look the next time a customer opens or refreshes the page. To preview, open your portal address on a phone or in a private browser window so you see what a customer would see.