Custom CSS

Customize Your Assistant

You can make your assistant’s design entirely custom by using the Custom CSS option. You will find it in the Design tab, in the Appearance section.

image2.png

You can add and edit your custom CSS code by clicking on the Edit button (Pencil icon). We provided you with a sample block of code but that’s just a tiny portion of what you can achieve here.

INFO

Remember to remove the comment signs ("/*" at the beginning and "*/" at the end) if you want to make the sample code work.

image3.png

INFO

You can style any static class in your assistant, which are easy to recognize thanks to their user-friendly names, such as:

.top-navigation
.page-selector-wrapper
.questions-wrapper
.navigation-next-button
.product-details

You will be able to see your changes in the assistant only when Custom CSS is enabled. Simply switch the toggle on:

image1.png

TIP

When your changes don’t apply in the assistant, try using the !important rule. This will override any class relationships that might be blocking your customization. For example:

.questions-wrapper .answer-text {
color: #3b0078 !important;
}

Let's Play Around!

mceclip2.png

With the zoovu CSS editor, the sky is the limit! You can adjust every visible element of your assistant to match your brand's identity. Follow the instruction steps below to achieve the look shown in the picture above. 

TIP

Completely new to CSS? Check out these awesome resources to kick-start your styling journey!

1. Change The Background Color

mceclip1.png

body {
/* fallback for old browsers */
background: #ECE9E6; 
/* code below for Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to left, #FFFFFF, #ECE9E6);  
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to left, #FFFFFF, #ECE9E6); 
}

TIP

Want to easily select gradient for your assistant? Here’s an awesome resource that may help you choose your perfect color!

2. Change The Heading Color, And Make It Bold

mceclip3.png

.questions-wrapper section p,
.questions-wrapper section .question-image p,
.questionnaire-wrapper .section-main-content .page-title,
.top-product a.product-name,
.top-product .properties-title,
.top-product .product-details .positive-property,
.top-product .product-details .negative-property,
.top-product .product-details .neutral-property,
.top-product .product-price{
 font-weight: 900;
 color: #fff;
}

TIP

Having problems picking colors? Use this color picker as a reference!

3. Center The Question Text

mceclip4.png

.answers-wrapper .answer-text {
  margin: 0 auto;
}

4. Style The Buttons

mceclip5.png mceclip6.png  mceclip7.png

#app .start-over-button,
#app .navigation-back-button,
#app .navigation-next-button,
#app .navigation-back-button,
#app .navigation-next-button,
#app .product-compare-wrapper label,
#app .add-to-basket-button,
#app .page-button,
#app .page-button.selected,
#app .navigation-back-button,
#app .navigation-next-button,
#app .gap-button {
  border-radius: 20px;
  background-color: #3B92E4;
  border: 0px transparent;
  color: #fff;
}

#app .product-compare-wrapper label {
  background-color: #3B92E4;
}

/*  BUTTONS  - Let's add some hover effect */
#app .start-over-button:hover,
#app .navigation-back-button:hover,
#app .navigation-next-button:hover,
#app .navigation-back-button:hover,
#app .navigation-next-button:hover,
#app .product-compare-wrapper label:hover,
#app .add-to-basket-button:hover,
#app .page-button:hover,
#app .page-button.selected:hover,
#app .navigation-back-button:hover,
#app .navigation-next-button:hover,
#app .gap-button:hover {
  background-color: #3B92E4;
  text-decoration: underline;
  transition: all .2s ease;
}

WARNING

Be wary of using .cXXXX classes or #advisor-XXXX IDs, as they work only for the specific assistant and may change with each change you apply. Use general classes, such as .answer-text to achieve your desired result.

5. Change The Question’s Overlay On Hover

mceclip8.png

/*  IMAGE OVERLAY - Let's make it green on hover*/
.answers-wrapper .has-image .answer-content:hover {
  background: linear-gradient(transparent 0%,transparent 50%,#EC6EAD 95%);
  transition: background ease .5s .8s;
}

6. Make The Answer Corners Round

mceclip9.png

/*  ITEMS - Let's make them round */
.advice .product,
.answers-wrapper .answer,
.top-product .product-image a {
  border-radius: 20px;
  overflow: hidden;
}

7. Create The Hover Effect 

/*  ITEMS - Let's add hover effect */
.advice .product:hover,
.questions-wrapper .answers-wrapper .answer:hover {
  transform: translateY(-2px);
  transition: all .3s ease;
}

/* ANSWER IMAGE ANIMATION  */
.answer:hover .image-element {
  transform: rotate(-6deg) scale(1.3);
  transition: all 1s ease;
}

8. Adjust Appearance For Mobile Devices

With our CSS Editor, you can specify CSS rules that apply only to specified conditions. For example, you might decide to switch the appearance of the restart button when the assistant is displayed on a mobile device.

/*  Let's specify the media query saying that the rule within will apply 
for screens with maximum width of 768 px */

@media screen and (max-width: 768px) {
.start-over-button {
width:100% !important;
margin: auto !important;
}
}

The code above will stretch the restart button to use the full width of the screen.

More?

With CSS, the possibilities are endless! Feel free to grab our CSS Handbook file to create something beautiful.

Download CSS Handbook

TIP

Don’t know how to open a .css file? Still having problems with editing your CSS? Let us know at help@zoovu.com, we are more than happy to help!

gif.gif
gif.gif
Was this article helpful?
3 out of 3 found this helpful

Comments

0 comments

Please sign in to leave a comment.

Articles in this section