Join

Style the MyListing Flipping Boxes

Don't want to mess with code snippets? Request for this to be a feature of MyListing Pro.

Instructions

  1. Create a new CSS code snippet.
  2. Copy the contents of code snippet below.
  3. Paste the contents into your code snippet.
  4. Review any notes that I’ve provided.
  5. Save and enable the code snippet.
  6. Test.

Snippet

Set Background of All Boxes

.face.ac-back-side {
    background: red !important;
}

Set Background of Specific Boxes

If you have more than 3 boxes, copy lines 9-12, paste them into the snippet at line 13, and adjust as desired. The value you add to ‘nth-child()’ will correspond to the box when looking left to right.

/* FIRST BOX */
.ac-category:first-child .face.ac-back-side {
    background: red !important;
}
/* SECOND BOX */
.ac-category:nth-child(2) .face.ac-back-side {
    background: green !important;
}
/* THIRD BOX */
.ac-category:nth-child(3) .face.ac-back-side {
    background: blue !important;
}