follow up on how to stop SalesForce style overwrite

Question

following up on

https://stackguides.com/questions/27975991/neptune-theme-buttons-unreadable- with-light-grey-backgrounds-on-visualforce-page

The sf css extended.css is loading after neptune.css and therefore overriding neptune for body button, body .x-btn etc.

I found this:

https://salesforce.stackexchange.com/questions/24575/how-to-ignore-salesforce-css-on-vf-page-with-header

in which the first answer with the jQuery link seems to be the most elegant. However I need help on this -

$("head").append("link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'"); and

$("head link[rel='stylesheet']").last().after("link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'");

are standard html css, not the sf way of

apex:stylesheet value="{!URLFOR($Resource.ExtJS42, '/ExtJS42/resources/ext-theme-neptune-all.css')}"

How is Bob Buzzard implementing this in apex-speak? tia.

removed the "<>" out of above code to get it to display

Answer 1

The code snippets that you have posted, e.g.

$("head").append("link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'");

are JavaScript that relies on the JQuery library being present, so you'd actually need something like the following:

At the top of the file include jQuery - this is from a CDN, but you might want it as a static resource:

<apex:includescript value="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />

Then in the body

<script>
   $(document).ready(function(){
                       $("head").append("link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'");
                     });
</script>

putting this inside the ready handler means it will run as soon as the page is loaded.

Answer 2

<script type="text/javascript" >

    j$ = jQuery.noConflict();
    j$(document).ready(function() {

        var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
        for( var i in document.styleSheets ){
            if( document.styleSheets[i].href && document.styleSheets[i].href.indexOf("extended.css")>0 ) {
                stylesheet = document.styleSheets[i];
                stylesheet.id = "cmnSheet"; // id would allow dynamic mods?
                stylesheet.disabled = true;      
                break;
            }
        };                                                                      
    });

extjs css is loaded in apex page tag with

'<'apex:stylesheet value="{!URLFOR($Resource.ExtJS42, '/ExtJS42/resources/ext-theme-neptune-all.css')}" /'>'

(typing jQuery stuff from memory and notes so will correct later if needed but concept is there)