How to integrate IBM Connections business cards with an external application and target the styles easily?

StackOverflow https://stackoverflow.com/questions/19623594

  •  01-07-2022
  •  | 
  •  

Question

In IBM Connections, when integrating the Profiles business card with an external application, using the loadCssFiles=true parameter has the positive effect of styling the hover activated Business Cards just like they would be within IBM Connections. Unfortunately, it also completely messes up any page styling because it converts the body tag from

<body>

to

<body class="lotusui lotusui30dojo lotusui30_body lotusui30_fonts lotusui30 lotusSpritesOn">
<span id="semtagmenu" role="tooltip" style="...">...</span>

This has the unfortunate effect of restyling everything on the page as well as the hover activated Business Cards.

Applying the following snippet in Chrome console/Firebug rectifies the problem:

// all the offending CSS classess
var themLotusClasses = 'lotusui lotusui30dojo lotusui30_body lotusui30_fonts lotusui30 lotusSpritesOn';
// remove from the body tag
jQuery('body').removeClass(themLotusClasses);
// wrap *only* the Business Card HTML
jQuery('#semtagmenu').wrap('<span class="' + themLotusClasses + '"></span>');

This targets just the Business Cards, so the IBM Connections specific styles do not affect the rest of the page layout.

Is there a more elegant way of targeting only the span#semtagmenu node with all the extra Lotus classes?

I really want the Business Card styling. But I only want it applied to the Business Cards.

Was it helpful?

Solution

OK, I've found that the easiest way is to simply duplicate the styles at 

/connections/resources/web/_style?include=com.ibm.lconn.core.styles.oneui3/base/standaloneVcard.css

and the enclosed sprite images, then use loadCssFiles=false instead.

This adds the classes:

lotusui lotusui30dojo lotusui30_body lotusui30_fonts lotusui30 lotusSpritesOn

to 

<span id="semtagmenu" role="tooltip" style="...">...</span>

which in turn targets the hover triggered Business Card only for styles.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top