Themed products for a positive user‐centered experience.

In this page


This project is the beginning of adjusting Collections to convey a luxury look and feel. The two parts that will be affected will be the grid layout and filter UI which will entail the following:

  • Revise the filter UI for a better UX
  • Introduce buttons in the filter panel
  • Modify the content in the grid boxes
  • Optimize the overall layout of the Collections grid

In addition, to the UI of the Gallery pages in Collection, we will also introduce the new product page.

Grid Layout

Jan 13th, 2020

Collections Layout

There are several significant adjustments to the grid layout of the Collection pages. These are the adjustments:

  • Double‐sized Box
  • Product Grid Box
  • Destination Badge
  • Product Name: Info Box
  • Promo Grid Box

See Annotations

Drupal Iterations

We did several successful iterations of the code adjustments below in Drupal. Here is a video of changes in Drupal.

Double‐sized Box (Large Box)

Collections will no longer display the large square.

Code Specifications


This file contains the code that doubles the size of randomly selected hotel boxes. The original code is here: Lines 232 – 238. This code applies the classes grid-item--width2 and collection_grid_large to randomly selected boxes on the page based on indicies in another javascript file.

                      <if (in_array($index, $random_indicies)) {
                      <$html_class = "grid-item grid-item--width2 card";
                      <$style_name = "collection_grid_large";
                      <} else {
                      <$html_class = "grid-item card";
                      <$style_name = "collection_grid";


We determined that the lines highlighted in following link will disable the double-sized box without affecting the entire grid.

  • Lines 232 - 235
  • Line 238

Double-sized Box PHP Code


The CSS Specifications in the boxes below are changes or adjustments to the existing CSS. Do not delete the CSS, currently in the CSS file, if it is not listed below.

Product Grid Box

This is for the rounded corners of the product grid box.

Code Specifications

.carousel-inner>.item>a>img,.carousel-inner>.item>img, .img-responsive, .thumbnail a>img, thumbnail>img

  • border-radius: 4px

See Grid Box

Destination Badge

This is the text in the dark gray badge that contains the region.

Code Specifications

.node-type-cv-collection span.text-content1

  • font-family: 'Poppins', sans-serif;
  • font-size: 10px;
  • letter-spacing: 1px;
  • border-radius: 4px;
  • padding: 5px 10px;

See Destination Badge

Product Name: Info Box

This is the name of the hotel and the background layout.

Code Specifications

.node-type-cv-collection span.text-content

  • font-family: 'Poppins', sans-serif;
  • font-size: 14px;
  • font-weight: 500
  • letter-spacing: 1px
  • color: #1F1F1F
  • padding: 10px 10px 10px 0px;
  • width: 100%
  • background-color: #FFFFFF
  • height: 65px;

See Product Name in Info Box

Promo Grid Box

This is for the promotion ad box which will look differebt from the product grid box.

Code Specifications

Promo Ad

.node-type-cv-collection .cv-promo_grid_ad

  • border-radius: 4px;


.node-type-cv-collection .cv-promo_grid_ad .promo_title

  • font-family: 'Poppins', sans-serif;
  • font-size: 14px;
  • font-weight: 500
  • letter-spacing: 1px
  • Color: #15305d

Inside the Box

.node-type-cv-collection .cv-promo_grid_ad .promo_ad_inner

  • background-color: #FFFFFF
  • opacity: 0.8
  • padding: 10px
  • margin: 0px 10px 0px 10px
  • top: 10px

See Promo Grid Box

Grid Layout Video

Finally, we did a number of iterations with all of the changes below in Drupal to determine if the CSS specifications were authentic. Go to the bottom of the page to see video.