Custom CSS

creavio's templates handle the heavy lifting, but sometimes you need that extra level of control. Custom CSS lets you override default styles, tweak spacing, adjust typography, and create a look that's uniquely yours.

Where to Add Custom CSS

Go to Website → Settings → Custom Code. You'll find a CSS editor with syntax highlighting and live preview. Paste or type your CSS rules and click Save. Changes apply immediately to your published site.

Common Customizations

Here are some popular tweaks photographers make:

Font adjustments — change font sizes, weights, or letter-spacing on headings
Color overrides — update accent colors beyond what the theme settings offer
Spacing — increase or decrease padding between sections
Navigation styling — customize the header background, link colors, or hover effects
Gallery grid gaps — adjust the space between images in portfolio grids

Example: Changing Heading Font Size

To make all h2 headings slightly larger:

h2 { font-size: 2.5rem; letter-spacing: -0.02em; }

Using Browser DevTools

The fastest way to figure out what CSS to write is to use your browser's developer tools. Right-click any element on your site, select Inspect, and you'll see the current styles applied. Find the class name, write your override, and paste it into creavio's custom CSS editor.

Important Notes

Custom CSS loads after creavio's default styles, so your rules take priority
Use specific selectors to avoid unintended side effects on other pages
Test on both desktop and mobile — a rule that looks great on desktop might break mobile layout
creavio does not provide support for debugging custom CSS — this is an advanced feature

Resetting Custom CSS

If something goes wrong, clear the custom CSS field and save. Your site returns to the default theme styles immediately. Consider keeping a backup of your CSS in a text file before making major changes.

Custom CSS is available on the Pro plan and above.