Are you looking to customize your ZergNet widgets to change the fonts or colors? You found the right guide!

It's important that you feel comfortable with CSS and editing your theme files. This code will all go in your theme's stylesheet and messing with theme files has the ability to break your site.

Okay, ready to break stuff?

First, let's try changing the top headline that says "Around the Web." Let's say we want to change the font to match our site (Montserrat) and the color to be a lovely green. 

The CSS you want to add will be on the ".zergheader" class and we'll need to make sure we add in !important to override the ZergNet CSS code. That will end up looking like this:

.zergheader {
  font-family: 'Montserrat',sans-serif !important;
  color: #92A771 !important;
}

Now, let's customize what the individual headlines look like underneath each recommendation.

We'll accomplish this by editing the CSS class ".zergheadline a" to change everything on the links inside the <div>'s with the zergheadline class.

In this example, let's say we're changing our font to "Cambay," our color to a different hex code and changing the font. The key again is to make sure we're add !important to override the ZergNet CSS code.

.zergheadline a {
  font-size: 12px !important;
  font-family: 'Cambay', sans-serif !important;
  color: #F08122 !important;
}
Did this answer your question?