[OFBIZ-241] CSS Layout and Other Cleanups in the Manager Applications

• Type: Improvement
• Status: Closed
• Priority: Major
• Resolution: Duplicate
• Affects Version/s: Trunk
• Component/s: framework
• Assignee: Unassigned
• Reporter: Marco Risaliti
• Created: 12/Sep/06 15:54
• Updated: 04/Jan/08 12:04
• Resolved: 04/Jan/08 12:04

Description

Copy of http://jira.undersunconsulting.com/browse/OFBIZ-202 from David Jones

=======================================================

The purpose of this task is to improve the current CSS based layout, and separate it from the ecommerce application so they do not interfere with eachother. There are some issues with the layout, and lots of room for improvement including in some cases chaging table-based layouts to CSS based, and making styles and HTML structure cleaner and more flexible. This is not meant to be nearly as aggessive an effort as in ecommerce, and is meant more for general improvements and not to facilitate extremely flexible customization and such as is the case in ecommerce.

I would like to propose the removal of all redundant style info... for example, nearly all <div class="tabletext"> wrappers can be removed, the exception being where they are used like <p>s - the default text style can be set on body; all "inputBox", "selectBox", "smallSubmit" styles can be removed - can style input elements globally; remove embedded style="margin: 0" on forms, style forms globally; change <div class="head1|head2|head3"> to <h1|h2|h3>, etc. (Just the ones off the top of my head, I'm sure there are more.)

I would be happy to help with this, but due to the large number of files affected, it will probably need to be coordinated with any other css work.

I agree with this approach Joe. It is much more flexible and will reduce the HTML size a fair bit, and with proper labelling of different areas it can be very flexible too. This is what I've done with the ofbiz.org home page.

You're right about this requiring a lot of changes in lots of different files. I'm not sure what the best way to manage this is, but to get it started it is probably best to choose 2-3 "proof of concept" pages and get those cleaned up, and then solicit help with others based on those.

Of course, chances are no one except the core group will help anyway, but I always find it entertaining to try...

I would be willing to help as well, if you like. I have converted my ecommerce site already to css (www.heatwithsolar.com). Since my goal is to use OFBiz on my site, I have a strong desire to retain CSS level 1 capability. I have no real need to go to a higher standard of CSS yet until it is supported by more browsers.

As soon as I get an SVN up and running well, I'll likely start working on this anyways. Just let me know. [e-mail]

Issue Links

• incorporates: OFBIZ-798 CSS clean up from AssetMaint component
• incorporates: OFBIZ-799 CSS clean up from Accounting component
• incorporates: OFBIZ-800 CSS clean up from Marketing component
• incorporates: OFBIZ-801 CSS clean up from Content component
• incorporates: OFBIZ-802 CSS clean up from WorkEffort component
• incorporates: OFBIZ-646 the table row the appbar tabs apear in (appbar.ftl) has the table row background color of white hardcoded
• incorporates: OFBIZ-666 maincss.css File Second Pass
• incorporates: OFBIZ-754 maincss.css File - Third Pass
• incorporates: OFBIZ-858 Webtools UI Refactor Second Pass
• incorporates: OFBIZ-887 Refactor Example Component UI
• incorporates: OFBIZ-892 Refactor UI elements in the Common component
• incorporates: OFBIZ-915 Accounting Component UI Refactor
• incorporates: OFBIZ-916 Remove Embedded Styling in Manufacturing Component

Sub-Tasks

• Replace all div class="tabletext" wrappers with <p> or just remove them and set the style info in the BODY element in the css file: Closed
• Change all <div class="head1|head2|head3"> to <h1|h2|h3>: Closed
• Remove HTML styling code from widgets: Closed
• Refactor Party Manager UI: Closed
• Refactor Webtools UI: Closed