Try Widget

This page allows you to try out widget capabilities without registration.
Play with widget preferences as you wish but be aware that
you need to register if you want to embed a widget on your site.

If you change widget language, save configuration to update preview.

Widget Language

Add your own translation

Customize Size

If you change height from autoresize to fixed or vice versa, preview will be updated only after saving.

Widget width must not be less than 600 for correct representation.

Widget Width

Empty width means 100%

Widget Height

Empty height means autoresize

Customize Widget Content

Choose blocks that will be shown in your widget. Preview will be updated only after saving.

Show plus sizing block

Collapse plus sizing by default

Show minus sizing block

Collapse minus sizing by default

Show comparison table

Collapse comparison table by default

Choose default units and sizing system.

Sizing system

Length

Mass

Be aware that wheel calculator saves last selected units and collapse state locally for each user.
However, user changes are not saved on this configuration page. Use this page to see default state of your wheel calculator widget.

Customize Colors

Feel free to use any Less features in color variables or advanced mode.

You may choose one of predefined color themes or create your own. New theme will be created once you edit one of the predefined color theme.

Choose Color Theme

Show More Colors Advanced Edit

/*
Please, don't try to change these variables,
because all of them will be replaced by values picked via colorpicker.

If you really need to use less variables, feel free to create your own.

@color-main: #be3e1d;
@color-link: @color-main;
@color-content: #333333;
@background-main: #ffffff;

@color-border: #dddddd;
@color-link-hover: darken(@color-link, 10);
@color-header-hints: lighten(@color-content, 40);
@color-plus-sizing-border: lighten(@color-main, 40);
@color-dashed-border: (2 * @background-main + 5 * @color-content) / 7;
@color-active-wheel: #ffffff;
@color-oem-wheel: @color-active-wheel;
@color-possible-rim-size: @color-active-wheel;
@color-select: @color-content;
@color-primary-select-border: @color-main;
@color-secondary-select-border: @color-dashed-border;
@color-plus-sizing-diff: @color-secondary-select-border;
@color-plus-sizing-rim: darken(@color-content, 10);
@color-cmp-more: seagreen;
@color-cmp-less: crimson;
@color-popover-title: @color-content;

@background-select: darken(@background-main, 5);
@background-oem-wheel: @color-main;
@background-active-wheel: darken(@background-oem-wheel, 27%);
@background-best-exchange: @background-active-wheel;
@background-good-exchange: (lighten(@background-oem-wheel, 15%) + #999999) / 2;
@background-plus-sizing: darken(@background-main, 10);
@background-loading-overlay: (2 * @color-content + @background-main) / 3;
@background-loading-overlay-stripe: rgba(255, 255, 255, .2);
@background-popover: lighten(@background-main, 10);
@background-popover-title: darken(@background-popover, 10);

@svg-background: @background-main;
@svg-color: lighten(@color-content, 10);
@svg-background-brakes: darken(@svg-background, 7);
@svg-border: lighten(@color-content, 20);
@svg-border-rim: darken(@svg-color, 10);
@svg-background-suspension: darken(@svg-background, 20);
@svg-background-rim: lighten(@svg-color, 30);
@svg-background-tire: lighten(@svg-color, 15);
@svg-background-hover: darken(@svg-background, 20);
@svg-center-line: lighten(@svg-border, 20);
@svg-border-hover: darken(@color-content, 10);
@svg-background-axle: @svg-background-suspension;
@svg-color-error: @color-cmp-less;
@svg-border-tire: @svg-border-rim;
@svg-color-text: @color-link-hover;
@svg-extension-line: @svg-color;
@svg-scrub-radius: @svg-color-text;
*/

html {
}

body {
//  color: @color-content;
//  background: @background-main;
}

body a {
//  color: @color-link;

&:hover {
//    color: @color-link-hover;
  }
}

.table-bordered {
  &, th, td, tbody {
//    border-color: @color-border;
  }
}

.title-divider {
//  color: @color-content;

small {
//    color: @color-content;
//    opacity: 0.5;
  }
}

