Quick CSS tutorial  | Judge.me

Quick CSS tutorial

90% of customization work will be done through css. All elements in our widget have their own unique CSS classes.

To modify a specific element, you first of all need to follow these steps to identify the class of that specific element.

1) Find it's unique class.

Find the class by inspecting the element.

For example, if the background of the review icon needs to be changed to the brand icon. Inspecting icon should get you the following situation:

Now you can see that the div responsive for the icon has class jdgm-rev__icon.

2) Find the property you want to change

If you are not sure what you need to change Google is your friend. In our example would be background-image, background-color and color.

3) Write correct CSS code

This will need a bit of practice. Keep in mind as the CSS from Shopify will load before the CSS from judge.me. If we already have that property in our CSS you will have to apply !important.

In this step, you can test your potential changes on the fly by modifying the CSS in the style window of Chrome developer tools.

4) Find the scope of the change

This is a bit tricky, as some changes should be done for all elements of that class.

For example, if the preview badge text should be hidden on collection pages but show on product pages, the following CSS snippet is hiding too much:

.jdgm-prev-badge__text {
  display: none !important;
}

In this case, you will have to shrink the range where you are looking for the element. So on the page, you want to modify find an element that is unique to that page, be it a class or div id and prepend it in front of the working CSS.

On the demo sites as you can see on collection pages all of our badges are inside a div with class grid-uniform

Thus you will have to qualify our CSS with grid-uniform

.grid-uniform .jdgm-prev-badge__text {
  display: none !important;
}

Notice there is a space between grid-uniform and our CSS. That is because these two classes belong to different divs, thus they belong to different elements.

5) Decide if you want to affect all media devices

That is if you want different behavior for mobiles, tablets an desktop. You can do that by using the qualifier

dummy code:

@media all and (min-width:  size,   max-width: size ) {
   place your css in here 
}

example:

@media screen and (max-width: 425px) {
 #product-description .jdgm-prev-badge { text-align: center; }
}