OFBiz
  1. OFBiz
  2. OFBIZ-1119

Use the same backend colourful CSS in eCommerce

    Details

    • Type: Improvement Improvement
    • Status: Open
    • Priority: Trivial Trivial
    • Resolution: Unresolved
    • Affects Version/s: SVN trunk
    • Fix Version/s: SVN trunk
    • Labels:
      None

      Description

      This cescription comes from Adrian's answer to a question I asked on the user ML

      Jacques Le Roux wrote:
      > A quick question (mostly intended to Adrian I guess). Why don't we use the backend colourful CSS theme in eCommerce ?

      Jacques,

      The back office apps were styled based on the general agreement that the new styles can target newer
      browsers - older (non-compliant) browsers were not a concern.

      The eCommerce component needs to work with the majority of browsers - even the broken ones. A lot of
      the backend styling doesn't work in certain browsers, so we can't just copy the back office styles
      over to eCommerce.

      The approach taken in the back office apps could be repeated in eCommerce - taking care to introduce
      styles that will work in most browsers.

      One difference is you would want to specify sizes in pixels - so there will be greater control over
      the layout. The back office apps were made scalable (using ems) and accessible - a good feature. As
      a result, the layout is "fluid" - things move around when default font sizes are changed or the
      window size is changed. That behavior might be undesirable in eCommerce.

      Here are the steps taken during the back office UI refactoring:

      1. Eliminate redundant properties settings (fonts and font size for example) in the main style
      sheet. The "Resets" and "Basic Element" sections of maincss.css could be copied over to facilitate
      that (converting em to px in the process).

      2. Reduce the number of CSS styles by using descendent selectors. In other words, style HTML element
      compounds - not individual HTML elements.

      3. Convert table-based layout to CSS-based layout. Use the screenlet classes, etc.

      The eCommerce style sheet will probably require browser-specific hacks. That is an area I am not
      proficient with. Maybe some CSS gurus in the developer community can help with that.

      So, the bottom line is - the process used in the back office apps can be used as a model, but the
      steps need to be carried out differently to maintain browser compatibility.

      -Adrian

      1. ecommain.patch
        14 kB
        Adrian Crum
      2. Just found this little quirk.jpg
        29 kB
        Jacques Le Roux

        Activity

        Hide
        Marco Risaliti added a comment -

        Hi Jacques & Adrian,

        I'm near to complete the migration of all the backend application to the new CSS styles and I would like to know ideas/opinion to extend this job to the ecommerce application but seems to me that it's not possible.
        In this case I will leave like it is now.

        Thanks
        Marco

        Show
        Marco Risaliti added a comment - Hi Jacques & Adrian, I'm near to complete the migration of all the backend application to the new CSS styles and I would like to know ideas/opinion to extend this job to the ecommerce application but seems to me that it's not possible. In this case I will leave like it is now. Thanks Marco
        Hide
        Jacques Le Roux added a comment -

        Marco,

        Its up to you, I guess it's no a priority

        Show
        Jacques Le Roux added a comment - Marco, Its up to you, I guess it's no a priority
        Hide
        Adrian Crum added a comment -

        Marco and Jacques,

        Updating the eCommerce style sheet is a worthwhile endeavor. If someone wants to work on it, I will be willing to help out.

        The guidelines Jacques posted in this issue still need to be followed, but before that starts, let's get the back office style sheet reduced and updated. Then the updated styles from the back office style sheet can be ported over to the eCommerce style sheet - following the guidelines I mentioned above.

        Show
        Adrian Crum added a comment - Marco and Jacques, Updating the eCommerce style sheet is a worthwhile endeavor. If someone wants to work on it, I will be willing to help out. The guidelines Jacques posted in this issue still need to be followed, but before that starts, let's get the back office style sheet reduced and updated. Then the updated styles from the back office style sheet can be ported over to the eCommerce style sheet - following the guidelines I mentioned above.
        Hide
        Adrian Crum added a comment -

        ecommain.patch contains the first pass on the ecommerce style sheet. Resets and basic element styles copied over from maincss.css, unnecessary style attributes removed.

        I've tested it in FF2, and IE7. It needs additional testing in other browsers. Note that this patch doesn't fix any broken layout that already exists - it should produce layout that looks pretty much the same as an unpatched version.

        Show
        Adrian Crum added a comment - ecommain.patch contains the first pass on the ecommerce style sheet. Resets and basic element styles copied over from maincss.css, unnecessary style attributes removed. I've tested it in FF2, and IE7. It needs additional testing in other browsers. Note that this patch doesn't fix any broken layout that already exists - it should produce layout that looks pretty much the same as an unpatched version.
        Hide
        Jacques Le Roux added a comment -

        After a quick review I can see no major differences (if any) with before : it's OK so far...

        Show
        Jacques Le Roux added a comment - After a quick review I can see no major differences (if any) with before : it's OK so far...
        Hide
        Adrian Crum added a comment -

        First pass committed, rev 681696.

        Show
        Adrian Crum added a comment - First pass committed, rev 681696.
        Hide
        Jacques Le Roux added a comment -

        Were there any attempt to continue this effort, else should we close?

        Show
        Jacques Le Roux added a comment - Were there any attempt to continue this effort, else should we close?
        Hide
        Adrian Crum added a comment -

        There are still a lot of places where the deprecated box* CSS styles are used. Those need to be changed to use the new screenlet* CSS classes.

        Show
        Adrian Crum added a comment - There are still a lot of places where the deprecated box* CSS styles are used. Those need to be changed to use the new screenlet* CSS classes.
        Hide
        Jacques Le Roux added a comment -

        You mean in backend also?

        Show
        Jacques Le Roux added a comment - You mean in backend also?
        Hide
        Adrian Crum added a comment -

        Yes. See my comment from 2008-02-07. That step was never finished - we still have deprecated styles being used in eCommerce and the back-office applications.

        Show
        Adrian Crum added a comment - Yes. See my comment from 2008-02-07. That step was never finished - we still have deprecated styles being used in eCommerce and the back-office applications.
        Hide
        Jacques Le Roux added a comment -

        Thanks, that's what I understood, I asked for confirmation, was not quite sure

        Show
        Jacques Le Roux added a comment - Thanks, that's what I understood, I asked for confirmation, was not quite sure

          People

          • Assignee:
            Unassigned
            Reporter:
            Jacques Le Roux
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:

              Development