Apple Style Breadcrumbs In XPages
Tags : Lotus Domino XPages CSS
Bookmark :
If you followed along with the 'Learning XPages' blog series then in part 26 and part 27 we created some basic breadcrumbs for the application. Breadcrumbs are a method of natigation that expand out as you progress deeper into an application, In the XPages Phonebook application we had three levels of breadcrumb, one for the hompage, one for the location name and one for the person document we were viewing. At the deepest level it looks something like this :
These breadcrumbs look very basic so for another application I'm working on I wanted to make them look a little nicer and through the use of CSS and a couple of image files I was able to make the breadcrumbs look similar to the ones that you can see on the Apple website.
First of all I need two file, One for the homepage link and one for the arrows between the breadcrumb items. For the homepage link I used the 'house' icon from the famfamfam Silk icon pack. You can down load the entire pack from their website, there are lots of great other icons that you may end up using in your own applications. For the separator image I ended up creating my own in photoshop. You can download it from here. Add the two images into your application as resources, the crumb.gif can be added as an Image Resource and the house.png will need to be added as a file resource.
As an aside, I really wish PNG files could be added as image resources and that the notes client ( not web ) would render them. Maybe if enough people promote thisIdeaJam Idea it will happen in a future version of the client.
For the CSS I edited the custom.css and replaced all the #phonebookBreadcrumbs lines with the following
.crumbs {width:100%; margin:0 auto; padding: 0; line-height:3em; background:#fdfdfd; border:1px solid #dedede;}
.crumbs a {margin:0 5px 0 0; padding:10px 15px 10px 6px; background: #fdfdfd url(crumbs.gif) no-repeat right center;}
.crumbs span.house {margin:0 5px 0 0; padding:10px 15px 10px 6px; background:#fdfdfd url(crumbs.gif) no-repeat right center;}
.crumbs img.house {margin:0 5px 0 0; padding:10px 15px 10px 6px; background:#fdfdfd url(crumbs.gif) no-repeat right center;}
Then opening the layout_PlaceBar custom control I replaced the styleclasses with the correct classes.
I also had to adjust the 'Home' link so it displayed the house.png image instead of the word 'Home' and I removed the ' > ' labels that I had manually used to separate the breadcrumbs in the original version.
Now when you save the custom control and refresh your application the breadcrumb bar looks much nicer.
NOTE : Due to the way the screenshot is pasted into this blog entry the nice fading effect is lost so you'll have to imagine the grey of the arrow fading backwards giving a nice smooth effect or you can have a look at the live demo.
IE7 Update : Some extra CSS is required for the breadcrumbs to work correctly in IE7 :
.crumbs img {margin:0 0 0 0;padding:10px 0;}
/
Bookmark :
If you followed along with the 'Learning XPages' blog series then in part 26 and part 27 we created some basic breadcrumbs for the application. Breadcrumbs are a method of natigation that expand out as you progress deeper into an application, In the XPages Phonebook application we had three levels of breadcrumb, one for the hompage, one for the location name and one for the person document we were viewing. At the deepest level it looks something like this :
These breadcrumbs look very basic so for another application I'm working on I wanted to make them look a little nicer and through the use of CSS and a couple of image files I was able to make the breadcrumbs look similar to the ones that you can see on the Apple website.
First of all I need two file, One for the homepage link and one for the arrows between the breadcrumb items. For the homepage link I used the 'house' icon from the famfamfam Silk icon pack. You can down load the entire pack from their website, there are lots of great other icons that you may end up using in your own applications. For the separator image I ended up creating my own in photoshop. You can download it from here. Add the two images into your application as resources, the crumb.gif can be added as an Image Resource and the house.png will need to be added as a file resource.
As an aside, I really wish PNG files could be added as image resources and that the notes client ( not web ) would render them. Maybe if enough people promote thisIdeaJam Idea it will happen in a future version of the client.
For the CSS I edited the custom.css and replaced all the #phonebookBreadcrumbs lines with the following
.crumbs {width:100%; margin:0 auto; padding: 0; line-height:3em; background:#fdfdfd; border:1px solid #dedede;}
.crumbs a {margin:0 5px 0 0; padding:10px 15px 10px 6px; background: #fdfdfd url(crumbs.gif) no-repeat right center;}
.crumbs span.house {margin:0 5px 0 0; padding:10px 15px 10px 6px; background:#fdfdfd url(crumbs.gif) no-repeat right center;}
.crumbs img.house {margin:0 5px 0 0; padding:10px 15px 10px 6px; background:#fdfdfd url(crumbs.gif) no-repeat right center;}
Then opening the layout_PlaceBar custom control I replaced the styleclasses with the correct classes.
I also had to adjust the 'Home' link so it displayed the house.png image instead of the word 'Home' and I removed the ' > ' labels that I had manually used to separate the breadcrumbs in the original version.
Now when you save the custom control and refresh your application the breadcrumb bar looks much nicer.
NOTE : Due to the way the screenshot is pasted into this blog entry the nice fading effect is lost so you'll have to imagine the grey of the arrow fading backwards giving a nice smooth effect or you can have a look at the live demo.
IE7 Update : Some extra CSS is required for the breadcrumbs to work correctly in IE7 :
.crumbs img {margin:0 0 0 0;padding:10px 0;}
/
Comments
Posted by Julian Buss At 02:15:59 AM On 04/03/2009 | - Website - |
Posted by Julian Buss At 02:18:21 AM On 04/03/2009 | - Website - |
Posted by Julian Buss At 03:11:08 AM On 04/03/2009 | - Website - |
Posted by Mike Amberg At 08:45:42 AM On 04/03/2009 | - Website - |
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; .NET CLR 2.0.50727; .NET CLR 1.1.4322)
Timestamp: Fri, 3 Apr 2009 16:07:18 UTC
Message: Member not found.
Line: 20
Char: 49436
Code: 0
URI: { Link }
Posted by Jason At 12:23:03 PM On 04/03/2009 | - Website - |
Posted by JC Hsu At 09:44:54 PM On 05/05/2009 | - Website - |
Posted by JC Hsu At 09:45:16 PM On 05/05/2009 | - Website - |
Posted by JC Hsu At 09:45:17 PM On 05/05/2009 | - Website - |