Styling XBlog

November 23rd, 2014

One of the biggest issues with using a 3rd party tool for your website is making it look like your website.  With XBlog we wanted to make this as easy as possible.  Here is how simple it is. 

  Each view / user control comes with an ID wrapper.  These ID's are dynamic allowing you to separate out different displays for each blog in your Sitecore instance if needed.  The dynamic naming is set in your XBlog Settings as shown below.   "XB" is the default and what works with the css out of box.


On our primary views / user controls the ID naming is as simple as is found in the settings.  In the case of our callouts we also append a descriptor to the end to provide more breakout in our css.  Here is our list of names assuming the Primary CSS ID is set to "XB" .

  • AuthorView: XB
  • BlogListing: XB
  • BlogPost: XB
  • Callouts/AuthorList: XB-AuthorList
  • Callouts/AuthorView: XB-AuthorView
  • Callouts/CategoryList: XB-CategoryList
  • Callouts/RecentBlog: XB-RecentBlog
  • Callouts/RelatedBlog: XB-RelatedBlog
  • Callouts/TagCloud: XB-TagCloud
  • Callouts/TagList: XB-TagList

Inside the XBlog main layout you will find a path to the css:  /Components/XBlog Assets/Style/XBlog.css .  It is advised to use this as a reference or to copy to another location for a starter point.  Changing this directly will affect any future blogs you might create and takes away from the whole multi instance concept. From inside the style sheet you will see each section broke down by its containing ID (using our default of "XB").  Each section will layout some basic styling for each element found within the user control / view.   For example, if I wanted to update the title of the AuthorList callout, I would update the following:

#XB-AuthorList h3, .h3 {
color: #4e5c5b;
font-size: 1.25em;
font-weight: 100;

So as you can see, very simple to incorporate XBlog CSS into your site.  In most cases I would follow these steps:

  1. Update Primary CSS ID in your XBlog settings to something meaningful.
  2. Make a copy of the CSS and place in your sites resources / components area.
  3. Update the CSS ID with your new name.
  4. Identify areas needed to update and make changes to the styling.

For reference XBlog is found here: