CODEWITHSUNDEEP
cssblogger
Gowtham
Gowtham

Reputation: 12180

How to remove Blogger CSS widget bundle

I'm trying to write a blogger template from scratch. I've added some elements and styles to my template. But, I found that some other CSS stylesheets are included and they are also applied to the page elements as shown below:

enter image description here

The first CSS background rule was the only thing I applied in <b:skin> tags are the remaining were not from my styles. So, how can I remove them. I can overwrite them if they were right, but there are some wrong declarations(_height:100%)

Upvotes: 6

Views: 14072

Answers (8)

icaksama
icaksama

Reputation: 782

If You use this code <b:skin><![CDATA[...]]></b:skin>, it will change to be comment code and it still shows in the front page, even though it's unused.

This way is very simple from all way I found. Change <b:skin> ... </b:skin> to this code:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
   <b:skin> ... </b:skin>
</b:if>

It will remove the style of <b:skin> in the front page without change to be a comment code.

Upvotes: 0

Prayag Verma
Prayag Verma

Reputation: 5651

With the release of the new theme engine last year, Blogger has now made it easier to remove the default CSS and JS files that it includes in the template.

To remove them, add the following attributes to the <html> tag at the start of the template code (present under Theme 🢂 Customise) -

<html b:css='false' b:js='false' ...

b:css='false' - Removes the default CSS included by Blogger in the template

b:js='false' - Removes the default JS included by Blogger in the template

Upvotes: 9

Uikithemes
Uikithemes

Reputation: 27

Disable Default Blogger Css Bundle :

You can remove widget_css_2_bundle.css with this steps below :

First step :

search for <head> tag and replace it with :

&lt;head&gt;

Second step :

search for </head> tag and replace it with :

&lt;/head&gt;&lt;!--<head/>--&gt;

Note : This is the best way because is not affect the variables if you use variables in your template.

Disable Plusone.js and Widgets.js

Now if you want to disable Plusone.js and Widgets.js to increase you page speed follow this steps below :

search for </body> tag and replace it with :

&lt;!--</body>--&gt; &lt;/body&gt;

That's all save your template and well done :) Now you can create your own blogger template from scratch like you want ;)

Upvotes: 2

costumingdiary
costumingdiary

Reputation: 317

Make a backup of your template first.

TO BLOCK BLOGGER CSS:

Find this:

<b:skin><![CDATA[lots-of-css-code]]></b:skin>

and replace with this:

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin>*/</b:skin>

Find this:

 <b:template-skin>bunch of code</b:template-skin>

and replace with this:

<link href='https://www.somewhere.com/yourstylesheet.css' rel='stylesheet' type='text/css'/>

or replace with this:

 <style>your-custom-css-here</style>

Upvotes: 5

Muhammad Hassan
Muhammad Hassan

Reputation: 1304

There are two external CSS files that are added by Blogger officially. Removing them can cause a messed up Blogger template but if you are a designer and added your own CSS instead of Blogger then its important to delete unwanted CSS files that can cause a heavy load.

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

These are two Blogger official CSS bundle files that re in every Blogger blog. One thing you have to note that you can make these line into HTML comment but not permanently delete.

For this, there is a long tutorial that you can find at How To Remove/Hide Blogger Official CSS In Your Custom Template? So follow this and remove Blogger official CSS bundle.

Upvotes: 1

G&#246;khan Mete ERT&#220;RK
G&#246;khan Mete ERT&#220;RK

Reputation: 5086

<script>
$("[href$='css_bundle.css']").remove();
</script>

Use this if you use jquery library.

Upvotes: 1

KreaTief
KreaTief

Reputation: 406

The only way I found around is was to leave the skin tags completely empty and add some style-Tags in the head-part or link to a stylesheet. It works for me, but it's still ver annoying.

Upvotes: 0

metaColin
metaColin

Reputation: 1971

One solution might be to explicitly override each style included in the unwanted stylesheets.

Essentially this would require that you call your own stylesheet to reset each unwanted style to it's default after the unwanted stylesheet has been called.

Since your styles are further down the cascade they will cancel out the unwanted styles.

It's a totally messy solution, but better than nothing.

!important should be used only as a last resort.

Upvotes: 1

Related Questions