The applicationLayout control from the XPages Extension Library is a fantastic control. It makes the layout of an application easy ( once you know, how to set the parameters ).

The control also has a property to include a company or product logo. The only problem  is, that the logo has to have a height that is not bigger than 28px.

But what to do, if your logo has a bigger height? You can put it onto the control and live with the fact, that it breaks your layout ? …

No, this is not an option. CSS to the rescue. Add a new css resource to the control ( or use an existing one) and add the following piece of CSS to the file:

.myLogo {
    position: absolute;
    left: 5px;
    z-index: 1;
}

Next add the myLogo class to the productLogoClass property.  When you now refresh your browser, the logo is displayed correctly, but it overlays the Titlebar and Application links.

Next add these css descriptions to your CSS:

.firstApplication {
    margin-left: 160px !important;
}

.lotusTitleBar .lotusTabs {
    margin-left: 160px;
}

The margin-left value depends on your logo width. Add the firstApplication class to the first node in the xe:this.bannerApplicationLinks section of the applicationLayout.

Now your logo and the links are displayed nicely.

Here is the complete source code for the control.

And here is a small sample application .

HINT: There seems to be a bug in the applicationLayout control. When you add the productLogoClass using the property editor, the class will be added to the xe:applicationLayout entity as well as the xe:oneuiApplication.