Put the name of the department and the logo of the company in the Org chart

Org Chart Microsoft 365 version
1

Hi I want to put the name of the department and the company logo in the org chart, as I show in the image:

image
image1792×1078 105 KB

Can I do this?

2

Hi @fricotoho,

Yes, it is possible. Add the following custom JavaScript to your web part:

api.onInitialLoadingFinished(() => {
    // create containers for headings
    let heading = $('<div class="heading">INFORMATION TECHNOLOGY</div>');
    let subHeading = $('<div class="subHeading">IT APPLICATIONS</div>');
    
    // create a container for the logo image
    let logo = $('<div class="logo"></div>');
    
    // add all of the above objects
    $(".poch-node-list_root").prepend(heading, subHeading);
    $(".poch-content__viewport").append(logo);
});

Next, add the following CSS:

.heading {
    font-size: 28px;
    font-weight: bold;
    color: #1A38A0;
    text-align: center;
}

.subHeading {
    font-size: 18px;
    font-weight: 500;
    color: #8198CD;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 10px;
}

.logo {
    position: absolute;
    width: 85px;
    height: 68px;
    bottom: 1em;
    left: 1em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(./*YOUR_SITE*/SiteAssets/OrgChart/YOUR_LOGO.png); /* Insert URL of your logo here */
}

For the background-image property, upload your logo somewhere (for example, in the .../sites/YourSite/SiteAssets/OrgChart/ folder) and set the URL to it.

3

I cannot see the logo: This is the final coded:

api.onInitialLoadingFinished(() => {

// create containers for headings
let heading = $('<div class="heading">INFORMATION TECHNOLOGY</div>');
let subHeading = $('<div class="subHeading">IT APPLICATIONS</div>');

// create a container for the logo image
let logo = $('<div class="logo"></div>');

// add all of the above objects
$(".poch-node-list_root").prepend(heading, subHeading);
$(".poch-content__viewport").append(logo);

});

.heading {
    font-size: 28px;
    font-weight: bold;
    color: #1A38A0;
    text-align: center;
}

.subHeading {
    font-size: 18px;
    font-weight: 500;
    color: #8198CD;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 10px;
}

.logo {
    position: absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(./sites/OrganizationalChart/SiteAssets/Image/TohoLogoHD.png); /* Insert URL of your logo here */
}

Capture
Capture2834×1353 106 KB

4

image
image3333×852 77.1 KB

5

Hi @fricotoho,

Please modify the background-image property as follows:
background-image: url(./SiteAssets/Image/TohoLogoHD.png);

6

I am still having the same plrobem :confused: what other idea?

7

I tried to use a image located in the web page but it still not working:

.logo {
position: absolute;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: 'https://yt3.googleusercontent.com/ytc/AIdro_l3-6tJ25nEFpkwQcOWePPtMHq8SR0Lq73mG0Qb=s176-c-k-c0x00ffffff-no-rj';
}

can we have a zoom meeting, or open a ticket to show you what is happening?

8

Hi @fricotoho,

The following CSS should work:

.logo {
    position: absolute;
    width: 85px;
    height: 68px;
    bottom: 1em;
    left: 1em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(./OrganizationalChart/SiteAssets/Image/TohoLogoHD.png);
}
9

No, it is not still working :confused: any other idea?

10

Hi @fricotoho,

Let's do a screen-sharing session. I sent you the link in PM.