SharePoint Knowledge Base

Feb 21
How to Customize the SharePoint Blog Site Template

We "eat our own dogfood". Very odd expression but it does mean something special to us. All of our websites, project management apps, and helpdesks, are built with SharePoint. As SharePoint consultants we take pride in that our sites are not WordPress and that our blog is built with SharePoint. We believe that if we are doing SharePoint consulting, the best way to prove to our clients that it works is to use the product ourselves.

"Eating your own dogfood, also called dogfooding, is a slang term used to reference a scenario in which an organization uses its own product. The idea is that if the organization truly believes its own product to be superior, it would use the product itself."

 

It's a fact the SharePoint Blog Template has been improved but Microsoft should do more. We bridged the gaps and this post provides guidance for your blogging purposes.

Features that were important to us:

  • Read more (or less)
  • Automated user images based on author
  • Tag clouds
  • Enhanced styling

 

The first thing to know is that almost all features of SharePoint blogs are built on list view web parts which have been customized with XSLT. The content and formatting of these web parts cannot be modified through the browser. One would have to duplicate and customize the out of the box XSLT files, however that process is not nearly as easy as you would expect. Mark Anderson had a great blog on the process for SP 2010, and we found it to be even more difficult in SP 2016. XSLT is also very unfriendly to work with, even if the process to customize it were simpler.

Given that, we decided to customize the blog using CSR. All of the enhancements you see here in our blog were done with a combination of jQuery and CSS. Nothing else. We know jQuery and CSS well as you may have seen from our branding examples!

Read more (or less)

A function checks each blog post container's height. If more than 300px, we add a CSS class to the container and add a button to the bottom of the post. The class we add sets a max height on the blog post container. Clicking the button toggles the class

Automated user images based on author

Check the author text and insert appropriate image. CSS is used to position and style the image based on screen resolution (notice the image changes location if you squish your browser down!)

Tag clouds

We simply changed the categories to display inline and styled appropriately. This allows them to cluster together similar to a tag cloud.

Enhanced styling

We made many additional changes. Month numbers in posts became abbreviations (3 à Mar), changed some URLs to make clicking easier, hid some unneeded elements (like comments), and did lots of CSS styling to make the blog fit with our site branding.

 

As you can see, the results are quite positive! We have a very nice blog, and we're working in our native environment; SharePoint. Eating our own dogfood J

This blog is designed to give you an idea of what's possible with the SharePoint blog template and to give you some ideas for specific customizations. While we're not posting all of our code and scripts in this blog, we would be happy to provide it if you reach out to us.

 

 

We love helping with SharePoint and it's all we do so feel free to contact us!

Mention this post and we'll send you a white paper on all of the ways we can help you customize SharePoint! As SharePoint consultants we strive to empower our clients to unlock the full potential of your SharePoint environment.

Comments

There are no comments for this post.