Shared tenant different header

Question

AS-IS: There is a group of companies, every company (exclude one) have the same brand (same colors, names, ...), but this one company (our) have different brand (e.g. wecare, with different colors, ...) and the problem is that we share one tenant on o365 (we can´t make our own tenant). As we are part of the same tenant, the visual is the same for every company. For our sites we use prefix (wecare) and join sites to one hub.

TO-BE We need to change our header to be different from the other companies, and stay on that tenat.

(names of companies are fancifully) Visualization on picture

Is there any way we do this (without some big hacking)? Maybe with some spfx webpart or extension?

Thank you for your help :)

Answer 1

Great question. I don't think I will give the best answer, but this is what I know:

1. The title in the Office 365 Suite bar is tenant-wide. So we can not change it for site collection or per hub.
2. We can create a 'hack' with SPFx extension that injects CSS. I recommend CSS over JavaScript because it will be faster and less 'hacky':

CSS code for changing the Suite Bar's title

.o365sx-appName{
 visibility: hidden;
    position: relative;
}

.o365sx-appName:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "We care.";
}