Change default Colors and add your own Styles

The easiest way to change the style is adding your own CSS styles. There are many CSS variables, which can be tailored to your needs. Be careful CSS variables are not supported in IE11 and other older browser versions. But we take care of the compatibility, you just have to use the :root selector. A list of available variables are shown below:

:root {
  # Title, background color of numbering and selected UI elements such as checkboxes and radio buttons
  --tamaro-primary-color
 
  # Defines the color for links, e.g. change currency
  --tamaro-primary-color__hover
 
  # Primary background color for selected areas
  --tamaro-primary-bg-color
 
  # Primary text color
  --tamaro-text-color
 
  # Background color for hover
  --tamaro-bg-color__hover
 
  # Primary color for borders
  --tamaro-border-color
 
  # Primary color for input field placeholders
  --tamaro-placeholder-color
 
  # Sets the color for text which are defined within an information container 
  --tamaro-info-text-color
 
  # Sets the color for info icons (e.g. CVV and instructions of credit card)
  --tamaro-info-icon-color
 
  # Sets the color for labels and underlines if an error appears
  --tamaro-error-color
 
  # Colors for default buttons, for instance the cancel button in the recurring dropdown.
  --tamaro-button-color
  --tamaro-button-color__hover
  --tamaro-button-bg-color
  --tamaro-button-bg-color__hover
  --tamaro-button-border-color
  --tamaro-button-border-color__hover
 
  # Colors for primary buttons, for instance the submit button.
  --tamaro-button-primary-color
  --tamaro-button-primary-color__hover
  --tamaro-button-primary-bg-color
  --tamaro-button-primary-bg-color__hover
  --tamaro-button-primary-border-color
  --tamaro-button-primary-border-color__hover
}

The widget has a CSS namespace `tamaro-widget`. If you want to override styles you should use this prefixes in your style to have a higher styles specifiy. Have a look at the following example:

#tamaro-widget.tamaro-widget {
 background-color: #ccc;
}