Question

I have been trying to find a resource for learning how to develop my own themes for IBM (Lotus) Notes XPage applications and company server defaults, but I have been unable to find a way to do it. I have found plenty of information on how themes work, and I know they are a collection of css that can be server specific and application specific and they can even inherit from one another etc. but I have been unable to actually find the correct naming scheme. Of course I can write my own css and connect the classes etc that I write to a control to change text and background and so on, but as far as I understand the entire point of using a theme is to not have to do this step.

How do I find the proper naming scheme to create my own themes which also support the extension library controls?

thanks in advance!

Was it helpful?

Solution

After spending a great deal of time trying to work out an answer to this question, and with the links that @Naveen wrote in the comments of the question, I feel this question warrants a real answer.

First off, the link to this wiki is great if you are trying to create your own XPage theme. I had found something similar before posting this question. This article which was also listed by Naveen in the comments is also a great source if you are trying to find a way to expand the XPage Theme and need a way to get the control name for the Theme's XML file, however it will NOT work for the Extension Library Controls! This is because at least most, if not all extension library controls rely on dojo, and they use the dojo themes in conjunction with the XPages Theme. There might be a way to turn this off in the controls' All Property tabs, but this is a situation where it might be easier to additionally create a dojo theme yourself.

I feel that the creation of a dojo theme is a question of its own and I do not want to go into it really here, but I will say that there are four default dojo themes which are a bit basic. Upon creation of your own theme, you can import a dojo theme by using the following code:

<resource dojoTheme="true">
        <content-type>text/css</content-type>
        <href>/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css</href>
</resource>

and by also using

    <control>
        <name>ViewRoot</name>
        <property mode="concat">
            <name>styleClass</name>
            <value>body</value>
        </property>
        <property>
            <name>styleClass</name>
            <value>tundra</value>
        </property>
    </control>

where body is your own html-body style and tundra is the dojo theme. This will make sure that the ExtLib controls at the very least have some sort of a style and are not always completely transparent, or have some other unwanted default style.

If you do not wish to write your own style, it is possible to only override a few classes. Finding these classes can be difficult, but they are found both on the server and on the client, and you can reference them. The file will be located in the:
..\Notes\Data\domino\js\dojo-1.5.2\dijit\themes
file. Additionally, you can use firebug or any other browser's inspect element option to find out what css classes are being used for that control. I have found no way to alter the naming scheme, or better put, create your own classes and set the style in the designer and have it make any difference. The only option that I have found is to override the class already given in my css.

I hope this helps any future person.

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