You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@ofbiz.apache.org by "Jacques Le Roux (JIRA)" <ji...@apache.org> on 2007/07/03 05:11:04 UTC

[jira] Created: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Use the same backend colourful CSS in eCommerce
-----------------------------------------------

                 Key: OFBIZ-1119
                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
             Project: OFBiz
          Issue Type: Improvement
          Components: ecommerce
    Affects Versions: SVN trunk
            Reporter: Jacques Le Roux
            Priority: Trivial
             Fix For: SVN trunk


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

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.


[jira] Commented: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Posted by "Jacques Le Roux (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-1119?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12566438#action_12566438 ] 

Jacques Le Roux commented on OFBIZ-1119:
----------------------------------------

Marco,

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

> Use the same backend colourful CSS in eCommerce
> -----------------------------------------------
>
>                 Key: OFBIZ-1119
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ecommerce
>    Affects Versions: SVN trunk
>            Reporter: Jacques Le Roux
>            Priority: Trivial
>             Fix For: SVN trunk
>
>
> 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

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.


Re: [jira] Updated: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Posted by Jacques Le Roux <ja...@les7arts.com>.
At bottom of the cart

Jacques

From: "Adrian Crum" <ad...@hlmksw.com>
> Jacques,
> 
> I need the URL so I can fix it.
> 
> -Adrian
> 
> Jacques Le Roux (JIRA) wrote:
>>      [ https://issues.apache.org/jira/browse/OFBIZ-1119?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
>> 
>> Jacques Le Roux updated OFBIZ-1119:
>> -----------------------------------
>> 
>>     Attachment: Just found this little quirk.jpg
>> 
>>> Use the same backend colourful CSS in eCommerce
>>> -----------------------------------------------
>>>
>>>                 Key: OFBIZ-1119
>>>                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
>>>             Project: OFBiz
>>>          Issue Type: Improvement
>>>          Components: ecommerce
>>>    Affects Versions: SVN trunk
>>>            Reporter: Jacques Le Roux
>>>            Priority: Trivial
>>>             Fix For: SVN trunk
>>>
>>>         Attachments: ecommain.patch, Just found this little quirk.jpg
>

Re: [jira] Updated: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Posted by Adrian Crum <ad...@hlmksw.com>.
Jacques,

I need the URL so I can fix it.

-Adrian

Jacques Le Roux (JIRA) wrote:
>      [ https://issues.apache.org/jira/browse/OFBIZ-1119?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
> 
> Jacques Le Roux updated OFBIZ-1119:
> -----------------------------------
> 
>     Attachment: Just found this little quirk.jpg
> 
>> Use the same backend colourful CSS in eCommerce
>> -----------------------------------------------
>>
>>                 Key: OFBIZ-1119
>>                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
>>             Project: OFBiz
>>          Issue Type: Improvement
>>          Components: ecommerce
>>    Affects Versions: SVN trunk
>>            Reporter: Jacques Le Roux
>>            Priority: Trivial
>>             Fix For: SVN trunk
>>
>>         Attachments: ecommain.patch, Just found this little quirk.jpg

[jira] Updated: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Posted by "Jacques Le Roux (JIRA)" <ji...@apache.org>.
     [ https://issues.apache.org/jira/browse/OFBIZ-1119?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Jacques Le Roux updated OFBIZ-1119:
-----------------------------------

    Attachment: Just found this little quirk.jpg

> Use the same backend colourful CSS in eCommerce
> -----------------------------------------------
>
>                 Key: OFBIZ-1119
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ecommerce
>    Affects Versions: SVN trunk
>            Reporter: Jacques Le Roux
>            Priority: Trivial
>             Fix For: SVN trunk
>
>         Attachments: ecommain.patch, Just found this little quirk.jpg
>
>
> 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

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.


[jira] Commented: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Posted by "Jacques Le Roux (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-1119?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12617326#action_12617326 ] 

Jacques Le Roux commented on OFBIZ-1119:
----------------------------------------

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

> Use the same backend colourful CSS in eCommerce
> -----------------------------------------------
>
>                 Key: OFBIZ-1119
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ecommerce
>    Affects Versions: SVN trunk
>            Reporter: Jacques Le Roux
>            Priority: Trivial
>             Fix For: SVN trunk
>
>         Attachments: ecommain.patch
>
>
> 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

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.


[jira] Updated: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Posted by "Adrian Crum (JIRA)" <ji...@apache.org>.
     [ https://issues.apache.org/jira/browse/OFBIZ-1119?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Adrian Crum updated OFBIZ-1119:
-------------------------------

    Attachment: ecommain.patch

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.




> Use the same backend colourful CSS in eCommerce
> -----------------------------------------------
>
>                 Key: OFBIZ-1119
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ecommerce
>    Affects Versions: SVN trunk
>            Reporter: Jacques Le Roux
>            Priority: Trivial
>             Fix For: SVN trunk
>
>         Attachments: ecommain.patch
>
>
> 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

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.


[jira] Commented: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Posted by "Adrian Crum (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-1119?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12619017#action_12619017 ] 

Adrian Crum commented on OFBIZ-1119:
------------------------------------

First pass committed, rev 681696.


> Use the same backend colourful CSS in eCommerce
> -----------------------------------------------
>
>                 Key: OFBIZ-1119
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ecommerce
>    Affects Versions: SVN trunk
>            Reporter: Jacques Le Roux
>            Priority: Trivial
>             Fix For: SVN trunk
>
>         Attachments: ecommain.patch, Just found this little quirk.jpg
>
>
> 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

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.


[jira] Commented: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Posted by "Marco Risaliti (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-1119?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12566105#action_12566105 ] 

Marco Risaliti commented on OFBIZ-1119:
---------------------------------------

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

> Use the same backend colourful CSS in eCommerce
> -----------------------------------------------
>
>                 Key: OFBIZ-1119
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ecommerce
>    Affects Versions: SVN trunk
>            Reporter: Jacques Le Roux
>            Priority: Trivial
>             Fix For: SVN trunk
>
>
> 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

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.


[jira] Commented: (OFBIZ-1119) Use the same backend colourful CSS in eCommerce

Posted by "Adrian Crum (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/OFBIZ-1119?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12566461#action_12566461 ] 

Adrian Crum commented on OFBIZ-1119:
------------------------------------

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.


> Use the same backend colourful CSS in eCommerce
> -----------------------------------------------
>
>                 Key: OFBIZ-1119
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-1119
>             Project: OFBiz
>          Issue Type: Improvement
>          Components: ecommerce
>    Affects Versions: SVN trunk
>            Reporter: Jacques Le Roux
>            Priority: Trivial
>             Fix For: SVN trunk
>
>
> 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

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.