How to disable CSS on a specific page?

Question

I am using 3 stylesheets (style1, style2, style3) for many pages.

style1 for my web header,
style2 for my contents and
style3 for footer

Now I want to apply a new stylesheet on my home page and disable style2 for only home page.

I added new classes for different elements but at some places it is still detecting my previous stylesheets. How can I disable CSS on a specific page?

here is web http://www.design.earnandearn.com/ , and i want to disable core.css for home page only — Horiya Batool, Nov 03 '15 at 19:55
From your website it seemed that it was a simple `link` element. If so, simply remove the link element and replace it with the new stylesheet. — yaakov, Nov 03 '15 at 20:04

score 1 · Answer 1 · answered Nov 03 '15 at 19:59

Since you did not include the code to see how you doing it, and considering you are having the header as an include file:

USE PHP:

In your Home page before including header:

<?php $homepage = 1; ?>

//include your header//

In your header where you are referencing CSS:

<link href="css/style1.css" rel="stylesheet" type="text/css" />

<link href="css/style3.css" rel="stylesheet" type="text/css" />

<link href="<?php if($homepage == 1){ echo "css/Home-style.css";}else{ echo "css/style2.css";}?>" rel="stylesheet" type="text/css" />

Your files should be in PHP for this to work. change "Home-style.css" to your new CSS file for home page.

score 1 · Answer 2 · answered Mar 22 '16 at 21:06

Check for page then grab the dom stylesheets array object and disable anything you want .

if(window.location.href.indexOf("<name in page url >") > -1) {

//Next line will disable the 2nd stylsheet in the document . 

 document.styleSheets[1].disabled = true;

}

Also fyi you can view all style sheets in the dom with:

console.log(document.styleSheets)

This should give you the appropriate index of whatever stylesheet you want to remove.

score 0 · Answer 3 · answered Nov 03 '15 at 19:56

0

You have to use jQuery to disable a stylesheet like :

<script>
$(function () {
  if (location.pathname.indexOf('/pagename') >= 0) {
    $('link[href*="/media/css/csspagename.css"]').prop('disable', true);
  }
});
</script>

answered Nov 03 '15 at 19:56

Jad Chahine

6,849
8
37
59

I have already tries it by pasting it on my home page but not disbabled my required sheet – Horiya Batool Nov 03 '15 at 20:01

How to disable CSS on a specific page?

3 Answers3