.wheel-forms {
  .wheel-params-form {
    .caption-container {
//      text-align: left;
//      display: flex;

.caption {
//        color: @color-header-hints;
//        line-height: 14px;
//        display: flex;
//        align-items: center;
      }

.unit-system-select {
//        font-size: 12px;
//        margin: 0 15px 0 0;
//        width: 110px;
//        padding: 1px;
      }
    }

.params-container {
//      padding-top: 20px;
//      @param-select-width: 70px;

.param-wrapper {
//        display: inline-block;
      }

.param {
//        position: relative;
//        width: @param-select-width;
//        display: inline-block;
      }

.delimiter {
//        color: @color-header-hints;
//        font-size: 12px;
//        position: relative;
//        top: -7px;
//        width: 12px;
//        display: inline-block;
      }

.param-hint {
//        position: absolute;
//        top: -20px;
//        left: -5px;
//        font-size: 10px;
//        text-transform: uppercase;
//        line-height: 10px;
//        font-family: Rambla, arial, sans-serif;
//        font-weight: bold;
//        color: @color-header-hints;
//        width: @param-select-width + 10px;
//        height: 20px;
//        display: flex;
//        justify-content: center;
//        align-items: center;
      }

select {
//        background: @background-select;
//        padding: 0 2px;
//        width: @param-select-width;
//        font-family: 'Open Sans', sans-serif;
//        border: none;
//        border-top: 3px solid @color-primary-select-border;
//        border-radius: 0;
//        font-weight: bold;
//        font-size: 16px;
//        margin-bottom: 20px;
      }
    }
  }

.units-select {
//    width: 60px;
  }

td {
//    text-align: center;
  }

form {
//    display: inline-block;
//    margin: 0;
  }
}

.wheel-comparison {
  .cmp {
//    font-size: 32px;
//    display: inline-block;
//    position: relative;
//    top: -3px;
//    width: 55px;

&.more {
//      color: @color-cmp-more;
    }

&.less {
//      color: @color-cmp-less;
    }

.percent {
//      font-size: 12px;
//      vertical-align: middle;
//      line-height: 10px;
    }
  }
  td {
//    text-align: center;
  }
  th {
//    text-align: center;
  }
}

.wheel-table {
  select {
//    border: none;
//    border-top: 2px solid @color-secondary-select-border;
//    border-radius: 0;
//    background: @background-select;
//    margin-bottom: 5px;
//    outline: none;
//    color: @color-select;
  }

.wheel-item {
//    width: 42%;
  }

.rim-size-hint {
    a {
//      padding: 0 10px;
//      background-color: @background-active-wheel;
//      font-weight: bold;
//      margin: 0 10px 0 0;
//      position: relative;
//      display: inline-block;
//      opacity: 0.5;
//      color: @color-possible-rim-size;

&:hover {
//        text-decoration: none;
//        opacity: 0.8;
      }

&.active {
//        opacity: 1;
      }
    }
  }

td.plus-sizing-cell {
//    padding: 0;
  }

.header-column {
//    width: 16%;
//    text-align: center;
//    position: relative;
  }

.collapse-btn {
//    font-family: "Rambla", Arial, serif;
//    font-size: 21px;
//    margin-left: 2px;
//    text-decoration: none;

span {
//      color: @color-content;
    }
  }

.wheel-comparison .collapse-btn.expanded {
//    display: block;
//    font-size: 20px;
//    float: left;
  }

.drawings-container {
//    position: relative;

.fullscreen-button {
//      position: absolute;
//      top: 10px;
//      left: 10px;
//      display: block;
//      width: 25px;
//      height: 25px;
//      font-size: 20px;
//      padding: 2px 0 0 4px;
//      box-sizing: border-box;
//      cursor: pointer;

&:hover {
//        text-decoration: none;
      }
    }

.drawing-cell {
//      overflow: hidden;
    }

.drawing {
//      width: 100%;
//      position: relative;

&.wheel-loading {
        @keyframes move {
          0% {
//            background-position: 0 0;
          }
          100% {
//            background-position: 50px 50px;
          }
        }
        &::after {
//          position: absolute;
//          width: 100%;
//          height: 100%;
//          top: 0;
//          left: 0;
//          opacity: 0.7;
//          z-index: 500;
//          content: '';
//          background: @background-loading-overlay linear-gradient(
//                  -45deg,
//                  @background-loading-overlay-stripe 25%,
//                  transparent 25%,
//                  transparent 50%,
//                  @background-loading-overlay-stripe 50%,
//                  @background-loading-overlay-stripe 75%,
//                  transparent 75%,
//                  transparent
//          );
//          background-size: 50px 50px;
//          animation: move 2s linear infinite;
//          overflow: hidden;
        }
      }
    }

&.fullscreen {

.drawing {
//        position: fixed;
//        width: 50%;
//        height: 100%;
//        top: 0;
//        z-index: 1000;

&.wheel0 {
//          left: 0;
        }
        &.wheel1 {
//          right: 0;
        }
      }
    }

&.inline-fullscreen {

.drawing {
//        position: fixed;
//        width: 50%;
//        top: 0;
//        z-index: 1000;
//        border: 1px solid @color-border;

&.wheel0 {
//          left: 0;
        }
        &.wheel1 {
//          right: 0;
        }
      }
    }
  }

.text-center {
//    text-align: center;
  }

.hint-link {
//    width: 20px;
  }

.custom-param-label {
//    text-align: left;
//    padding-left: 10px;
  }

.custom-param select {
//    font-family: 'Open Sans', sans-serif;
  }

.popover {
//    background: @background-popover;

.popover-content img {
//      max-width: none;
    }
  }
  .popover-title {
//    color: @color-popover-title;
//    background: @background-popover-title;
  }
  .popover.right .arrow:after {
//    border-right-color: @background-popover;
  }
}

