Remove Widget Bundle CSS file from Blogger

Custom Blogger template developers often experience problems due to the Widget CSS bundle file. The file prefix may vary from blog-to-blog, but it is something like widget_css_bundle.css. This file is automatically added to every Blogger template by the Blogger engine.

What does the default Blogger CSS Bundle do?

The function of this file is to reset CSS styles according to the Blogger standards. The file carries the default, predefined Navbar styles, Blogger share buttons CSS, and many more besides utility classes like .clear, .widget etc.

Developers sometimes want to get rid of this default CSS file to make their templates more flexible in terms of custom assets, design responsiveness, etc. This tutorial post is all about removing or disabling the Blogger CSS bundle with least possible edits.

This is the exact code carrying that default Blogger CSS I found in my blog’s source code:

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1738504331-widget_css_bundle.css' />

While coding the custom layouts for this blog, I was annoyed by it so many times – but finally, I managed to disable this style. How? Read on.

A kind note: A few months ago, removing the line <b:include data='blog' name='all-head-content'/> was removing this CSS file too. But as of now, you can’t get rid of it by removing all-head-content or anything else. Note that you will not be able to use XML variables to save default values like colors, fonts etc. to reuse in your template.
PS: The ‘all-head-content’ is important for a Blogger templates in many ways, specially SEO. Better don’t fork it.

Disabling the default Blogger CSS Bundle

So, we already know we can’t remove it from our templates, in the rest of the tut, we’ll be disabling this default file to affect our template in any way.

First off, backup your Blogger template. Now, edit your template’s HTML and find <b:skin><![CDATA[ in the template.

Now, cut-paste and save all the CSS styles to a separate text file on your computer.

We are left with <b:skin><![CDATA[]]>. Replace this line with the below code block:

<style type="text/css">
<!-- /*
<b:skin><![CDATA[
*/]]></b:skin>

Now comes the CSS part of our template that we have saved in form of a text file separately. Note, if you have Variable based CSS, you will have to copy each and every variable value to the relevant CSS block. For eg. $(body.text.color) in the CSS should be replaced with the value of <Variable name="body.text.color"... and so on.

Add your plain CSS code inside the style tags just below the CDATA modification we just did.

<style type="text/css">
..your CSS code goes here..
</style>

Finally, save the changes and reload your blog. You will observe that the Blogger CSS Bundle file is not affecting our CSS rules anymore – and that’s what we were looking for! Hope it has helped someone.