Theming

After loading the SDK you will be able to set and change the theme of the widgets at any time, before or after initialising. They even support live updating, in case you feel like implementing a color picker!

Example

window.TNB('setTheme', {
  // Define your theme here
});

The most essential thing in this code is of course the value of the second argument. This value should be a normal JavaScript object. The supported attributes are listed below. Note that all properties are optional, even nested ones. The properties below are default values.

window.TNB('setTheme', {
  // The colors should be strings in a format which can be parsed
  // by https://www.npmjs.com/package/color . Normal CSS values will 
  // do
  colors: {
    primary: '#00ADED',
    secondary: '#EA5049'
  },
  // The following value is the background color when expanding the 
  // ribbon widget
  overlayColorWidget: 'rgba(70, 70, 70, 0.6)',

  // The font family of the header elements
  displayFontFamily:
    '"Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
  // In case the font family above is not provided by the browser 
  // you should import it using the value below. This value will be
  // placed in a css import like so: 
  // @import url('VALUE')
  displayFontImport: 'https://fonts.googleapis.com/css?family=Varela+Round',
  
  // The public url to your logo. It's called icon because this logo
  // shouldn't be too prominent. In the future we might also provide 
  // a 'banner' attribute for those situations
  icon: 'http://example.org/image.svg',
  // Your homepage: used when people click on your logo, for
  // example. Please use the full URL
  homePage: 'http://example.org/'
});

Trying out your theme

Styling the widget can be done "as you go". To see what your theme will look like you should go to a page which already has an activated widget installed. Finding such a page can be quite problematic if your own website does not have any active widgets yet. In this case it might be a good idea to go to our own website at https://thenextbid.com/search and open one of the listings.

Once you are on such a page, open up the JavaScript developer console and simply enter (or paste) the code created above. Press enter to apply the theme. This can repeatedly be done at any time.

Trying out a theme from the browser. After refreshing the page the theme will be reset to its initial state.

Advanced usage

The properties listed above are officially "long term" supported. However this technology is used internally at TheNextBid to run our applications (and widgets). Therefore the theme actually consists of lots more properties. These properties are listed below. You can change them if you wish, however we do not guarantee a consistent outcome. Also bear in mind that these values might change at any moment.

{
  colors: {
    primary: '#00ADED',
    secondary: '#EA5049',
    danger: '#EA5049',
    warning: '#FFC107',
    success: '#01D116',
    gray: '#616161',
    lightGray: '#CED4DA',
    body: '#212529',
  // Warning! you copied unstable code!
    bgGray: '#F5F5F5',
    white: '#FFF',
    black: '#000',
    muted: '#616161'
  },
  spacing: ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'],
  breakpoints: {
    xs: 0,
    sm: '576px',
  // Warning! you copied unstable code!
    md: '768px',
    lg: '992px',
    xl: '1200px'
  },
  fontSize: '1rem',
  fontSizeSmall: '.875rem',
  fontSizeLarge: '1.25rem',
  headerFontSize: ['2.5rem', '2rem', '1.75rem', '1.5rem', '1.25rem', '1rem'],
  displayFontSize: ['6rem', '5.5rem', '4.5rem', '3.5rem'],
  // Warning! you copied unstable code!
  displayFontWeight: 300,
  displayLineHeight: 1.2,
  body: {
    margin: 0,
    fontFamily:
      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    fontSize: '1rem',
    fontWeight: '400',
    lineHeight: '1.5',
  // Warning! you copied unstable code!
    textAlign: 'left',
    backgroundColor: '#FFF',
    backgroundColorWidget: '#FFF'
  },
  overlayColorWidget: 'rgba(70, 70, 70, 0.6)',
  ribbonLogoHeight: '38px',
  headerWeight: 500,
  headerLineHeight: 1.2,
  headerUnderlineHeight: '0.125rem',
  // Warning! you copied unstable code!
  headerUnderlineWidth: '12rem',
  headerColor: 'inherit',
  leadWeight: 300,
  leadFontSize: '1.25rem',
  displayFontFamily:
    '"Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
  displayFontImport: 'https://fonts.googleapis.com/css?family=Varela+Round',
  icon: tnbiconImg,
  inputHeight: '2.5rem',
  // Warning! you copied unstable code!
  borderWidth: '1px',
  borderRadius: '0.75rem',
  borderRadiusLarge: '0.75rem',
  borderRadiusSmall: '0.5rem',
  boxShadow: '0 .2rem .2rem rgba(0, 0, 0, .35)',
  boxShadowSmall: '0 .05rem .1rem rgba(0, 0, 0, 0.25)',
  jumbotronPadding: '2rem',
  inputBorderWidth: '1px',
  buttonFontWeight: 400,
  // Warning! you copied unstable code!
  buttonBorderWidth: '1px',
  buttonPadding: '0.375rem 0.75rem',
  homePage: null,
  checkbox: {
    height: '1rem',
    duration: '.4s'
  }
}