Popular Docs Styling Tricks

Docs can be completely customized using CSS, but if you haven't spent much time designing websites, CSS can feel intimidating to start.

Here are some easy copy+paste CSS examples for some of the most common design elements in Docs. Use hex codes to change the colors to match your branding. Once you have a CSS stylesheet together, you can upload it to Docs to see your stylings come to life.

Add an image or animated .gif to your search

Animated gifs are sooooo Internet right now. For the same look as the search banner above with your own animated image, try this CSS template on for size:

#docsSearch {
	height: 200px;
	background: url(https://linktoyourownimage.gif) no-repeat center 100% / cover transparent;
	border-bottom: none;
	padding-top: 75px;
	position: relative;
	top: -1px;
}

You can replace the .gif URL with an image or gif of your choice to customize your background.

Change the color of your search bar and button

With the search bar front and center, it's important that it looks and feels as slick as the rest of your Docs site. Here's the basic CSS for changing the color of your search bar and button. Use hex codes to replace the colors listed below with colors of your choice.

#searchBar .search-query {
	background: #fff;
	border-color: transparent;
	box-shadow: none;
	color: #777;
}
#searchBar button {
	background: #FB476B;
	border-color: transparent;
	color: #fff;
}
#searchBar button:hover {
	background: #FF9966;
	border-color: transparent;
	color: #FB476B;
}

Here's a the basic gist of what you're looking at above:

#searchBar .search-query Controls the look and feel of the bar itself.
#searchBar button Commands the button background color and text.
#searchBar button:hover Alters how the button appears when your mouse hovers over the search button.

Background is the color of the actual style object (like the button itself, or the hover color), and color dictates the font color within it. Add border-color: transparent; to remove the search bar border. Check out more about CSS Borders at CSS Basics for some extra know-how!

Add a background image

body:after {
background: #fff url(https://i.ytimg.com/vi/kxfeTcty3Do/maxresdefault.jpg) no-repeat top center fixed;
background-size: cover;
opacity: 1;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;  
}

If you do decide to add a background image to Docs, make sure you also add the following CSS to add a color to your category or most popular article classes:

Add a border and background color for categories

.category-list .category {
	background-color:#FFFFFF;
	border-bottom: 1px solid #DBDBDB;
	border-radius: 3px;
	border-left:0;
	border-right:0;
	border-top:0;
}

Add a background color for collections of most popular articles

.twoCol .collection, .threeCol .collection { 
	background: #FFFFFF; 
	border-color: #DBDBDB; 
}

Background is the color of inside the category or collection of articles, and border-color is the color of the border around the category or collection. The various border properties control the weight and position of the borders. Check out more about CSS Borders at CSS Basics for some extra know-how!

If you add a background image to Docs, but you don't add a color to your categories or most popular articles lists, those style objects will take on your background color. The above CSS will give your categories or most popular articles a white background, but replace the #FFFFFF with any hex code of your choice to change the color.

Changing font for Docs search bar

#docsSearch h1 {
     font-family: 'Helvetica', sans-serif;
     color: #000000;
}

This will change the font of the placeholder text (ie. Search the knowledge base) in the Docs search bar.

Changing font for entire site

body {
       font-family: 'Helvetica', sans-serif;
       color: #000000;
}

Hiding Last Updated date

.articleFoot time.lu {
    display:none;
}

At the bottom of each article, there is a Last updated date showing when you last made changes to it. This will let you hide that date if you'd prefer not to display that info publicly.