What is Custom CSS?

CSS (Cascading Style Sheets) is the code that controls how your page looks — fonts, colours, spacing, layouts, and more. Psyke gives you a custom CSS field where you can add your own styling rules to go beyond the built-in design options.

Adding Custom CSS in Psyke

Open a campaign or page in the editor.
Go to Page Settings → Custom CSS.
Type or paste your CSS code into the editor.
Save and preview to see the effect.

Useful Snippets

Custom Button Colour and Style

.psyke-button {
  background-color: #FF5733;
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: bold;
}

Full-Width Banner with Gradient Background

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80px 20px;
  text-align: center;
  color: white;
}

Card with Shadow (for pricing or feature blocks)

.feature-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 32px;
  margin: 16px;
}

Loading External Google Fonts

Add the font import to your Head Scripts field (not the CSS field):

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Then reference it in your CSS:

body {
  font-family: 'Inter', sans-serif;
}

Tips

Use your browser's DevTools (press F12) to inspect elements and find the CSS class names used by Psyke.
Test on mobile devices — CSS changes can affect how your page looks on different screen sizes.
Always back up your CSS before making large changes so you can revert if something breaks.
Keep custom CSS minimal to avoid slowing down page load times.

Custom CSS and Advanced Styling Examples