current community

your communities

more stack exchange communities

Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.
up vote 2 down vote favorite

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>
share|improve this question

2 Answers 2

up vote 0 down vote accepted

If your style is static try these steps:

  1. Check core styles for an important declaration
  2. Add style element to the page (content editor web part or directly in the master page)
  3. Сlarify selector expression .someclass .ms-core-overlay
share|improve this answer
    
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 Mar 11 '14 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 Mar 11 '14 at 7:48
    
what is .someclass? –  variable Mar 11 '14 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 Mar 11 '14 at 7:51
up vote 0 down vote

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")
share|improve this answer
2  
Or, without having to use jQuery: Use SP.SOD.executeOrDelayUntilScriptLoaded msdn.microsoft.com/en-us/library/office/… –  Robert Lindgren♦ Mar 11 '14 at 7:29

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.