3 Replies Latest reply on Jul 25, 2008 11:40 AM by Mikael Andersson

    How to integrate Richfaces css with SEAM css

    Jarek Gilewski Newbie

      Hello,


      I'm using Richfaces skins with SEAM application. Richfaces has some css definition. Im interested in using some Richfaces css colors definition in my application theme.css.
      Something like



      a.myclass {
          color: #{richfaces.class_name.color}
      }
      



      Is it possible?


      Thanks


      Jarek


        • 1. Re: How to integrate Richfaces css with SEAM css
          Mikael Andersson Master

          Not sure you can access that kind of information.


          he only thing I know is that if you are using Facelets you can access the RichFaces skin properties (and you custom skin properties if you have any).


          #{a4jSkin.propertyName}
          


          (if I remember correctly)


          - micke

          • 2. Re: How to integrate Richfaces css with SEAM css
            Jarek Gilewski Newbie
            Putting #{a4jSkin} in one of my *.xhtml file I can read all Richfaces CSS preferences.
            So if I put something like this #{a4jSkin.generalLinkColor} on *.xhtml file i get a color value in format #AABBCC.

            But If I put it in CSS file it doesn't work.
            I think that i should use something different than:

                <link href="#{request.contextPath}/stylesheet/theme.css" rel="stylesheet" type="text/css" />

            becaus the theme.css file should be parsed by SEAM interceptors, but HOW?

            Regards

            Jarek
            • 3. Re: How to integrate Richfaces css with SEAM css
              Mikael Andersson Master

              Yeah that is a problem, only really works with CSS defined in the page.


              XCSS to the rescue!


              In your .xhtml page/template:


              <a4j:loadStyle src="resource://css/testing.xcss"/>
              



              testing.xcss which is in a package css in the classpath:



              <?xml version="1.0" encoding="UTF-8"?>
              <f:template xmlns:f="http:/jsf.exadel.com/template"
                 xmlns:u="http:/jsf.exadel.com/template/util'"
                 xmlns="http://www.w3.org/1999/xhtml" >
                 
              <f:verbatim><![CDATA[
              
              .myCssClass{
                   border: #9B9BAF 1px solid;
                   padding: 3px;
                     border-spacing:0px;
                     border-collapse: collapse;
                     margin: 0;
              }
              
              ]]></f:verbatim>
              
              <u:selector name=".myCssClass">
                   <u:style name="font-size" skin="generalSizeFont" />
                   <u:style name="font-family" skin="generalFamilyFont" />
                   <u:style name="color" skin="generalTextColor" />
              </u:selector>
              
              </f:template>
              



              Here I define some stuff in the normal CSS way and then add some properties from the skin.


              With the latest release there is also the plug'n skin stuff which I haven't used yet.


              - micke