New App Launcher Suite Bar in 365: what CSS styles affect the background color?

Question

There is a new suite bar in O365. What CSS styles affect the background color of the bar, app launcher button and the Office 365 text in SharePoint Online? I want to hide Office 365 text and add my logo there.

Answer 1

Hi,
Per my understanding, you might want to change the style of the suite bar and replace the “Office 365” text with your custom logo image.
In Office 365 admin page, we can customize the theme of the suite bar for the whole :
However, as there is no such option can replace the “Office 365” text with a custom icon there, a workaround is that we can use some custom JavaScript to modify the
corresponding HTML source code to display the icon dynamically after the page loaded.
After applying the code snippet below into the master page:
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("ready");
function ready() {
var logo = document.querySelector("#O365_MainLink_Logo");
var s = '<img style="max-height: 27px" alt="logo" src="/_layouts/15/images/siteIcon.png?rev=38">';
logo.innerHTML = s;
</script>
Every time when users open a page in this site, this custom code will be executed, the “Office 365” text will be replaced by a custom icon:
More information about how to add custom code into master page(similar in SharePoint 2013):
http://techtrainingnotes.blogspot.com/2012/05/adding-javascript-and-css-to-sharepoint.html
What’s more, if doing in this way, we can only replace the “Office 365” text with a custom icon in Office 365 SharePoint Online sites, not the whole Office 365, this
is a fact that you might want to know. For about how to replace that text for the whole organization, I suggest you open another thread in Office 365 forum, you will get more help and confirmed answers there.
http://community.office365.com/en-us/forums/default.aspx
Best regards      
Patrick Liang
TechNet Community Support