O365 Sharepoint banner change

Hi all,

I'm in O365 and I would like to change the banner of the page using CSS.  Is that possible or do I need to go into the master page?  Microsoft suggests it's a bad idea to customize the master page due to updates.
LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

_TAD_Commented:
The short answer is: yes it can be done through a script editor web part (or content editor).  

However, editing the master page or altering the master css is probably the preferable way to go as it would cascade to all sites within your collection.  Were you to do this with a script editor web part you would need to add that script to each and every page.


That said, here are instructions for using a script editor:

1) add a script editor web part to somewhere on your page (I typically choose the last/bottom most web part zone)
2) click edit script
3a) add the following to change the background color:

<style>
#globalNavBox, .ms-clientcontrol-chromeheader {
  background-color: rgba( 239,239,0,0.78 );
}
</style>

3b) or add the following to change the background-image (note: I added a splash.png image to my SiteAssets folder):

<style>
#globalNavBox, .ms-clientcontrol-chromeheader {
  background-image: url(/SiteAssets/splash.png);
}
</style>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
_TAD_Commented:
side note:  I use a Chrome browser developer tools (F12 key) to identify the correct css class to update (#globalNavBox, .ms-clientcontrol-chromeheader)


Additionally:  not sure which banner area you were referring.

If the #globalNavBox is not the correct place, try each of these to see if they have the desired affect:

#s4-titlerow {

}


#s4-titleAreaBox {

}
IsaacSharePoint Client Side DeveloperAuthor Commented:
Thanks!  I will give that a try.  I stayed away from Master page because Microsoft recommends not changing the master page.  Check out this video O365
IT Pros Agree: AI and Machine Learning Key

We’d all like to think our company’s data is well protected, but when you ask IT professionals they admit the data probably is not as safe as it could be.

IsaacSharePoint Client Side DeveloperAuthor Commented:
They recommend injecting JavaScript and CSS instead.
_TAD_Commented:
some additional parameters to considder:

#s4-titlerow {
    background-image: url('/SiteAssets/splash.png') !important;
    width: 100% !important;
    background-repeat: no-repeat !important;
 }


width = 100%
Do not repeat background image
!important directive ensures the parameter is applied regardless of any other style sheet
IsaacSharePoint Client Side DeveloperAuthor Commented:
Is this for SharePoint 2010 or SharePoint 2013?
IsaacSharePoint Client Side DeveloperAuthor Commented:
Asking because I am using SharePoint 2013
_TAD_Commented:
The Script editor web part (found under media and content) will be your new best friend when it comes to injecting CSS or javascript.

Just don't forget to add the <style></style> or <script></script> tags
_TAD_Commented:
This is for SharePoint 2013 - O365


I believe it works the same for On Premise as well.  (I've not used SP2010)
IsaacSharePoint Client Side DeveloperAuthor Commented:
Awesome! I will give it all a try.  Thanks again!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Office 365

From novice to tech pro — start learning today.