Table of Contents

CSS Customization Examples: "Minimalist" Theme

Abby Updated by Abby

Here's an example of some customizations in a bot

Changing the bot's main colors

One of the first things we did was change the bot's main colors, we tried to include every detail, down to the loader and the icon on the input send button:

To target the send icon you'll need to target all of the HTML as the icon color is inherited and doesn't have its own class

*{
	--form_inputs_border_color: #EF8354!important;
}

Here's all of the code to change the colors:

*{ --form_inputs_border_color: #EF8354!important;}
.lb-loader{  color: #EF8354!important;}
.Background--color{background-color: #2D3142;}
.Header{ background-color: #BFC0C0!important;}
.Header__Title{background-color: #2D3142;color: #2D3142;}
.MessageBubble{background-color: #BFC0C0!important;}
.input-button{color: #BFC0C0!important;background-color:#2D3142!important;border: 2px solid #EF8354!important;}
.MessageBubble__content{color: #2D3143;}
.input:hover{border: 2px solid #EF8354!important;}

Styling the buttons

We added some attributes to the buttons, such as uppercase, letter spacing, and hover, which makes the buttons change size while the mouse is hovering them, to do that we used:

.input-button:hover{
   width: 35%;
   opacity: 1;
   letter-spacing: 4.5px;
}

We added more pixels to the letter spacing to give the button the appearance of expanding on hover

Progress bar

For instructions on how to add a progress bar you can check out this article:

Live demo

See the Pen Minimalist Template by Abigail (@abigailcfreeman) on CodePen.

The code

/*input icon */
*{
	--form_inputs_border_color: #EF8354!important;
}

/*loader bubbles */
.lb-loader{
  color: #EF8354!important;
}

.Background--color{
  background-color: #2D3142;
}
.Header{ 
background-color: #BFC0C0!important;
  
}
.Header__Title{
	background-color: #2D3142;
  color: #2D3142;
  width: 0%;
}

.Header__Subtitle{
  letter-spacing: .5px;
 
}
.MessageBubble{
  
background-color: #BFC0C0!important;
}
.input-button{
  color: #BFC0C0!important;
  background-color:#2D3142!important;
  display: inline-flex;
  border: 2px solid #EF8354!important;
  margin: 20px 20px 20px 20px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
   position: relative;
  transition: all .45s ease-Out;
} 
.MessageBubble__content{
	color: #2D3143;
  
}
.MessageBubbleText{

  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
}
/*Message bubble spacing*/
.is-flex-direction-column{
	margin-left: 1px!important;
}

.input-button:hover{
   width: 35%;
   opacity: 1;
   letter-spacing: 4.5px;
}

/*Styling for smaller screens*/
@media only screen and (max-width: 500px) {
  
  .input-button:hover{
   width: 65%;
   opacity: 1;
   letter-spacing: 4.5px;
}
  .Header__Title{
	background-color: #2D3142;
  color: #2D3142;
  width: 0%;
    font-size: smaller;
}
}

How did we do?

CSS Customization Examples: "Translucid"

Dynamic Data CSS

Contact