Subscribe via Feed
, Jul 16, 2009 12:06:25 PM
10 responses to Themes and CSS Frameworks
David Leedy, August 23, 2010 3:03 PM
Are you talking about one of my NotesIn9 videos? I assume so.
Regarding the other stuff. From my understands, XPages in 8.5.1 can't handle media types. So there's no print or screen/projection available right now. I believe that has been fixed in 8.5.2
Chris Roberts, August 23, 2010 2:35 PM
I was looking at the blueprint README and noticed this code for ie.css
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
In your video this line is replaced in xpage theme by a code which deals with IE6
Could you explain why please ?
David Leedy, July 27, 2010 4:57 PM
Cool! Glad to be of help. Thanks for the comments on NotesIn9. I really appreciate that!!! Lots more coming.
Lenni Sauve, July 27, 2010 4:41 PM
That clarifies things beautifully ! I had viewed your BluePrint screencast which is another reason I decided to use BluePrint. And I find your screencasts to be very helpful - just enough to take in at one time and very explanatory. So please do keep making them for us.
I think I understand now how it all works together. Thank you so much for your help!
David Leedy, July 27, 2010 4:35 PM
Just saw your 3rd post.
Re 3 - I assume that if you extend webstandard you won't really need to do anything else. You should be all set for the dojo stuff. If you really are trying to use the lotus classes then extend oneUI
Re 5 - Make sure that you're only using CSS Classes for Xpages Controls. Don't use #ID's. XPages will change the ID Name of the controls at rendering time. So stick with classes.
David Leedy, July 27, 2010 4:26 PM
I'll take a stab at some of your questions. :-)
oneUI and Blueprint are different animals. I've not done a ton with oneUI - I prefer Blueprint for various reasons and use that instead of oneUI. But you have a good question, what about the lotusclasses? In the theme document what you want to do is EXTEND one of the server themes. I think that might have gotten missed in the original post by Declan. There are two - webStandard and oneUI. Since I don't want the bloat of oneUI I extend webStandard when working with Blueprint.
Why extend? Because that loads the files needed for the Dojo Controls like the date picker. You could extend oneUI and have access to the lotus classes but I'm not sure that makes sense really. You're paying too much for too little benefit I think. But you really want to extend WebStandard.
oneUI is not grid based. BluePrint is. So I think you really need to decide how you want to control the layout of your site and go from that. If you want the grid. Then use BluePrint and extend web standard. If you want oneUI's layout then just stick with that.
I did a screencast on using BluePrint in XPages on NotesIn9
The stuff on the server theme is this... Currently Blueprint files need to be added to each and every NSF that wants to use it. This will work from the domino server and also XPages in the Notes Client just fine. But if we didn't want to add it to each NSF, we could install the BluePrint files on the server itself. And we could even extend Blueprint. That's really cool if you are doing a lot of web only apps, but since it's not in the NSF it would replicate to the client. Technically I think you can install it in the bowels of the client but that seems silly. Just use the NSF if you need the client to work.
The oneUI Dummy file is actually really cool. What that does is if you add it as a resource to your XPage or custom control, then in the style section you'll see the names of the available classes. Without it you need to already know what they are. Think of it as a defination file.
That's on of the things about themes. Using a theme is a little tougher to develop I think because you don't really get the rendering in DDE. But if you add the CSS files directly to a page, then you'll see a lot of the style rendering and also the list of classes.
To add a style to a viewControl - you need to select the and go to the Style properties and add your class.
Sorry I can't really help you with some of the oneUI specific questions. I don't like it so I don't use it. However I did recently learn of one killer feature if you're working with International Apps. It's very easy to translate your page from "left to right" reading to "Right to Left"
I'm not a CSS expert. So I don't want to have to learn and be stuck with all the lotusFooter stuff. I want to learn how to write the CSS to get the look and feel that I want. I don't want all my stuff to look the same - though obviously that can be a benefit depending on your situation. BluePrint gives me a Grid. That makes it VERY easy to place my content on the screen. Then I need need to work on getting the content to look how I want it to.
Hope this helps! Let me know if you need anything else.
Lenni Sauve, July 27, 2010 4:15 PM
Clarification (so that you don't think I'm completely bonkers!):
Re #3 above - our Notes clients have different configurations so I can't just reference the files locally.
Re #5 above - I can follow instructions in information posted, but I am not getting the expected results - so I'm not knowing if this is a result of problems with the themes, or if I'm not understanding how the CSS is invoked. Or hey, maybe both.
Lenni Sauve, July 27, 2010 2:49 PM
sorry, accidentially submitted before finished...
...In looking at the IBM Lotus User Interface Developer Documentation, I'm thinking that this is what is described as a Grid, and I see where there is code for a tables.css, but how do I actually 'call' that tables.css if I create it?
Thanks so much for any clarification you can provide.
Lenni Sauve, July 27, 2010 2:45 PM
I have just completed an application which uses xPages for both the web and the Notes client, and am now applying the look and feel. I should mention that I am using quite a bit of dojo in my application. I have read everything I can find on themes and css, including your series above, the BP207 Make your xPage Apps "Pop!" with CSS and Themes slides that you and David Leedy presented at Lotusphere 2010, and learned a lot about xPages by completing your tutorial. I have several questions regarding themes and css, and I'm hoping that you can clarify these for me:
1. If I use the blueprint theme, I'm understanding from the above that I would use it instead of the oneUI theme, because the oneUI theme contains css that I may never use? If I don't use the oneUI theme, how does the CSS recognize lotus classes?
2. If I use the oneUI theme:
a) Could I just include the blueprint files as resources in that theme to get the equalizing of all browsers and the grid layout capabilities?
b) In the wiki there is an article that contains an area called Using Themes. I followed the instructions there to create a theme called oneuiv2-core, which extends webstandard. Then I followed the instructions to create a theme called oneuiv2-default, which extends oneuiv2-core. However, the Redbook Wiki: Best Practices for Developing Web Applications Using Domino 8.5, there are instructions for creating a oneui_v2_core theme, but that extends oneui_basic. So do I need to create a oneui_basic theme too? Does that extend webstandard? I'm assuming that the extra step is because I'm using 8.5.1 and not 8.5.2, where I hear that oneuiv2 is included automatically? Although I'm thinking there should be the beta version with 8.5.1 - right?
3. Because I am also using these themes for the Notes client, and page 36 of the slides for your presentation identified above says "server based themes cannot be used by xPages in the Notes Client", I'm thinking that inside of each of these themes, instead of referencing /.ibmxspres/global/theme..... inside the resource href tags, I should just be putting the name of the css file and then including the file in my CSS files within the database. Would this also be true for webstandard too?
4. I've also been reading about and have taken a copy of OneUIDummy.css. But I don't really understand what it is for. Is this just a reference that I keep handy to know which selections I can make from oneui? Or do I include it in the files in the database and, if so, I don't understand how it really gives me a leg up. Do I put my code in it inside of the curly braces??
5. Lastly, I'm so sorry to be so dense about this, but I still don't understand how exactly I call or reference either the theme or a CSS, especially for the Notes client. My application isn't as straightforward as having a lotusFooter, lotusContent, etc. How can I apply specific styling say to a viewPanel on a Custom Control? In looking at the
Sean Cull, July 29, 2009 3:21 PM
Thanks for these articles, some basic questions
1) do you need a theme definition resource in each db or can the server use a server based one ? - it seems like you need one
2) where is the default theme set on the server and can I get a copy of it ?
3) Am I right in thinking that it is the theme document that generates the xspTabbedPanelOuter and similar tags i.e. an incorrect theme would mean no tags
4) are references to the themes case sensitive in the properties - there are lots of variations of oneui floating about in the demos
5) are themes known to be flakey in 8.5.0 FP1. I get all sorts of weird behavior like deleting the blue theme document ( from the xpages wiki ) breaks the oneui theme even though it is not referenced. the other one is not being able to get the tabbed panel to appear correctly - I am just using default, oneui and blue from the demos - I have not extended them
Thanks a million Sean