3 Replies Latest reply on Feb 17, 2009 8:56 AM by Nick Belaevski

    skin.properties and theme.css

    Prathamesh Gaddam Novice

      Hi,

      I'hv defined the custom.skin.properties with custom settings. [The skin.properties are rendered for facets,background, etc but not all of the UI components].

      However I'm unable to use the skin property values at theme.css (stylesheet) dynamically, for example:

      
      a:active, a:link, a:visited {
       color:#{richSkin.generalLinkColor};
      }
      a:hover {
       color:#{richSkin.hoverLinkColor};
      }
      


      In richfaces-impl.jar/META-INF/faces-config.xml the 'richSkin' is defined as:

       <managed-bean>
       <managed-bean-name>richSkin</managed-bean-name>
       <managed-bean-class>org.richfaces.skin.SkinBean</managed-bean-class>
       <managed-bean-scope>application</managed-bean-scope>
       </managed-bean>
      


      1. How can we use the properties from skin.properties?
      2. Where can I have the list all the skin properties ?

      Thank you in advance!

      Prathamesh

        • 1. Re: skin.properties and theme.css
          Nick Belaevski Master

          Hello,

          CSS declaration is ok. Have you declared that you use custom skin in web.xml:

          <context-param>
           <param-name>org.richfaces.SKIN</param-name>
           <param-value>custom</param-value>
           </context-param>
          
          ?

          • 2. Re: skin.properties and theme.css
            Prathamesh Gaddam Novice

            Thank you for your reply. I hv already configured my web.xml as provided. Its changing the skin, however the "links" i.e "<s:link>" is not applied with the selected skin color.

            This code in theme.css works:

            a:active, a:link, a:visited {
             color:#fffff;
            }
            a:hover {
             color:#fffff;
            }
            


            But I need these values to be changed dynamically as per skin selection. I want to use as:
            a:active, a:link, a:visited {
             color:#{richSkin.generalLinkColor};
            }
            a:hover {
             color:#{richSkin.hoverLinkColor};
            }
            


            which is not working. Please suggest a way.

            Note: And some similar components are yet to identified.

            • 3. Re: skin.properties and theme.css
              Nick Belaevski Master

              My suggestions:

              1. You are using a4j:* command components to switch skins. This won't work, you should use h:* instead.
              2. Your *.css files are overriding these selectors. Use Firebug to check if that's the cause.
              3. You are using #{richSkin.hoverLinkColor} in external CSS files - this is not implemented, you should use XCSS files or declare this inline on the page.

              This:

              <html>
               <head>
               <style type="text/css">
               a:active, a:link, a:visited {
               color:#{richSkin.generalLinkColor};
               }
               a:hover {
               color:#{richSkin.hoverLinkColor};
               }
               </style>
               </head>
              
               <body>
               <h:form>
               <h:panelGrid columns="1">
               <h:commandLink value="BlueSky">
               <a4j:actionparam value="blueSky" assignTo="#{skinBean.skin}" />
               </h:commandLink>
               <h:commandLink value="Ruby">
               <a4j:actionparam value="ruby" assignTo="#{skinBean.skin}" />
               </h:commandLink>
               <h:commandLink value="Wine">
               <a4j:actionparam value="wine" assignTo="#{skinBean.skin}" />
               </h:commandLink>
               <h:commandLink value="Custom">
               <a4j:actionparam value="custom" assignTo="#{skinBean.skin}" />
               </h:commandLink>
               </h:panelGrid>
              
               <a href="#">My link</a>
              
               </h:form>
              
               </body>
              
               </html>
              works for me without problems.