Styling with CSS

MineOS Privacy Center allows using custom CSS to change styling of the privacy center to match your website and brand style. CSS allows you to set colors, fonts, layout, images and more to every element of the privacy center.

The following script can be used as a starting point to set your own style:

<style>

/* =========== Background =========== */
/* Background */
body { background: #ffffff }
/* Hero background */
.app__header { background: #4C3397 }
/* logo */
.form__company-icon {
	width: 100px;
	height: 100px;
}

/* =========== Text =========== */
/* Title text color */
.form__title { color: #4C3397; }
/* Text color  */
body,
label,
label span,
.form__label,
.form__label span { color: black }


/* =========== Buttons =========== */
/* Button */
.button-primary {
	background-color: #FFD400;
	border-radius: 5px;
}
/* Button text color */
.button-primary span { color: #4C3397; }
/* Button hover color */
.button-primary:hover { background: #4C3397 !important; }
.button-primary:hover span { color: #FFD400 !important; }


/* =========== Fields =========== */
/* Fields focus color */
.form__radio-hidden:checked+.form__request-item,
.dropdown__wrapper:focus:not(.dropdown__wrapper--error),
.input__element:focus { border-color: #4C3397 }

.dropdown__wrapper:focus:not(.dropdown__wrapper--error),
.input__element:focus { box-shadow: 0 0 0 1px #4C3397 }

/* Fonts */
.form__request-item { grid-column-gap: 2.5rem }
footer {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "sans-serif" !important;
	color: #2b2a35;
}

</style>