I have just created an xPages application to replace an older and quite complex Lotus Domino database.  I have the functionality of the application, and am now applying the look and feel, and cannot figure a few things out.

 

I have read several articles and tutorials, and viewed several videos, but these are the areas of which I'm unsure and am hoping someone can provide clarification.  BTW, this application will be used mostly from the Notes client, but some of it's xPages will also be used from the web.

1.  All the examples I can find and existing applications I have taken apart use the basic oneUI framework layout, i.e. they have a banner, titlebar, placebar, etc.  My application does not have this.  It uses Steve Castledine's xPages Framework, but then has other components such as a dojo tree as my navigator, and form.dijit.buttons at the top of my views.  Consequently, when I look at the source code, it is a dog's breakfast of everything including the lotusFrame, lotusBanner, etc. but then jumping to lotusAccessLinkTabNavigation, lotusInlinelist lotusLinks, then more lotusMainContent, lotusTitleBar, lotusRightCorner, etc...  How do I determine what the item is that I want to style??

 

2.  I am using the oneUIv2 framework, so I have reviewed the IBM Lotus User Interface Developer Documentation, but I don't understand a) where are the Dojo Override Styles and Dojo Override Theme Styles, and b) how do I use the whole document - do I look up for example Buttons and then am I supposed to be able to just pop the code into a css file and have them appear as they do in the sample (because that doesn't seem to work for me)?

 

3.  How do dojo items differ from regular items?  I've just found that in order to change the colour of a form.dijit.Button I actually had to reiterate in my custom.css file .tundra .dijitButtonNode button and set the background colour there, because if I tried to apply it directly, using the background property in the button, it just coloured the button in the designer client, but nothing rendered in the Notes client.  Why would this be?

4. How do you decide whether to use the style properties for an item individually, or when to use the Design Definition "Enter custom XSP markup"?  Is it just that the Design Definition of the custom control makes it easier to see all the styling in one place, or is there another reason for using one over the other?

 

5.  How do I determine what could be inheriting or preventing the styling of an item?  I had always thought that individual styling should override any styling previously applied, unless you specifically said that a previous style should take precedence.

6.  Do I need to individually add my css files to every custom control or other design element, or if I have my theme document include a custom css, does that automatically include it in each element?  I would think the latter, but I'm not positive.

As you can probably tell, while this is also my first really involved crack at CSS, themes, and frameworks, I am also finding it incredibly difficult to apply what I learn for regular CSS to xPages elements.  I do have a PMR submitted, but IBM support is also confused about the above.

 

Any direction anyone could provide would be much appreciated.  I have also submitted a request for an article to be written on this in the wiki.  Oh, and as if I'm not asking for enough :-) I need the response to be really easy to understand.  I find if I get a really good understanding of how something works, it's much easier to figure things out on my own.

Thanks!

 

To add to this, is another item I find confusing.  The IBM Lotus User Interface Developer Documentation indicates that the css files have to be linked into an xPage in a specific order.  When I look at the source code for my xPage, it also does't appear that this is happening, and maybe that is my problem, but I connected my themes using documentation I found on one of the main xPages websites, and reference my custom.css file inside of the file that is the Application Theme - oneuiv2-default.   This uses the defaultTheme.css, and extends the oneuiv2-core, which extends webstandard and loads core.css and dojo.css.  So, while the documentation states that the core.css file combines the Base Styles, Component Styles and Layout Styles, is it ok that the dojo.css file is loaded at this time??  And of course the tundra.css file is way up above the domino-default.css - is this problematic??  And do I need to manually load the dijit.css file?  Because I understand from the dojo.css file documentation that it overrides and adds to dijit.css, and dojo.css has already been added way up there in the list.....  See my confusion?

 

I know you're all really busy, but if anyone could provide the answers to these questions, I would appreciate it very much.  Thanks!