All geek questions in one place

How to remove CSS widget set for Blogger

I am trying to write a blog template from scratch. I have added some elements and styles to my template. But I found that some other CSS style sheets are included, and they also apply to page elements, as shown below:

enter image description here

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

+6
source share
7 answers

First back up your template.

In 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>
+4
source

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

Essentially, this will require you to invoke your own stylesheet before resetting each unwanted default style after calling the unwanted style sheet.

Since your styles are beyond the cascade, they will override unwanted styles.

This is a completely dirty decision, but better than nothing.

! it is important to use it only as a last resort.

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

Use this if you are using the jquery library.

+1
source

There are two external CSS files that are officially added to Blogger. Removing them may cause a damaged Blogger template, but if you are a designer and add your own CSS instead of Blogger, then it is important to remove unnecessary CSS files that can cause a lot of work.

<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 the two official Blogger CSS package files that are repeated on every Blogger blog. One thing you should note is that you can make this line in an HTML comment, but not permanently delete it.

There is a long tutorial for this, which you can find in How to remove / hide the official CSS blogger in your custom template? So follow this and uninstall the official Blogger CSS package.

+1
source

Disable Blogger Css default binding:

You can remove widget_css_2_bundle.css following ways:

First step:

find the <head> and replace it with:

 &lt;head&gt;

Second step:

find the </head> and replace it with:

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

Note. This is the best way, since it does not affect the variables if you use the variables in your template.

Disable Plusone.js and Widgets.js

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

find the </body> and replace it with:

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

To save your template and well done :) Now you can create your own blogger template from scratch, as you want;)

+1
source

With the release of the new theme engine last year, Blogger has now simplified the removal of the standard CSS and JS files that it includes in the template.

To remove them, add the following attributes to the <html> at the beginning of the template code (present in the "Theme Settings" section) -

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

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

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

+1
source

The only way I found is to leave the skin tags completely empty and add some style tags to the head or a link to the stylesheet. This works for me, but it's still annoying.

0
source

Source: https://habr.com/ru/post/946471/

More articles:


All Articles