How to Use Custom CSS on UniLink (Full Design Control Beyond the Editor)

Add your own CSS rules to a UniLink page for advanced design customization that goes well beyond what the visual editor can do.

The UniLink visual editor covers the vast majority of design needs for most users, but there are always cases where you need to go further — a specific font weight, a hover animation on a button, a custom spacing adjustment, or a layout tweak that the editor's sliders simply don't offer. Custom CSS is the escape hatch for these situations. It gives you a direct line into the page's stylesheet so you can write any valid CSS rule and see it applied to your live page.

What Custom CSS Does

When you add CSS in the Custom CSS field, UniLink injects those rules as a stylesheet scoped to your specific page. The rules are loaded after the platform's base styles, which means your CSS has higher specificity and can override the defaults. You're not editing a shared stylesheet — every rule you write applies only to your page and is completely invisible to any other UniLink user or page. This makes it safe to experiment without any risk of affecting the platform.

The range of what you can do with Custom CSS is extensive. Common use cases include importing and applying custom fonts that aren't available in the font picker, adding CSS animations or transitions to blocks (fade-ins, slide effects, hover scale effects on link buttons), adjusting spacing between blocks beyond what the margin/padding controls offer, hiding specific elements such as the profile picture or a particular block, and overriding the color of text or backgrounds at a granularity the editor doesn't expose. Any valid CSS property is fair game.

Custom CSS is particularly powerful when combined with data attributes on UniLink's block elements. Because UniLink's styled-components generate hashed class names that change between deploys, targeting elements by class name is unreliable. Instead, use attribute selectors like [data-block-type="banner"] or target HTML elements directly (e.g., h2, a, button) to write CSS rules that survive platform updates. This approach is robust and maintainable.

How to Get Started

1. Open your Dashboard. Log in at app.unilink.us and navigate to the page you want to customize. Make sure you're in the editor for the correct page before proceeding.
2. Go to Settings → Advanced. In the left sidebar of the editor, click "Settings," then open the "Advanced" tab. This is where the Custom CSS field lives alongside other advanced page settings.
3. Locate the Custom CSS field. Scroll down in the Advanced tab to find the "Custom CSS" textarea. This is a freeform code editor where you'll write your CSS rules.
4. Write a test rule. Before adding complex styles, write a simple test rule to confirm the field is working — for example, body { background-color: #f0f0f0; }. Save and preview your page to see if the background changes.
5. Save and preview. Click "Save" after writing your CSS. Use the Preview button in the editor to see your changes on a live rendering of your page. The preview updates in real time as you save new CSS.

How to Use Custom CSS

1. Inspect elements to find targets. Open your published page in a browser, right-click any element you want to style, and click "Inspect." The browser DevTools shows the element's HTML structure and existing styles. Note the element type and any data attributes — use these as your CSS selectors.
2. Write your CSS rules in the field. Return to the Custom CSS field in Dashboard → Settings → Advanced and write your rules. Use comments (/* your comment */) to organize sections if you have multiple sets of rules.
3. Override existing styles correctly. If your rule doesn't appear to take effect, the platform's base styles may have higher specificity. Increase your selector specificity (e.g., add a parent element to the selector) rather than using !important, which can cause maintenance problems later.
4. Test on mobile. After saving, check your page on a mobile screen size using the browser DevTools mobile emulator or an actual device. CSS rules that look correct on desktop sometimes break layouts on smaller screens — add media queries (@media (max-width: 768px)) as needed.
5. Document your CSS. As your custom styles grow, add comment headers for each section so future you (or a colleague) can quickly understand what each block of CSS is doing. A short comment like /* Hover animation on link buttons */ saves significant debugging time.

Key Settings

Get the Most Out Of Custom CSS

The highest-value use of Custom CSS on UniLink pages is typography control. The built-in font picker covers common typefaces, but if your brand uses a specific Google Font or a self-hosted font that isn't in the picker, you can import it via an @import rule at the top of your Custom CSS and then apply it with a font-family rule targeting the relevant elements. This single technique has a larger visual impact on brand consistency than almost any other CSS customization.

Micro-animations dramatically improve the perceived quality of a link-in-bio page without requiring any JavaScript. A simple transition: transform 0.15s ease with a :hover { transform: scale(1.02) } on link buttons makes them feel polished and interactive. Similarly, a fade-in animation using @keyframes on the page's main container creates a professional first impression as the page loads. These animations are pure CSS, lightweight, and take about five lines of code.

Use Custom CSS to enforce spacing and layout consistency that the block editor's drag handles can't precisely control. If you want exactly 24px between every block regardless of what the default is, a single rule targeting the block container elements achieves this globally for the entire page rather than requiring you to manually adjust every block's settings. This kind of global override is where CSS shines compared to using the visual editor's per-block controls.

For agency use, maintain a library of reusable CSS snippets for common customizations: standard hover effects, brand font imports, spacing normalization, and element hiding rules. When setting up a new client page, copy the relevant snippets from your library into the Custom CSS field and adjust only the brand-specific values (colors, font names). This brings consistency across client pages and dramatically reduces setup time compared to writing CSS from scratch each time.

Troubleshooting

Frequently Asked Questions