Styling Options

The PC Frontend widgets can be styled to match you sites colors and fonts. The make this possible you can load a JavaScript variable with overwrites for the default styling. You set the name of this variable inside the configuration:

<script>
  var tdsPcInpageConfig = tdsPcInpageConfig || {}
  tdsPcInpageConfig["widgetId"] = {
    options: {
      themeVariable: [the-name-of-you-variable]
    }
  }
</script>

This is an overview of how the variable is structured. You only have to define the keys that you want to overwrite:

{
  background: {
    color: "#000000"
  },
  clickOutButton: {
    bgColor: "#000000",
    borderColor: "none",
    borderRadius: "2px",
    borderStyle: "none",
    borderWidth: "0px",
    boxShadow: "0",
    hoverBackgroundColor: "#000000",
    hoverTextColor: "#000000",
    textColor: "#000000"
  },
  filter: {
    collapseLinkColor: "#000000",
    mainFiltersBackgroundColor: "#000000",
    mainFiltersBorderColor: "#000000",
    moreFiltersColor: "#000000",
    resetFiltersColor: "#000000",
    secondaryFiltersBackgroundColor: "#000000",
    secondaryFiltersBorderColor: "#000000",
    selectAllLinkColor: "#000000",
    checkboxList: {
      borderColor: "#000000",
      checkedBackgroundColor: "#000000",
      checkColor: "#000000",
      hoverBackgroundColor: "#000000"
    },
    logoListFilter: {
      borderColor: "#000000",
    },
    radioButtonList: {
      borderColor: "#000000",
      checkedBackgroundColor: "#000000",
      checkColor: "#000000",
      hoverBackgroundColor: "#000000"
    },
    selectFilter: {
      textColor: "#000000",
    }
  },
  font: {
    family: "'Open Sans', Helvetica, Arial, Sans-Serif"
  }
  generic: {
    borderRadius: "2px",
    maxWidgetWidth: "100%",
    minWidgetWidth: "310px",
  },
  modal: {
    backgroundColor: "#000000",
    closeButtonsBackgroundColor: "#000000",
    tco: {
      shopsLinkColor: "#000000"
    },
    textColor: "#000000"
  },
  monthlyFee: {
    currencyColor: "#000000"
  },
  nonDefaultFilter: {
    resetFiltersColor: "#000000",
    valueColor: "#000000",
    valueBackgroundColor: "#000000"
  },
  offerContent: {
    backgroundColor: "#000000"
  },
  offerResults: {
    backgroundColor: "#000000",
    blockBackgroundColor: "#000000",
    borderColor: "#000000",
    collapsibleLinkAlign: "right",
    collapsibleLinkColor: "#000000",
    collapsibleLinkFontSize: "14px",
    collapsibleLinkPositionTop: "0px",
    shopsLinkColor: "#000000",
    sponsoredBorderColor: "#000000"
  },
  offerTitle: {
    textColor: "#000000",
    withImage: true
  },
  pagination: {
    activeNumberColor: "#000000",
    gapColor: "#000000",
    numbersColor: "#000000",
    previousNextColor: "#000000"
  },
  phoneChanger: {
    phoneImageColor: "#000000",
    simOnlyImageColor: "#000000",
    show: true
  },
  phoneInfoBar: {
    mobilePhoneVariantAndMemorySelectorBackgroundColor: "#000000",
    mobilePhoneVariantAndMemorySelectorCloseButtonBackgroundColor: "#000000",
    mobilePhoneVariantAndMemorySelectorCloseButtonColor: "#000000",
    openMobilePhoneVariantAndMemorySelectorColor: "#000000",
    show: true
  },
  phonePicker: {
    brandsNavTextColor: "#000000",
    brandTextColor: "#000000",
    itemHoverColor: "#000000",
    tabsColor: "#000000",
    tabsSearchColor: "#000000"
  },
  specialOffer: {
    textColor: "#000000"
  },
  sponsoredPosition: {
    borderColor: "#000000",
    labelBackgroundColor: "#000000"
  },
  slider: {
    backGroundColor: "#000000",
    fillColor: "#000000",
    handleColor: "#000000",
    valueColor: "#000000",
    valueBackgroundColor: "#000000"
  },
  tco: {
    currencyColor: "#000000"
  }
}