Styling with custom CSS

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 and because of that it is 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.

Setting the product description text to blue

The result of the custom css

Default CSS class

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.

In case if you enabled the feature we highly recommend you to stye it accordingly to your theme design (unless you are using the default styling then it's already taken care of).

The following is 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%;
  }
}