Styling the Content Search Web Part

Here’s a link to Part One of this post which dealt with the “List” Display Template of the content search webpart.

Here’s what the web part looks like with the following options: Slide Show – Large Picture.

It’s pretty bland, and honestly, I HATE the default image that has the question mark in it.  I appreciate that there’s a default image, but in reality, I’d like to change that to look a lot better.  I’ve created a background image that looks good when scaled up to the size of the slideshow, and want to replace the default image with mine.  One other thing to consider is that this overrides the image that is associated to the item in the webpart.  If you already have an image for the item that displays (instead of the grey question mark looking background), this CSS will prevent the image from showing.

First thing’s first: Insert the web part on your page.

  1. Put a content search web part on your page
  2. Select the content you want in the query
  3. Set the display template to the built-in template “Slideshow”
  4. Set the Item Display Template to “Large Picture”

Drop this code in:

.cbs-noImageContainer-ContentWrapperLarge {
 border-width: 5px;
 background-image: url(https://[IMAGE URL HERE]);
 background-repeat: no-repeat;
 background-size: cover;
}
.cbs-noImageContainer-ContentSmall, .cbs-noImageContainer-ContentLarge {
 display: none;
 }
.cbs-noImageContainer {
 display: table;
 background-color: black;
}

 

 

Here’s our Result:

 

 

Let’s break the code down and see what it does…

.cbs-noImageContainer-ContentWrapperLarge {}

This is the image container– that is, the actual “box” that the item’s image sits in.  Setting an image URL will replace the plain grey color.  Here are the main pieces to be concerned with in this block.

  • The boarder is optional, but I kind of like it.  You can either remove this entirely, or change the size as you see fit.  The default is 5px.
    • border-width: 5px;
  • Set the image url to one of your choosing. Upload a image to site assets library and drop the url into the css.
    • background-image: url(https://[IMAGE URL HERE]);
  • If you have an image that isn’t a “texture” that won’t look good repeated across and down, set the repeat to none.
    • Background-repeat: no-repeat;
  • Set the background size to cover to fill the entire container
    • Background-size: cover;
.cbs-noImageContainer-ContentSmall, .cbs-noImageContainer-ContentLarge {}

This is the container that holds the question mark graphic in the bottom right corner of the slideshow.

  • Just hide this completely
    • display: none;
.cbs-noImageContainer {}

This is the whole container for the slideshow.  I just set the color of the background to be black so that it blended well with the image I used.  Feel free to change it to whatever looks good in your usage scenario.

  • Set the color to whatever looks good
    • background-color: black;

 

If you’d like to use the image(s) I did, here’s a gallery of some good ones you can use.

 

Leave a Reply

Your email address will not be published. Required fields are marked *