Author: ilya_shaikovsky Date: 2008-04-01 04:37:54 -0400 (Tue, 01 Apr 2008) New Revision: 7514 Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/usage.xhtml Log: snippets changes Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/usage.xhtml 2008-04-01 01:05:05 UTC (rev 7513) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/usage.xhtml 2008-04-01 08:37:54 UTC (rev 7514) @@ -8,10 +8,22 @@ <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> <style> -ul,ol { - font-size: 11px !important; -} -</style> + ul,ol { + font-size: 11px !important; + } + .viewsourcepanel { + padding:10px; + width:100%; + overflow:auto; + border-width:0; + } + .viewsourcebody { + padding:0; + } + ol{ + font-size:11px !important; + } + </style> <p> This section overviews main principles of standard components skinning with the Rich Faces framework. @@ -82,22 +94,31 @@ <p> Using first way CSS with next definitions will be automatically added to pages: </p> - <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> - <rich:insert src="/richfaces/standardSkinning/snippets/snippet1.css" highlight="xhtml"/> - </rich:panel> + <fieldset class="demo_fieldset"> + <legend class="demo_legend">CSS for standard elements snippet</legend> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/standardSkinning/snippets/snippet1.css" highlight="xhtml"/> + </rich:panel> + </fieldset> <p> And using the second way next CSS will influence corresponding elements: </p> - <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> - <rich:insert src="/richfaces/standardSkinning/snippets/snippet2.css" highlight="xhtml"/> - </rich:panel> + <fieldset class="demo_fieldset"> + <legend class="demo_legend">CSS for standard elements inside rich container snippet</legend> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/standardSkinning/snippets/snippet2.css" highlight="xhtml"/> + </rich:panel> + </fieldset> <p> And the last one way means that classes with names corresponding to elements names will be added to the application pages and possible to set manually: </p> - <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> - <rich:insert src="/richfaces/standardSkinning/snippets/snippet3.css" highlight="xhtml"/> - </rich:panel> + <fieldset class="demo_fieldset"> + <legend class="demo_legend">Predefined rich classes</legend> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/standardSkinning/snippets/snippet3.css" highlight="xhtml"/> + </rich:panel> + </fieldset> <p class="note" style="height: 40px"> <b><i>Important Exception:</i></b> <b>a</b> elements have classes based on "link" and pseudo class name. <i>(e.g.: rich-link, rich-link-hover, rich-link-visited)</i>