How to style NamePicker using themes?

Question

How can I style NamePicker from extensions library using themes? I need to style it using Twitter Bootstrap, it means I need to assign 'btn' like class to all its buttons (add, ok, cancel etc.) and so on. I am able to assign class to common button on xpages using themes, but it doesnt influence buttons on NamePicker dialogue? Do they use some different theme id? How can I obtain it?

I have looked into Boostrap4Xpages project source but cant figure out the proper technique. Something can be adjusted by themes and assigning proper class attriutes, sometimes the custom renderers has to be involved. But I cant find a way how it is for NamePicker.

Does it work if you add a 'class' of 'btn' to the attrs under All Properties of the namepicker? — Steve Zavocki
Themes, on their own, are going to be insufficient for this. Themes allow you to override component properties, but that only impacts the resulting HTML if the renderer looks at the properties you're overriding. So ultimately you would need an alternative renderer that uses an approach similar to what Bootstrap4XPages already does with other components. — Tim Tripcony

Michael Saiz Michael Saiz · Accepted Answer · 2013-12-02T15:08:40

Sorry there is no way (As far as i know) to set theme ID's for the Dialog Picker's child elements (Button, TextAreas ..). The only way to Change there Style is to overwrite the css styleClasses wich are assigned to them. E.g xspPickerButton2 = search Button on the Dialog.

Here a short example what i mean:

<style>
    .xspPickerButton2 {
        background-color:red;
    }
</style>

<xp:inputText id="field"></xp:inputText>
<xe:namePicker id="namePicker1" for="field">
    <xe:this.dataProvider>
        <xe:dominoViewNamePicker viewName="_People"
            labelColumn="$17">
        </xe:dominoViewNamePicker>
    </xe:this.dataProvider>
</xe:namePicker>

This Code will create a NamePicker and a Field. If you open the namePicker the Background of the Buttons on the Dialog will be red. You can put the css in a file wich you can include in the resources of the Page. But there is no known way to add theme ids to child elements in XPages (There was a question with a bountie already on Stackoverflow but without any answer) wich would be needed for this.

Another way would be to create your own name Picker by extending the extlib control and add theme ID's to ist children.

How to style NamePicker using themes?

1 Answers