How to Change the Border Color for Focus Widget in Zelle

Important notice: This product is now in maintenance mode and is no longer being actively developed or supported. Updates and bug fixes will not be provided unless they relate to security concerns.

In this documentation, we will show you how to change the border color for all focus widgets circle and title. 

Go to Appearance->Customize->Additional CSS and add the following code:

.focus-box .service-icon {
 border-color: #5b9dd9;
}
.focus-box .red-border-bottom:before{
 background: #5b9dd9!important;
}

If you want to add a different color to each widget, you need to use the below code:

#focus span:nth-child(4n+1) .focus-box .service-icon {
      border: 10px solid #e96656;
  }
  #focus span:nth-child(4n+2) .focus-box .service-icon {
      border: 10px solid #34d293;  
  }
  #focus span:nth-child(4n+3) .focus-box .service-icon {
     border: 10px solid #3ab0e2; 
  }
  #focus span:nth-child(4n+4) .focus-box .service-icon {
      border: 10px solid #f7d861; 
  }

You can change the color code to what color you want and it's suitable for your website.

The above code works for all devices but if you want to change the border color only for the mobile device then please use the below code:

@media screen and (max-width: 480px) {
#focus span:nth-child(4n+1) .focus-box .service-icon {
      border: 10px solid #e96656;
  }
  #focus span:nth-child(4n+2) .focus-box .service-icon {
      border: 10px solid #34d293;  
  }
  #focus span:nth-child(4n+3) .focus-box .service-icon {
     border: 10px solid #3ab0e2; 
  }
  #focus span:nth-child(4n+4) .focus-box .service-icon {
      border: 10px solid #f7d861; 
  }
}

Zelle theme offers built-in options to change the hover color of focus widgets. You can customize them through Appearance -> Customize -> Colors -> Our Focus section.