Forrest
  1. Forrest
  2. FOR-182

Use new css-based skin for Forrest

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 0.6
    • Fix Version/s: 0.6
    • Component/s: Skins (general issues)
    • Labels:
      None

      Description

      We need to have Forrest switch to use a totally CSS-based skin, which would feel similarly to the current color scheme.

        Activity

        Hide
        Nicola Ken Barozzi added a comment -
        As a newskin, I would like to see something like this, of the author kindly donates it :-)

          http://whs.winnacunnet.k12.nh.us/
          http://www.exclupen.com/projects/whs/
          http://www.exclupen.com/misc/forrest/xhtml-css/index.html

        The third like is about how it would look like with the current color scheme, but I would like the other one, it's more light and fresh.

        Also Lenya has proposed their skin.
        Example:
        http://cocoon.apache.org/lenya/installation/source_version.html.

        Show
        Nicola Ken Barozzi added a comment - As a newskin, I would like to see something like this, of the author kindly donates it :-)    http://whs.winnacunnet.k12.nh.us/    http://www.exclupen.com/projects/whs/    http://www.exclupen.com/misc/forrest/xhtml-css/index.html The third like is about how it would look like with the current color scheme, but I would like the other one, it's more light and fresh. Also Lenya has proposed their skin. Example: http://cocoon.apache.org/lenya/installation/source_version.html .
        Hide
        Nicola Ken Barozzi added a comment -
        http://www.stuffandnonsense.co.uk/archives/whats_in_a_name.html
        http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
        http://www.csszengarden.com/

        It would be cool if we come up with an html output that has all the hooks that CSS designers would need to make a skin.

        In particular, the cssgarden shows how much can be done with CSS alone, and if we could make users not need to even touch xsl for 99% of the skins it would be really cool.

        We should also document well our html output classes, divs and spans, so that skin writers have a stable contract to abide to.
        Show
        Nicola Ken Barozzi added a comment - http://www.stuffandnonsense.co.uk/archives/whats_in_a_name.html http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html http://www.csszengarden.com/ It would be cool if we come up with an html output that has all the hooks that CSS designers would need to make a skin. In particular, the cssgarden shows how much can be done with CSS alone, and if we could make users not need to even touch xsl for 99% of the skins it would be really cool. We should also document well our html output classes, divs and spans, so that skin writers have a stable contract to abide to.
        Hide
        David Crossley added a comment -
        Here is one email thread:
         [Skins] whs/lenya skin for 0.7
         http://marc.theaimsgroup.com/?t=108854138300003
        Show
        David Crossley added a comment - Here is one email thread:  [Skins] whs/lenya skin for 0.7   http://marc.theaimsgroup.com/?t=108854138300003
        Hide
        Thorsten Scherler added a comment -
        The http://www.csszengarden.com/ would be an awesome template to use as start! I mean the plan can be to grep the html code and write the pipelines around that. In the end we would have the "original" cssgarden html with the project content and "whatever" css.

        Not being a designer I would like to use an existing css do have a starting point ;-).

        How I would start:
        1) use the krysalis site copy that and rename it. ...or write one from scratch.
        2) start to change all html and pdf xslt in order to get the "garden"-html.
        3) Extend the existing colors with new attributes and colors. The aim would be not even have to provide a custom css file but rather define it in the skinconf.xml.

        The only problem that I am not sure about is the licenses of the "garden" http://creativecommons.org/licenses/by-nc-sa/1.0/.

        Maybe somebody can tell whether we could use the license.

        ...and the plan would be to have the skin ready for 0.7.

        WDYT?
        thorsten
        Show
        Thorsten Scherler added a comment - The http://www.csszengarden.com/ would be an awesome template to use as start! I mean the plan can be to grep the html code and write the pipelines around that. In the end we would have the "original" cssgarden html with the project content and "whatever" css. Not being a designer I would like to use an existing css do have a starting point ;-). How I would start: 1) use the krysalis site copy that and rename it. ...or write one from scratch. 2) start to change all html and pdf xslt in order to get the "garden"-html. 3) Extend the existing colors with new attributes and colors. The aim would be not even have to provide a custom css file but rather define it in the skinconf.xml. The only problem that I am not sure about is the licenses of the "garden" http://creativecommons.org/licenses/by-nc-sa/1.0/ . Maybe somebody can tell whether we could use the license. ...and the plan would be to have the skin ready for 0.7. WDYT? thorsten
        Hide
        Thorsten Scherler added a comment -
        The pdf is mentioned in the above comment of mine because I see the limitation of our pdf approach.

        A documentation that is directed to e.g. a board of directory have to follow some CI guidliness. I prefer to extend the skinconf.xml rather then overriding the xsl.

        Things that should be customizable from skinconf.xml:
        in general: custom fonts (size, color, ...)
        - Cover page
        Company / project name; custom title for the documentation; extra custom information (e.g. version, date, ...)
        - ToC page
        seperate ToC page
        - content
        * custom header for odd/even
        * custom footer for odd/even

        ...
        thorsten
        Show
        Thorsten Scherler added a comment - The pdf is mentioned in the above comment of mine because I see the limitation of our pdf approach. A documentation that is directed to e.g. a board of directory have to follow some CI guidliness. I prefer to extend the skinconf.xml rather then overriding the xsl. Things that should be customizable from skinconf.xml: in general: custom fonts (size, color, ...) - Cover page Company / project name; custom title for the documentation; extra custom information (e.g. version, date, ...) - ToC page seperate ToC page - content * custom header for odd/even * custom footer for odd/even ... thorsten
        Hide
        Thorsten Scherler added a comment -
        > *Question*
        > I would like the corner images rendered through svg with the header color.
        > How can I do that?
        >
        > Have a look at prueba2. The corner images are blackish but should be white. I would define a corner in svg and somewhere in the pipeline the svg should be rendered with the right color and exported as png.
        >
        > Any ideas where I can start? Any documentation that I should have read?


        I have not done any docs on this unfortunately

        What you can do is to take a look at the krysalis-site and tigris-style skins that already use them, and take a look at the names of the corner images. You can experiment with them by simply calling the right filename in the browser.

        They should be something like:

        *c-*-*-*-1*-2*-3*.png

        With the wildcards being:

          path to the xslt that creates the corner (in the common skin we have
                                                    two ready)
          name+c
          orientation top or bottom (t or b)
          orientation left or right (l or r)
          size (pixels)
          background color name as in the skin color profile
          the stroke color name as in the skin color profile
          the foreground color name as in the skin color profile


        The pipeline that generates them is resources.xmap.

        NOTE: the pngs have a problem due to the gamma setting being interpreted differently in browsers. I minimized the difference, but maybe it's better if we use lossless jpeg instead in the future.
        Show
        Thorsten Scherler added a comment - > *Question* > I would like the corner images rendered through svg with the header color. > How can I do that? > > Have a look at prueba2. The corner images are blackish but should be white. I would define a corner in svg and somewhere in the pipeline the svg should be rendered with the right color and exported as png. > > Any ideas where I can start? Any documentation that I should have read? I have not done any docs on this unfortunately What you can do is to take a look at the krysalis-site and tigris-style skins that already use them, and take a look at the names of the corner images. You can experiment with them by simply calling the right filename in the browser. They should be something like: *c-*-*-*-1*-2*-3*.png With the wildcards being:   path to the xslt that creates the corner (in the common skin we have                                             two ready)   name+c   orientation top or bottom (t or b)   orientation left or right (l or r)   size (pixels)   background color name as in the skin color profile   the stroke color name as in the skin color profile   the foreground color name as in the skin color profile The pipeline that generates them is resources.xmap. NOTE: the pngs have a problem due to the gamma setting being interpreted differently in browsers. I minimized the difference, but maybe it's better if we use lossless jpeg instead in the future.
        Hide
        Thorsten Scherler added a comment -
        One example is the following
        images/rc-t-l-5-1body-2tab-selected-3tab-selected.png
        Show
        Thorsten Scherler added a comment - One example is the following images/rc-t-l-5-1body-2tab-selected-3tab-selected.png
        Hide
        Thorsten Scherler added a comment -
        http://svn.apache.org/viewcvs.cgi/forrest/trunk/src/core/context/skins/css-style-dev/note.txt?root=Apache-SVN

        Here you can find the upcoming todos. If you find some new issues with the skin please add them here if you are an user or edit the above mentioned file if you a committer.

        At 09.07.04 the list contains the following todos:
        Notes for developer:

        - the corner images should be rendered through svg with the header color.
        -> DONE

        - the menu points should be displayed "better".
        -> TODO
        -- Use the krysalis-site menu approach for the overall menu display.
        -> TODO
        -- Use the old lenya innermenu approch to further enhance the menu.
        -> TODO
        -- make the lenya approach configurable.
        -> TODO

        - the content area needs some attention.
        -> TODO
        -- introduce the heading scheme from krysalis (<headings type="clean|box|underlined"/>)
        -> TODO
        -- introduce the toc for each html-page
        -> TODO
        -- introduce the external-link-images.
        -> TODO

        - the publish note should be where now only a border is.
        Like <div id="published"/>, but make it configurable.
        -> TODO

        - footer needs some attention
        -> TODO
        -- the footer do not have the color profile! Enable it!
        -> TODO
        -- the footer should as well contain a feedback link.
        See http://issues.apache.org/eyebrowse/ReadMsg?listName=forrest-user@xml.apache.org&msgNo=71
        -> TODO

        - introduce credits alternativ location
        -> TODO

        - border for published / breadtrail / menu /tab divs
        -> TODO
        Show
        Thorsten Scherler added a comment - http://svn.apache.org/viewcvs.cgi/forrest/trunk/src/core/context/skins/css-style-dev/note.txt?root=Apache-SVN Here you can find the upcoming todos. If you find some new issues with the skin please add them here if you are an user or edit the above mentioned file if you a committer. At 09.07.04 the list contains the following todos: Notes for developer: - the corner images should be rendered through svg with the header color. -> DONE - the menu points should be displayed "better". -> TODO -- Use the krysalis-site menu approach for the overall menu display. -> TODO -- Use the old lenya innermenu approch to further enhance the menu. -> TODO -- make the lenya approach configurable. -> TODO - the content area needs some attention. -> TODO -- introduce the heading scheme from krysalis (<headings type="clean|box|underlined"/>) -> TODO -- introduce the toc for each html-page -> TODO -- introduce the external-link-images. -> TODO - the publish note should be where now only a border is. Like <div id="published"/>, but make it configurable. -> TODO - footer needs some attention -> TODO -- the footer do not have the color profile! Enable it! -> TODO -- the footer should as well contain a feedback link. See http://issues.apache.org/eyebrowse/ReadMsg?listName=forrest-user@xml.apache.org&msgNo=71 -> TODO - introduce credits alternativ location -> TODO - border for published / breadtrail / menu /tab divs -> TODO
        Hide
        Thorsten Scherler added a comment -
        the pelt skin is ready
        Show
        Thorsten Scherler added a comment - the pelt skin is ready

          People

          • Assignee:
            Thorsten Scherler
            Reporter:
            Nicola Ken Barozzi
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development