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?
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>
0

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 {

}
0
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
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

IsaacSharePoint Client Side DeveloperAuthor Commented:
They recommend injecting JavaScript and CSS instead.
0
_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
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
Is this for SharePoint 2010 or SharePoint 2013?
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
Asking because I am using SharePoint 2013
0
_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
0
_TAD_Commented:
This is for SharePoint 2013 - O365


I believe it works the same for On Premise as well.  (I've not used SP2010)
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
Awesome! I will give it all a try.  Thanks again!
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.