3 Replies Latest reply on Jun 18, 2007 8:01 AM by ilya_shaikovsky

    Using my own CSS-stylesheet instead of skin, bookmarkable UR

    rehdie
    rehdie Jun 15, 2007 7:53 AM

      Hello everybody,

      I'm just starting with jBoss/seam with rich-faces and it seems to be a really cool framework.

      I have questions regarding richfaces:

      I would like to use the rich-faces components, but I have to use my own stylesheet(s) instead of a theme. Why?

      For example I would like to use the <rich:panel> component, but these panels should look like this:

      [img]http://members.inode.at/667021/panel.JPG[/img]

      As you can see, the panel requires images in each corner and shadow-images.

      So how can I achieve this? I have to implement my own renderer and create my own stylesheet (with the appropiate class-names), right?

      Implementing my own renderer should not be a big deal (if there is a better way to do this, please let me know), but how can I use my own stylesheet instead of a theme?

      -----------------------------------------------------------------

      Another problem is bookmarkable URLs. I would like to use the <rich:tabPanel> and <rich:tab> components but It would be cool to update the browsers URL when another tab is selected (which obviously makes sense for switch-type server only).

      Did anybody already implement such a feature?

      regards
      Dieter

      • 7291 Views
      • Tags:
        • 1. Re: Using my own CSS-stylesheet instead of skin, bookmarkabl
          ishabalov Jun 15, 2007 6:10 PM (in response to rehdie)

          Dieter, I've got several requests lately about Skinability. Definitely we need special section on our documentation about it.
          We will have it soon, but in a meanwhile I put together short blog article about basic Skinability features and how to use (or not to use) it.

          http://blog.exadel.com/?p=25

          However, your desired look is different story - you cannot implement corner images, unless you will have fixed size panels (and therefore being able to use static images for background).

          So, it you willing to sacrifice corner images, you easily can implement desired look with your custom css. You may specify background image for header, no repeat, aligned to the left, and specify corresponding background color. That will create "flexible" headers with your image.

          We had in the past panel with "corners" and decided to scrap it to simplify markup.

            • Actions
          • 2. Re: Using my own CSS-stylesheet instead of skin, bookmarkabl
            rehdie
            rehdie Jun 17, 2007 3:16 AM (in response to rehdie)

            Hi,

            thanks for your reply (btw: I believe, I should have posted this topic in user forum).

            I've already read your blog entry and it is clear for me now.

            But I have a proposal for improvement:

            In our project we have panels with different looks (espacially different colors in headline). I think it would be a good idea, to add a new attribute "cssPrefix" to all richfaces components (default is none).

            This prefix would be used for the custom style classes.

            For example:

            <rich:panel cssPrefix="sideBar">
            ....
            </rich:panel>

            In this case the custom style classes used would be "sideBar-rich-panel", "sideBar-rich-panel-header" and "sideBar-rich-panel-body".

            This way I can define different sets of styles, which can be selected by different prefixes:

            sideBar-rich-panel {
            ...
            }

            sideBar-rich-panel-header {
            ...
            }

            sideBar-rich-panel-body {
            ...
            }


            main-rich-panel {
            ...
            }

            main-rich-panel-header {
            ...
            }

            main-rich-panel-body {
            ...
            }


            So

            <rich:panel cssPrefix="main">
            ....
            </rich:panel>

            would display a panel, which may look totally different than the panel with a cssPrefix of "sideBar".

            What do you think about it?

              • Actions
            • 3. Re: Using my own CSS-stylesheet instead of skin, bookmarkabl
              ilya_shaikovsky
              ilya_shaikovsky Jun 18, 2007 8:01 AM (in response to rehdie)

              If you need to customize different panel on the same page you may use classes attributes like "headerClass"

              If the panels are on the different pages - just create different CSS for predefined classes.

                • Actions