.plus-sizing-table {
  table {
//    border: none;
//    width: 100%;

&.sizing-1 {
//      border-top: 1px solid @color-border;
    }
  }

th, td {
//    border: none;
//    vertical-align: top;
  }

.expanded {
    th, td {
//      padding: 12px 4px;
    }
  }

th {
//    width: 100px;
//    font-size: 18px;
//    color: @color-content;
//    text-align: center;

.units {
//      font-size: 12px;
//      font-weight: normal;
//      color: @color-header-hints;
    }

.units-inch {
//      font-weight: normal;
//      color: @color-header-hints;
    }

.plus-sizing-label {
//      font-size: 12px;
//      background-color: @background-plus-sizing;
//      display: inline-block;
//      width: 70px;
//      text-align: center;
//      border-radius: 0px;
//      margin-left: 5px;
//      border: 1px solid @color-plus-sizing-border;
    }
  }
  tr:first-child td, tr:first-child th {
//    width: 14%;
  }

.plus-sizing-item {
//    color: #666;
//    line-height: 25px;
//    margin: 0 10px 0 0;
//    padding: 0 5px;

a {
//      border-bottom: 1px dashed @color-header-hints;

&:hover {
//        border-bottom: 1px dashed @color-content;
//        text-decoration: none;
      }
    }
    &.best-exchange, &.good-exchange, &.oem {
      a {
//        border-color: @color-active-wheel;

&:hover {
//          border: none;
        }
        span.delimiter {
//          opacity: 0.5;
        }
      }
      a span, .diff {
//        color: @color-active-wheel;
      }
    }

&.best-exchange {
//      background-color: @background-best-exchange;
    }

&.good-exchange {
//      background-color: @background-good-exchange;
    }

&.oem {
//      font-weight: bold;
//      background-color: @background-oem-wheel;
    }

.diff {
//      color: @color-plus-sizing-diff;
//      font-size: 9px;
//      display: inline-block;
//      float: right;

.diff-units {
//        font-size: 8px;
      }
    }

span.tire.with-tooltip {
//      display: none;
    }

span.rim {
//      color: @color-plus-sizing-rim;

span.et {
//        font-size: 9px;
      }
    }

span.delimiter {
//      font-size: 12px;
//      color: @color-header-hints;
    }
  }

.plus-sizing-legend {
//    display: flex;
//    justify-content: center;

.plus-sizing-legend-inner {
//      display: flex;
//      justify-content: center;
    }

.legend-item {
//      display: flex;
//      margin: 1px 30px;
//      font-size: 13px;

span {
//        width: 30px;
//        margin: 0 5px 0 0;
//        border: 1px solid @color-border;
      }
    }
    @media (max-width: 950px) {
      .legend-item {
//        margin: 1px 15px;
      }
    }

@media (max-width: 800px) {
      .plus-sizing-legend-inner {
//        flex-direction: column;
      }
    }
  }
}

.wheels-tumbler {
//  @opacity: 0.5;

.tumbler-item {
//    padding: 0 10px;
//    background-color: @background-plus-sizing;
//    font-weight: bold;
//    margin: 0 10px 5px;
//    position: relative;
//    display: inline-block;
//    opacity: @opacity;

&:hover {
//      opacity: 1;

.remove-item {
//        opacity: @opacity;
      }
    }

a {
//      font-size: 12px;
//      color: @color-content;
//      text-decoration: none;
//      padding: 0;
    }
    .oem-label {
//      font-weight: bold;
//      vertical-align: middle;
    }

.btn span {
//      display: inline;

&.et {
//        font-size: 9px;
      }

&.delimiter {
//        opacity: 0.7;
      }
    }

.remove-item {
//      margin-left: 5px;

&:hover {
//        color: @color-main;
//        opacity: 1;
      }
    }

&.active-wheel {
//      background-color: @background-active-wheel;
//      opacity: 1;

a {
//        color: @color-active-wheel;
//        cursor: default;
      }

.remove-item {
//        display: none;
      }
    }

&.oem-wheel {
//      background-color: @background-oem-wheel;
//      color: @color-oem-wheel;
//      opacity: 1;

a {
//        color: @color-oem-wheel;
//        cursor: default;
      }
    }
  }
}

