Dit artikel is ook beschikbaar in:
####### Styling van de Product Spotlight app

Met de product spotlight app kunt u uw eigen styling toevoegen.
in de instellingen van de app kunt u kiezen om de standaard styling in/uit te schakelen. de standaard styling is standaard ingeschakeld.
in de instellingen kunt u ook de css toevoegen die u wilt. Je moet wel voorzichtig zijn, want de css die je daar toevoegt kan je blogpagina beïnvloeden. daarom is het belangrijk dat je de css met id's en klassen specificeert. Als u wilt zien welke id's/klassen waar worden gebruikt, gebruik dan de inspecteur in uw browser.

Hier ziet u een voorbeeld van hoe we wat aangepaste css hebben toegevoegd en hoe het de pop-up modal heeft beïnvloed.





objecten
de css die we hebben gemaakt is gemaakt voor twee objecten. Een daarvan is de pop-up modal op uw blog. Het tweede object is de doos die de producten laat zien die in de blog zijn gebruikt. Er is een kans dat het object dat de genoemde producten weergeeft geen styling nodig heeft omdat het een optionele functie is. Mocht je die functie wel gebruiken dan raden we je aan deze te stylen (tenzij je de standaard styling gebruikt. dan is daar al voor gezorgd).

Hier beneden ziet u de standaard css die u kunt uitschakelen of overschrijven.
.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%;
}
}
Was dit artikel behulpzaam ?
annuleren
Dank je wel !