Search This Blog

Wednesday, May 8, 2013

"Separator Node" in Application Layout of XPages Extension Lib: making it better

Hello

I work on XPages application using Extension Library.
I use Application Layout control from it.
I defined several "Page Links" on a title bar and used "Separator Node" between some of them.



Default Separator Node looks ugly because of its border and background.
You may see it between Page 2 and Page 3.


Using Chrome tools I quickly found a corresponding html-markup and tested styles which made it better.
You may see on the following screen shot that the first Separator Node looks better now.

Well, the rest of it was simple.

I assigned a dummy class name to the Separator Nodes to be able to find these elements on the page in a browser. Actually, I needed parent nodes of Separator Nodes which were represented by <li> elements because exactly these <li> elements had borders, different background and so on I wanted to get rid of.


I added client side JavaScript that applied mentioned styles to the corresponding parent <li> elements of my separator nodes


Now it looks better :-)


No comments:

Post a Comment