.drawing {
//  background: @svg-background;

.text {
//    fill: @svg-color-text;
  }

.text-label {
//    fill: @svg-color-text;
  }

.text-background {
//    fill: @svg-background;
  }

marker use {
//    fill: @svg-color;
  }

.extension-line {
//    stroke: @svg-extension-line;
//    stroke-width: 1;

&.hover {
//      stroke-width: 2;
    }
  }

.center-line {
//    stroke: @svg-center-line;
  }

.scrub-radius {
//    stroke: @svg-color-text;
  }

.suspension {
//    fill: @svg-background-suspension;
//    stroke: @svg-border;
  }

.suspension-hole {
//    fill: @svg-background;
//    stroke: @svg-border;
  }

.brake-disc, .brake-support, .suspension-spring, .hub-mount-plate {
//    fill: @svg-background-brakes;
//    stroke: @svg-border;
  }

.hub-axle {
//    fill: @svg-background-axle;
//    stroke: @svg-border;
  }

.tire {
//    fill: @svg-background-tire;
//    stroke: @svg-border-tire;
  }

.rim {
//    fill: @svg-background-rim;
//    stroke: @svg-border-rim;
  }

.rim-borderline {
//    stroke: @svg-border;
  }

.fender {
//    stroke: @svg-border;
  }

.tire, .rim {
    &.hover {
//      stroke: @svg-border-hover;
//      fill: @svg-background-hover;
    }
  }

.fender, .suspension {
    &.hover {
//      stroke: @svg-border-hover;
//      fill: @svg-background;
    }
  }

.error {
//    stroke: @svg-color-error !important;
  }
}

@media (max-width: 959px) {
  .plus-sizing-table {
    .plus-sizing-item {
//      span.rim,
//      span.delimiter,
      span.tire.without-tooltip {
//        display: none;
      }

span.tire.with-tooltip {
//        display: inline;
      }
    }

}

.wheel-table  .collapse-btn.expanded {
//    font-size: 16px !important;
  }

.drawings-container {
    .header-column {
      label {
//        font-size: 12px;
      }
    }
  }

.wheel-comparison {
    .header-column {
//      font-size: 13px;
    }

.rim-size-hint a {
//      margin-bottom: 2px;
    }
  }

.drawing svg {
    text {
//      font-size: 13px !important;
    }
  }
}

@media (min-width: 960px) and (max-width: 1039px) {
  .plus-sizing-table {
    .plus-sizing-item {
//      font-size: 12px;
//      margin: 0 5px 0 0;
//      padding: 0 3px;

span.delimiter {
//        display: none;
      }
    }
  }

.wheel-table  .collapse-btn.expanded {
//    font-size: 18px;
  }

.drawing svg {
    text {
//      font-size: 12px !important;
    }
  }
}

@media (min-width: 1040px) and (max-width: 1170px) {
  .plus-sizing-table {
    .plus-sizing-item {
//      font-size: 12px;
//      margin: 0 5px 0 0;
    }
  }

.drawing svg {
    text {
//      font-size: 11px !important;
    }
  }
}

@media (max-width: 800px) {
  .wheel-params-form {
    .caption {
//      font-size: 12px;
    }
  }
}

@media (min-width: 680px) and (max-width: 800px) {
  .plus-sizing-table {
    .plus-sizing-item {
//      font-size: 13px;
//      margin: 0;
    }
  }
}

@media (min-width: 630px) and (max-width: 679px) {
  .plus-sizing-table {
    .plus-sizing-item {
//      font-size: 12px;
//      margin: 0;
//      padding: 0 2px;
    }
  }
}

@media (max-width: 629px) {
  .plus-sizing-table {
    .plus-sizing-item {
//      font-size: 11px;
//      margin: 0;
//      padding: 0 2px;
    }
  }
}

Please, correct errors in color variables

Wheel-Size Services

Try Widget

Customize Size

Customize Widget Content

Customize Colors

Preview