Is it possible to change SharePoint CSS via javascript?

Question

I am working on Sp2013 site and want to change the opacity of the overlay. This is the CSS that needs to be used:-

.ms-core-overlay {
    background-color: rgba(255, 255, 255, 0.5);
}

I am setting the opacity from 0.85 to 0.5. I donot want to create a new css file and link it to the masterpage so I was trying to chagne the CSS via javascript on masterpage. Foll. is my code which is pasted right above the </head> tag:-

<script language="javascript">
   _spBodyOnLoadFunctionNames.push("HideBrandingsuite");
    function HideBrandingsuite()
     {
     alert('test');
     var elem = document.getElementById("ms-core-overlay");
elem.style.background-color = "rgba(255, 255, 255, 0.5)";
     }
    </script>

I can see the alert box, but the the overlay isnt getting updated with new opacity. Pls guide.

Is it possible to use <style> tag on the masterpage before the </head> tag to achieve the purpose? Example:- This doesnot work for me...

<style>
 .ms-core-overlay {
        background-color: rgba(255, 255, 255, 0.5);
    }
</style>

Alexander · Accepted Answer · 2014-03-11 07:39:57Z

0

If your style is static try these steps:

Check core styles for an important declaration
Add style element to the page (content editor web part or directly in the master page)
Сlarify selector expression .someclass .ms-core-overlay

answered Mar 11, 2014 at 7:39

Alexander

8,1512 gold badges29 silver badges42 bronze badges

Should I use the foll. code before the /head tag? <style> .ms-core-overlay{ background-color:'rgba(255, 255, 255, 0.5)' !important; } </style> This doesnt work for me.....

variable
– variable

2014-03-11 07:42:58 +00:00
Commented Mar 11, 2014 at 7:42
I cannot check it now, but I think, you can. If it does not work use step #3. It should resolve issue. Also you can skip important if the core style does not contain it.

Alexander
– Alexander

2014-03-11 07:48:09 +00:00
Commented Mar 11, 2014 at 7:48
what is .someclass?

variable
– variable

2014-03-11 07:49:19 +00:00
Commented Mar 11, 2014 at 7:49
someclass - it is a class of a parent element. Or parent element of parent. Or parent element of parent of parent... etc.

Alexander
– Alexander

2014-03-11 07:51:16 +00:00
Commented Mar 11, 2014 at 7:51

Add a comment |

Luis Valencia · Accepted Answer · 2014-03-11 07:27:49Z

0

You need to use jquery $document.ready so that code will be executed only when the entire html and css has been loaded, the way you did it, it will be executed at the beginning when there is no guarante the page has finished rendering

also you should jquery selectors.

$("ms-core-overlay")

answered Mar 11, 2014 at 7:27

Luis Valencia

5,19122 gold badges120 silver badges220 bronze badges

2

Or, without having to use jQuery: Use SP.SOD.executeOrDelayUntilScriptLoaded msdn.microsoft.com/en-us/library/office/…

Robert Lindgren
– Robert Lindgren

2014-03-11 07:29:00 +00:00
Commented Mar 11, 2014 at 7:29

Add a comment |

Stack Exchange Network

Is it possible to change SharePoint CSS via javascript?

2 Answers 2

Your Answer

Hot Network Questions

Is it possible to change SharePoint CSS via javascript?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions