Search code examples
xpagesxpages-extlib

Set styleClass for Selected treeNodes

From time to time I stumble over the following issue, that might be easy to solve. But maybe I simply don't get it.

In a XPage treeNode, e.g. used in xe:navigator of xe:applicationLayout (pageTreeNode, placeBarActions, etc.) I wonder how to influence the styleClass property so that I can influence the "selected color".

<xe:this.titleBarTabs>
    <xe:pageTreeNode label="Label Acc1"
        selection="/Admin/Acc1/.*" page="/xpAdminAcc1.xsp"
        styleClass="bg-info">
    </xe:pageTreeNode>
    <!--- ... -->
</xe:this.titleBarTabs>

In this example the styleClass 'bg-info' would be assigned always to the titleBarTab. That's the tab's background. For selected tabs the class "active" gets assigned automatically: class"bg-info active".

Is there a way to define, e.g. class bg-primary to be used for active?

I'm using the bootstrap3 theme. This is the HTML generated code. As you can see, the only difference is that the class of the activated menu item contains the class "active":

<div class="col-sm-12 col-md-12 applayout-titlebar-tabsarea" role="navigation">
<ul id="view:_id1:_id2:appLayout_tb" class="nav nav-tabs applayout-titlebar-tabs" role="tablist">
    <li class="menu-item active">
        <a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc1.xsp" class="bg-info active">Label Acc1</a>
    </li>
    <li class="menu-item">
        <a role="tab">Label Acc2</a>
    </li>
    <li class="menu-item">
        <a role="tab" href="/LAP/MYDB.nsf/xpAdminAcc2.xsp" class="bg-info">Label Acc2</a>
    </li>
<!-- -->
Solution

  • If you add a stylesheet to your application and specify the styling you want to apply for that class, then because that's at application level as opposed to server level, the standard rules for CSS (Cascading Style Sheets, so styles cascade down and get extended / overridden) will apply and the application level will take precedence. Just remember to add the application stylesheet as a resource on your Theme resource / layout Custom Control / XPage. XPage is least preferable, because it needs adding in multiple places.

    The easiest method is to use Firebug or other inspection tool, select the element, find the CSS that's setting the current theme, copy and paste that into your application's stylesheet and override the settings accordingly.

    Here's an example with a slightly different element:

    enter image description here

    My CSS is:

    .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
background-color:red;

    }