mb23565

Creating a JS Hack to override CSS

Blog Post created by mb23565 on Oct 27, 2017

Hello everyone! I made a comment in a post a while back about using JS Hacks to override some CSS rules that the new 2016 Theme enforces. I have a few people ask me about this and I though this would be a good opportunity to write up a small post about it.

 

 

Why won't my custom theme stick!

If you are using the new 2016 theme, you may have notice that some things are very opinionated and you want to change some things. So you download the theme and start hacking away at the CSS files. You finally re-upload your theme and....the rules are not sticking!!! What gives?!?!

 

How do I overcome this issue?

Well what is happening is that there is a them1.css file that is being injection during the page render time. Since the last rule set wins when it comes to css, your beautiful css rules are now squashed by Blackboard! Bummer!

 

Conquering the CSS Takeover!

Well, there is another way! You can make all the css rules that are being squashed, into another css file. Then you can place either as an attachment via JS Hacks, or what I have done is place this file in the Content Collection and made it publicly available. Now I can copy this URI path and use it in my diabolical plan to take over the world! Blackboard!

 

 

Here is the JS Hack:

 

 

<!--

    your.blackboard.com = your instance of Blackboard Learn

    CC_FOLDER = is just a folder created in the Content Collection

    your_theme1 = the id you wish you give your element

 -->

<script type="text/javascript">

// https://your.blackboard.com/bbcswebdav/institution/CC_FOLDER/theme/theme1.css

    Event.observe(document,"dom:loaded", function() {

        //Your javascript goes here.

        // console.log($$('head')[0])

        $$('head')[0].insert({

            bottom: new Element('link', {

                href: '/bbcswebdav/institution/CC_FOLDER/theme/theme1.css',

                type: 'text/css',

                rel: 'stylesheet',

                id: 'your_theme1'

            })

        });

    });

</script>


Outcomes