Search Form Demo Pages A collection of useful examples you can play with

Example: Customizing CSS Styles. Custom Design

The working example below shows the usage with customized design:

Custom Header

Widget Code (please note that uuid parameter should be different for your own widget ):

<div style="-webkit-box-shadow: 2px 2px 13px 0px rgba(50, 50, 50, 0.75); width:620px; -moz-box-shadow: 2px 2px 13px 0px rgba(50, 50, 50, 0.75); box-shadow: 2px 2px 13px 0px rgba(50, 50, 50, 0.75); padding:10px;margin: 30px 0px;">
    <h3 class="title-divider">
        <span>Custom <span class="de-em">Header</span></span>
    </h3>
    <div id="ws-widget"></div>
</div>
<script src="//services.wheel-size.com/code/ws-widget.js"></script>
<script>
  var widget = WheelSizeWidgets.create('#ws-widget', {
    uuid: 'ed83f09f5d404e1e9270b61927f87046',
    width: '600'
  });
</script>

CSS Code :

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,600italic,600,400italic,300,800|Rambla:400,700);
html,body {
    // background-color:@background-main;
    // color:@color-content;
    font-family:'Open Sans',sans-serif!important;
}
button,a {
    // outline:none;
    &:focus {
        // outline:none !important;
    }
}
a {
    // color:@color-link;
    &:hover,&:active,&:focus {
        // color:@color-link-hover;
    }
}
.widget .nav-tabs {
    // display:table;
    // width:100%;
    // border:none;
    // background-color:@background-tabs;
    >li {
        // display:table-cell;
        // text-align:center;
        // float:none;
        // border:1px solid transparent;
        // border-top-width:4px;
        // border-bottom-color:@color-tabs-border;
        a {
            // background-color:@background-tabs;
            // border-radius:0;
            // border:none;
            // color:@color-tabs;
            // font-weight:bold;
            // font-size:16px;
            // margin:0;
            // padding:10px;
        }
        &.active {
            &:not(:first-child) {
                // border-left-color:@color-tabs-border !important;
            }
            &:not(:last-child) {
                // border-right-color:@color-tabs-border !important;
            }
            // border-top-color:@color-main !important;
            // border-bottom-color:transparent;
            a {
                // color:@color-main;
                // background-color:@background-tabs;
                // border:none;
            }
        }
    }
}
.widget .tab-pane {
    // padding:5px 5px 0;
    // background-color:@background-content;
}
.widget .finder {
    h4 {
        color:#e47911;
        font-family:Rambla;
        font-size:12px;
        font-weight:bold;
        text-align:right;
    }
    // .bootstrap-select {
        // width:33%;
        // margin-right:0.5%;
        .btn {
            // color:@color-select-button;
            // background-color:@background-select-button;
            // background-image:linear-gradient(to bottom,#ffffff,#e6e6e6);
            // border-radius:2px;
            // font-size:13px;
            // font-weight:bold;
            // padding:4px 24px;
        }
        .dropdown-menu.open {
            // background-color:@background-select;
            // border:1px solid @color-border;
            .selectpicker {
                // max-height:183px;
            }
            li>a {
                // color:@color-select;
                &:hover,&:focus {
                    // background-color:@background-select-hover;
                }
            }
        }
        .dropdown-menu li:first-child {
            // border-bottom:1px dashed @color-tabs-border;
            a {
                // font-style:italic;
            }
        }
        &:last-child {
            // margin-right:0;
        }
    }
    @media (max-width:350px) {
        .bootstrap-select {
            // width:100%;
            // margin:0 0 3px;
        }
    }
}
.widget .finder-result {
    // margin-top:10px;
    // table {
        tr.oem {
            // font-weight:bold;
            // background-color:@background-vehicles-oem;
            td {
                color:#777;
            }
            td:first-child {
                color:#333;
            }
        }
        @media (min-width:351px) {
            .caret {
                color:@color-main;
                // margin-top:8px;
                // border-top:none;
                // border-right:6px solid transparent;
                // border-left:6px solid transparent;
                &.caret-collapsed {
                    // border-top:5px solid;
                }
                &.caret-expanded {
                    // border-bottom:5px solid;
                }
            }
        }
        .market-header tr td {
            // font-size:24px;
            color:@color-main;
            font-family:'Rambla',sans-serif;
        }
        .content-header tr th {
            // font-size:24px;
            color:@color-main;
            font-family:'Rambla',sans-serif;
        }
    }
    .btn-go-to-ws {
        // background-color:@background-on-wheelsize-button;
        // color:@color-on-wheelsize;
        // display:block;
        .model-title {
            // font-weight:bold;
            // font-size:20px;
        }
        @media (max-width:350px) {
            .model-title {
                // display:block;
                // white-space:normal;
            }
        }
        .separator {
            // margin:0 5px;
        }
        .ws-logo {
            // color:@color-on-wheelsize-link;
            // font-size:20px;
            // font-weight:bold;
            // margin-right:5px;
        }
        .glyphicon {
            // font-size:18px;
        }
    }
    .matching-make {
        // padding:7px 0;
        // border-bottom:1px dashed @color-dashed-border;
        .tag {
            // float:left;
            // display:block;
            // padding:4px 8px;
            // background-color:@background-label-make;
            // color:@color-label-make-count;
            // margin:0 20px 0 0;
            a {
                // text-transform:uppercase;
                // font-weight:bold;
                // margin:0 5px 0 0;
            }
        }
        .models-list {
            // overflow:hidden;
        }
        .matching-model {
            // margin:3px 10px 5px 0;
            // background-color:@background-label-model;
            // padding:1px 7px;
            // display:inline-block;
            span {
                // color:@color-label-model-years;
                // letter-spacing:-1px;
            }
            &.selected {
                // background-color:@background-label-model-selected;
                // color:@color-label-model-selected;
                span {
                    // color:@color-label-model-selected;
                }
            }
        }
        .matching-trims-years {
            // padding:15px 20px;
            // background-color:@background-trims-years;
            // color:@color-trims-years;
            // border-radius:10px;
            // margin-top:10px;
            h4 {
                // color:@color-trims-years-header;
                // margin-top:0;
            }
            .trim {
                // display:inline-block;
                // font-weight:bold;
                // min-width:60px;
            }
            .year {
                // margin:0 0 0 5px;
            }
        }
    }
}
.widget .finder-result-loading {
    // margin:15px 4px 0;
    // background:url(/static/widget/img/shadow.gif) repeat scroll center center transparent;
    // outline:2px dashed #dedede;
    // outline-offset:2px;
    // min-height:70px;
    // position:relative;
    .loader {
        // background:url(/static/widget/img/preloader-wheel.gif) no-repeat scroll center center transparent;
        // display:block;
        // width:32px;
        // height:32px;
        // margin:auto;
        // position:absolute;
        // top:0;
        // bottom:0;
        // left:0;
        // right: 0;
    }
}
@media only screen and (max-width:350px) {
    .adaptive-tables {
        .cf:after {
            // visibility:hidden;
            /*display:block;*/
            // font-size:0;
            // content:" ";
            // clear:both;
            // height:0;
        }
        * html .cf {
            // zoom:1;
        }
        *:first-child+html .cf {
            // zoom:1;
        }
        table {
            // display:block;
            // position:relative;
            // width:100%;
            // border-collapse:collapse;
            // border-spacing:0;
        }
        table .caret {
            // margin:5px 0 0 8px;
            // border-right:none;
            // border-top:6px solid transparent;
            // border-bottom:6px solid transparent;
            &.caret-collapsed {
                // border-left:7px solid;
            }
            &.caret-expanded {
                // border-right:7px solid;
            }
        }
        table .market-header {
            // display:block;
            // margin:30px 0 20px;
            tr {
                // display:block;
            }
            td {
                // display:block;
                // text-align:center;
                // font-size:20px;
            }
        }
        th,td {
            // margin:0;
            // vertical-align:top;
            // height:35px;
        }
        th {
            // text-align:left;
            // border:none !important;
        }
        thead.content-header {
            // display:block;
            // float:left;
            tr {
                // display:block;
            }
        }
        tbody {
            // display:block;
            // width:auto;
            // position:relative;
            // overflow-x:auto;
            // white-space:nowrap;
        }
        th {
            // display:block;
            // text-align:right;
        }
        tbody tr {
            // display:inline-block;
            // vertical-align:top;
        }
        td {
            // display:block;
            // min-height:1.45em;
            // text-align:left;
        }
        tr.collapse {
            // display:none;
        }
        tbody tr.collapse.in {
            // display:inline-block;
        }
        th {
            // border-bottom:0;
            // border-left:0;
        }
        td {
            // border-left:0;
            // border-right:0;
            // border-bottom:0;
        }
        tbody tr {
            // border-left:0px solid @color-border;
        }
        th:last-child,td:last-child {
            // border-bottom:0px solid @color-border;
        }
    }
}
.brand-icons [class^='make-'] .text {
    // padding-left:32px;
    // position:relative;
    // display:inline-block;
}
.brand-icons [class^='make-'] .text:before {
    // display:block;
    // content:'';
    // position:absolute;
    // background:url('/static/widget/img/car-vehicles-brands-sprite-image-optmized.png') no-repeat scroll 1000px 0 transparent;
    // height:20px;
    // width:27px;
    // top:0;
    // left:0;
}
a.btn-go-to-ws {
    font-size:14px!important;
}
.widget .finder-result .btn-go-to-ws {
    background-color:#333;
    color:#fff;
    float:right;
    max-width:400px;
}
.widget .finder-result .btn-go-to-ws .model-title {
    font-size:14px;
    font-weight:bold;
}
.widget .finder-result .btn-go-to-ws .ws-logo {
    font-size:14px;
}
.finder-result>p {
    display: none;
}

Get more widget API events and functions!

Please email us in case you need something else. We are open for any ideas.