Product spotlight - styling

Styling the Product Spotlight app

The product spotlight app allows you to add your own styling.
in the settings of the app you can chose to enable/disable the standard styling. the standard styling is by default enabled.
in the settings you can also add the css you want to. You need to be careful though cause the css you add in there can affect your blog page. because of that it's important that you specify the css with id's and classes. If you want to see which id's/classes are used where, use the inspector in your browser.

Here you can see an example of how we added some custom css and how it affected the pop-up modal.

objects

the css we created is made for two objects. One is the pop-up modal on your blog. The second object is the box that displays the products that were used in the blog. There is a chance that the object that displays the mentioned products doesn't need styling cause it's an optional feature. Incase you do use that feature we highly recommend you styling it (unless you are using the default styling. then it's already taken care of ).

Down here you can see the default css which you can disable or overwrite.

.TomITproductGridItem{
  width:25%;
   float:left;
   list-style-type:none;
   margin:0;
   padding:0; 
 }
 .TomITproductGridItem:hover{
   opacity:0.7;
 }
  #TomITProductView{
	display:none;
    padding:20px;
  }
  #tomITContentHolder ul{
    margin:0;
    padding:0;
  }
  #tomITContentHolder li{
    list-style-type:none;
  }
  #tomITContentHolder{
    padding-top:10px;
  }
  #tomITContentHolder strong{
   margin-bottom:10px;
   display: block;
   border-bottom:1px solid #eee;
  }
  #tomITContentHolder{
   cursor:pointer; 
  }
  .TomITProductPopup{
  display:block;
 width:200px;
  min-height:240px;
  border:1px solid #ccc;
  padding:10px;
  text-align:center;
  position:absolute;
  visibility:hidden;
  background:rgba(255,255,255,1);
}
.TomITProductPopup strong{
 font-size:10px; 
  line-height:auto;
}
.TomITproductGridItem{
width:22%;
  float:left;
  margin-right:15px;
  list-style-type:none;
}
.TomITproductGridItem .TomITProductTitle{
min-height:80px; 
  display:block;
  font-weight:bold;
}
.TomITProductImage{
    width: 100%;
    height: 170px;
    overflow: hidden;
}
.TomITProductImage img{
 max-height:100%; 
 max-width:100%;
}
@media only screen and (max-width: 600px) {
  .tomit_add_to_cart {
   width:90%;
  }
}

Updated on: 24/04/2020