Style Your Captive Portal — Colors, Fonts, CSS

Tento obsah zatím není dostupný ve vašem jazyce.

Summary Restyle every part of your captive portal — the surface, logo, text, buttons, form fields, and the payment/access cards — with a visual editor (colors, fonts, sizes, borders, and radius, per component) plus a raw CSS escape for anything the controls don’t cover. Every change applies live — there is no draft to publish. Only what you change from the default is stored, so an untouched portal keeps its standard look.

What you can style

Each element of the login screen is its own component you can restyle independently:

Component	What it is
Surface	The full-page background — a single colour, a two-colour gradient, or a background image (full-page or a top band, with an adjustable darken), plus an optional card behind the form.
Logo	Size, corner radius, and the gap below it.
Text	Welcome message and body copy — font, size, weight, and colour.
Input / Select	The form fields the guest types in — background, text colour, border, radius, height.
Primary / Secondary / Tertiary button	Connect, the outline button, and the “back” link.
Option card	The “Free access” / “Paid access” / Pix cards the guest chooses between — including the selected (in-focus) state.

How to open it

Open your voucher and go to the Builder.
Scroll to the Style card.
Pick one of the templates for an instant look, or tap Customize to open the editor.

The templates are None, Midnight, Sand, and Forest. None is the shipped default — pick it any time to clear every style and return the portal to its standard look.

The Editor tab (visual)

Each component has its own set of controls — colour swatches, a font picker, and sliders for size, weight, border, and radius. As you change a value the preview updates, and the choice is saved to the live portal right away.

A control you never touch shows its default but changes nothing — the portal keeps its standard look until you deliberately override it.
Where a colour choice would be hard to read, the editor flags the contrast and offers to fix it.
Reset this component clears one component; Reset all styling clears everything (tokens and CSS).

The CSS tab (all rules + advanced)

The CSS tab has two parts:

All rules — the full stylesheet compiled from your choices, with every default filled in. Edit a value here and it flows straight back to the visual controls; only what differs from the default is saved. It is the same thing as the Editor tab, seen as CSS.
Extra CSS — a free-form box for anything the controls don’t cover: animations, pseudo-elements, media queries. Your CSS is applied after the component styles, so it wins where the two overlap.

Both target the same stable class names, so a rule you write keeps working as the portal evolves.

Class reference (for Extra CSS)

Class	Element
`.mkc-logo`	Logo
`.mkc-text`	Welcome message & body copy
`.mkc-title`	Screen heading (e.g. “How do you want to connect?”)
`.mkc-label`	Field labels
`.mkc-input` / `.mkc-select`	Text fields / dropdowns
`.mkc-buttonPrimary` / `.mkc-buttonSecondary` / `.mkc-buttonTertiary`	Buttons and the back link
`.mkc-paymentOption`	Option card
`.mkc-paymentOption-active`	The selected option card

Example — a little letter-spacing on the primary button:

.mkc-buttonPrimary {
  letter-spacing: 0.5px;
}

Good to know

No draft, no publish. Every change is live the moment you make it, so test with a real device on the hotspot after a big change.
Compact by design. Only your overrides are stored — the base look ships with the portal — so a heavily-branded portal and a default one cost about the same.
The same look carries over. The connected/status page a guest sees after signing in picks up your colours too.

Explore next: Design Your Captive Portal (Builder) · How Guests Connect & Pay

Need a hand? Talk to our team on WhatsApp or start your free MKController account.