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;
}