Style details/summary blocks

The default styles for Details/summary blocks have a white background with a thin grey border and an on-hover change to a light-grey background:

Sample initial details/summary block style

Sample on-hover details/summary block style

The same styles carry through when the block is open:

Sample open details/summary block style

Sample on-hover open details/summary block style

To make these fit your knowledge base branding more, add some Custom CSS to style them the way you'd like.

Below, we walk through Custom CSS for several common customizations. If you're trying to do something not covered here, please contact us for help!

Change the detail block border

The details/summary blocks get a small light grey border, both around the summary section and the details section. To change the color of this border:

1. Go to Customize > Style (HTML & CSS). 
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Copy the code sample below and paste it into the bottom of your Custom CSS pane:

   /* Change border around detail blocks */
   .ko-details-block {
     border: 1px solid #e3e6ea;
   }
   
   /* Also change top border of the details section to match */
   .ko-details-block>.ko-details-content {
       border-top: 1px solid #e3e6ea;
   }

4. Update the border thickness (change from 1px), style, or the color hex code in rows 3 and 8 to change the border. Refer to w3school's CSS border property page for more information on styling borders.
5. Be sure to Save your changes.

Change the detail block colors

The details/summary blocks have a white background until they're hovered over, then they get a light grey background. To change the color of the font, background color, or the arrow for the initial or on-hover state:

1. Go to Customize > Style (HTML & CSS). 
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Copy the code sample below and paste it into the bottom of your Custom CSS pane:

   /* Change background color and font color of detail block summary section */
   .ko-details-block>summary {
     background: #fff; /* Changes background color */
     color: #000; /* Changes text color /*
   }
   /* Change font color and background color of detail block summary section on hover state */
   .hg-site-body .ko-details-block>summary:hover {
     color: #000; /* Changes text color */
     background: #fff; /* Changes background color */
   }
   /* Change color of detail block summary arrow */
   .ko-details-block>summary:before {
     border-left: 7px solid #fff;
   }
   /* Change color of detail block summary arrow on hover state */
   .ko-details-block>summary:hover:before {
     border-left: 7px solid #000;
   }

4. Delete any sections you don't want.
5. Update the hex codes for the colors you want to update. This may take some trial and error.
6. Be sure to Save your changes.

For example, here are the styles we use here in our knowledge base to get the dark blue background color with white text and arrow initially, and a dark blue text and arrow on-hover:

/* Change detail block summary section to dark-blue background color and white text color */
.ko-details-block>summary {
  background: #1d284f;
  color: #fff;
}

/* Change detail block summary section on hover state to dark blue font color on hover state, keep default light grey background */
.hg-site-body .ko-details-block>summary:hover {
  color: #1d284f;
}

/* Change detail block summary arrow to white so it shows up on dark background */
.ko-details-block>summary:before {
  border-left: 7px solid #fff;
}

/* Change detail block summary arrow to dark blue on hover state to match font color*/
.ko-details-block>summary:hover:before {
  border-left: 7px solid #1d284f;
}

Make summary always bold

If you like the colors but just want to make the summary text always bold:

1. Go to Customize > Style (HTML & CSS). 
2. In the Customize HTML, CSS, and JS section, select Custom CSS.
3. Copy the code sample below and paste it into the bottom of your Custom CSS pane:

   /* Change detail block summary section to bold font always */
   .ko-details-block>summary {
     font-weight: 700;
   }

4. Be sure to Save your changes.