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:
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%)
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
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:
<style type="text/css"><!-- /*<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>
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.
<script>
$("[href$='css_bundle.css']").remove();
</script>
Use this if you use jquery library.
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.
You can remove widget_css_2_bundle.css with this steps below :
First step :
search for <head> tag and replace it with :
<head>
Second step :
search for </head> tag and replace it with :
</head><!--<head/>-->
Note : This is the best way because is not affect the variables if you use variables in your template.
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 :
<!--</body>--> </body>
That's all save your template and well done :) Now you can create your own blogger template from scratch like you want ;)
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.
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 == "error_page"'>
<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.
© 2022 - 2024 — McMap. All rights reserved.
_height:100%) with a value that fits your needs. While I don't recommend it, use!importantand you're done. Second: put us in context. Does your stylesheet is called after or before the other one? Is there any code that can generate some styles on the fly? So be more specific & be more descriptive. Oh, and good luck ;-) – Unthoughtof