Migrate layout from 2.0 to 2.0.1

[rosemeyer2]

Hi,

I created a application with primefaces 2.0 which used the beautiful blue complex full page layout from the showcase. After migrating to 2.0.1. this layout doesn't work anymore. I changed the layoutunit attributs (top instead of north, height for size), but I don't know, how to fix the css styles so it looks like before.

Can You help here?

Thanks, Rudolf

[cagatay.civici]

Hi,

Sorry for the inconvenience this has caused but old layout was causing a lot of problems. Newly implemented layout is superior.

We have a skinning example online;

http://www.primefaces.org:8080/prime-sh ... omplex.jsf

And the source for this is;

http://code.google.com/p/primefaces/sou ... plex.xhtml

Also user's guide has a skinning section for layout.

Hope this helps,

[rosemeyer2]

Thanks, I already studied the new complex example, but I wasn't able to restore the old look. So it's just a "css" thing, which changed from:
2.0

Code: Select all

	<style type="text/css">
		.pf-layout-pane-north {
			background: url(../images/layout/summer_background.jpg) repeat-x;
		}
		
		.pf-layout-pane-west, .pf-layout-pane-east {
			padding: 0;
		}
		
		.pf-layout-pane-south {
			text-align: center;
		}
		
		img {
			border: 0;
		}
		
		.pf-layout-resizer {
		}
		
		
		.yui-skin-sam .yui-navset .yui-content{
			background: #FFFFFF;
		}	
	</style>

to
2.0.1

Code: Select all

<style type="text/css">
		/* Colors and Images for Dark theme */
		body {
			font-family: Georgia,"Times New Roman",Times,serif;
			font-size: 90%;
		}
		.yui-skin-sam .yui-layout {
			background-color:#000000;
		}
		.yui-layout-unit-top .yui-layout-bd {
			background: url(../images/bottomBack.png) repeat-x;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
			background-color: #333333;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-hd {
			background: url(../images/dialoghd.gif) repeat-x;
			border-bottom-color: transparent;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd h2 {
			color:#FFFFFF;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
			border-color: #666666;
		}
		
		a:link, a:visited { 
			color:#FFFFFF;
			text-decoration: none;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd .close {
			background: url(../images/dialogclose.png) no-repeat;
			border:0;
			top:3px;
			width:16px;
			height:16px;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-unit-right div.yui-layout-hd .collapse,
		.yui-skin-sam .yui-layout .yui-layout-unit-left div.yui-layout-hd .collapse {
			border:0;
			right:20px;
			width:18px;
			height:18px;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-unit-right div.yui-layout-hd .collapse {
			background: url(../images/right.png) no-repeat;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-unit-left div.yui-layout-hd .collapse {
			background: url(../images/left.png) no-repeat;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-clip {
			background-color: #333333;
		}
		
		.yui-skin-sam .yui-layout .yui-layout-unit-bottom div.yui-layout-bd {
			text-align: center;
		}

So I am looking for the white / blue theme from 2.0, but didn't manage to migrate the css.

[cagatay.civici]

Can you post screenshots and mark which sections you are having problems to migrate?

[rosemeyer2]

I would like to remove the margins around the layout and would also like to have the resizer bar like in 2.0. Additional question is, if it would be possible to use a jquery themeroller design as they are fantastic e.g.
http://jqueryui.com/themeroller/#ffDefa ... Shadow=8px

Thanks, Rudolf

[cagatay.civici]

I also like jquery theme roller but widgets need to implement that. Still I think it's not that hard to use the roller skins with p:layout, it's css in the end.

Firebug is the best tool when working with css if you are not already using it. You can easily change and see the css live in your page with that.